How to change the border thickness in mouseover

Question

I'm working on the styles of controls. I want to change the borderthickness of a control when the mouseover is done. I want to write this in the style itself instead of writing it in codebehind

So, I tried in the following way.

<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness">
<SplineDoubleKeyFrame  KeyTime="0" Value="2" />                                   
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

But this is throwing an error.

How can I achieve this functionality.

Answer 1

Use ObjectAnimationUsingKeyFrames instead DoubleAnimationUsingKeyFrames in your case:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness">
    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>

DoubleAnimationUsingKeyFrames animates the value of a Double property, whereas BorderThickness is type of Thickness, not Double.