我正在设计菜单,我在VariableSizedWrapGrid中有项目列表,如图所示。 我想在MouseOver上更改当前活动元素的边框粗细,我也想更改标题' Business'的前景色。 我应该如何使用MVVM在UWP中实现这一目标?
我知道的方式是:
使用交互并在MoseOver上调用ViewModel命令。
命令将设置VIewModel的
BorderWidth属性将绑定到控件的BorderThickness属性
BorderThickness =" {Binding BorderWidth}"
这对于一个VariableSizedWrapGrid项目非常有用。但我有3个项目,如上所示。我是否需要使用3个ViewModel属性创建3个命令,这些命令会将边框粗细绑定到相应的项目?
答案 0 :(得分:3)
除非您有真正的理由在视图模型中设置BorderWidth
(例如,根据视图模型/模型的其他属性计算宽度,您可以简单地编辑默认的GridViewItem
样式并使用VisualStateManager
来处理PointerOver
事件。
您可以在磁盘上找到默认样式,每个SDK版本都有一个文件。
C:\ Program Files(x86)\ Windows 套装\ 10 \设计时\ CommonConfiguration \中性\ UAP \ 10.0.10240.0 \通用\ generic.xaml C:\ Program Files(x86)\ Windows 试剂盒\ 10 \设计时\ CommonConfiguration \中性\ UAP \ 10.0.10586.0 \通用\ 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
,只需为DoubleAnimation
属性添加另一个BorderThickness
。其他州将使用默认值。