更改鼠标悬停在 UWP 上的边框厚度

Question

我正在设计菜单，我在 VariableSizedWrapGrid 中有项目列表，如图所示。 我想更改 MouseOver 上当前活动元素的边框厚度，我还想更改标题“业务”的前景色。 我应该如何在 UWP 中使用 MVVM 实现这一点？

我知道的是：

1. 在 MoseOver 上使用 Interaction 并调用 ViewModel 命令。

2. 命令将设置 VIewModel 的 BorderWidth 属性

3. BorderWidth 属性将绑定到控件的 BorderThickness 属性

   BorderThickness="{Binding BorderWidth}"

这将非常适用于一个 VariableSizedWrapGrid 的项目。但我有 3 个项目，如上图所示。我是否需要使用 3 个 ViewModel 属性创建 3 个命令，将边框厚度绑定到相应的项目？

Answer 1

除非您有真正的理由从视图模型内部设置BorderWidth（例如，根据视图模型/模型的其他属性计算的宽度，您可以简单地编辑默认的GridViewItem 样式并使用VisualStateManager处理PointerOver 事件。

您可以在磁盘上找到默认样式，每个 SDK 版本都有一个文件。

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml C:\Program 文件 (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml

或者您也可以在 MSDN 上找到它们，例如 GridViewItem 的那个。你也可以edit the existing style in Blend。

您将以可在VariableSizedGrid 的GridViewItem 上使用的带有名称 (x:Key) 的自定义样式结束。您必须编辑的样式部分处于PointerOver 视觉状态：

  <VisualState x:Name="PointerOver">
    <Storyboard>
      <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                       Storyboard.TargetProperty="Opacity"
                       Duration="0"
                       To="1"/>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
      </ObjectAnimationUsingKeyFrames>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
      </ObjectAnimationUsingKeyFrames>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
      </ObjectAnimationUsingKeyFrames>
      <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
    </Storyboard>
  </VisualState>

如您所见，状态已经改变了Opacity 和Stroke，只需为BorderThickness 属性添加另一个DoubleAnimation。其他州将使用默认值。