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

时间:2016-08-02 09:39:24

标签: mvvm uwp windows-10-universal uwp-xaml template10

我正在设计菜单,我在VariableSizedWrapGrid中有项目列表,如图所示。 enter image description here 我想在MouseOver上更改当前活动元素的边框粗细,我也想更改标题' Business'的前景色。 我应该如何使用MVVM在UWP中实现这一目标?

我知道的方式是:

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

  2. 命令将设置VIewModel的

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

    BorderThickness =" {Binding BorderWidth}"

  5. 这对于一个VariableSizedWrapGrid项目非常有用。但我有3个项目,如上所示。我是否需要使用3个ViewModel属性创建3个命令,这些命令会将边框粗细绑定到相应的项目?

1 个答案:

答案 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>

如您所见,状态已经更改OpacityStroke,只需为DoubleAnimation属性添加另一个BorderThickness。其他州将使用默认值。