在 UWP 上更改鼠标边框粗细

Question

我正在设计菜单，我在 VariableSizedWrapGrid 中有项目列表，如图所示。我想更改 MouseOver 上当前活动元素的边框粗细，我还想更改标题的前景色 'Business'。我应该如何使用 MVVM 在 UWP 中实现此目的？

我知道的方式是：

在 MoseOver 上使用交互并调用 ViewModel 命令。
命令将设置 VIewModel
BorderWidth 属性将绑定到控件的 BorderThickness 属性

BorderThickness="{Binding BorderWidth}"

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

Answer 1

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

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

C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10240.0\Generic\generic.xaml C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10586.0\Generic\generic.xaml

或者您也可以在 MSDN 上找到它们，例如 GridViewItem. You can also 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。其他州将使用默认值。

在 UWP 上更改鼠标边框粗细

Change Border Thickness on Mouse Over UWP

mvvm

uwp

windows-10-universal

template10

uwp-xaml