Change Border Thickness on Mouse Over UWP

Question

I am designing menu and I have list of items in VariableSizedWrapGrid as shown in figure. I want to change border thickness of Current active element on MouseOver also I want to change foreground color of title 'Business'. How should I achieve this in UWP using MVVM?

Way I know is:

Use Interaction and call ViewModel command on MoseOver.
Command will set BorderWidth property of VIewModel
BorderWidth property would bind to BorderThickness property of control

BorderThickness="{Binding BorderWidth}"

This will work great with one VariableSizedWrapGrid's item. But I have 3 items as shown above. Do I need to create 3 commands with 3 ViewModel Properties which will bind border thickness to respective item?

Possible duplicate of [How to change SelectedBackground in ListViewItemPresenter inside a GridView](http://stackoverflow.com/questions/38705396/how-to-change-selectedbackground-in-listviewitempresenter-inside-a-gridview) — Andrii Krupka, Aug 02 '16 at 10:58
This is a UI concern, so your VM shouldn't be involved in it whatsoever. — , Aug 02 '16 at 16:05

score 3 · Accepted Answer · answered Aug 02 '16 at 10:55

Unless if you have a real reason to set the BorderWidth from inside your viewmodel (e.g. calculated width depending on other properties of your viewmodel/model, you can simply edit the default GridViewItem style and use the VisualStateManager to handle the PointerOver event.

You can find the default styles on your disk, with a file per SDK version.

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

Or you can also find them on MSDN, like the one for GridViewItem. You can also edit the existing style in Blend.

You'll end with a custom style with a name (x:Key) that you can use on your VariableSizedGrid's GridViewItem. The part in the style that you have to edit is in the PointerOver visual state:

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

As you can see, the state already changes the Opacity and Stroke, just add another DoubleAnimation for the BorderThickness properties. Other states will use the default.

Thanks proper use of template editable controls with ViewStateManager and blend made my day. — Mangesh Kulkarni, Aug 03 '16 at 08:10

Change Border Thickness on Mouse Over UWP

1 Answers1