mvvm - 在 UWP 上更改鼠标边框粗细

Question

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

我知道的是:

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

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

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

   BorderThickness="{Binding BorderWidth}"

这对于一个 VariableSizedWrapGrid 的项目非常有用。但我有 3 个项目，如上所示。我是否需要创建具有 3 个 ViewModel 属性的 3 个命令来将边框粗细绑定(bind)到相应的项目？

Answer 1

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

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

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

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

您将以名称 (x:Key) 的自定义样式结束，您可以在 VariableSizedGrid 的 GridViewItem 上使用该样式。您必须编辑的样式部分处于 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属性。其他州将使用默认值。