Change Border Thickness on Mouse Over UWP - mvvm

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?

Answer 1

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.