How to animate the thickness of the stroke of a rectangle in XAML?

Question

I'm trying to change the thickness of the stroke of my button, but there seems to be something missing. The basic idea is that I want the button to look enlarged as I decrease the transparent stroke (border) around the rectangle.

Here are the options I used:

<DoubleAnimation To="10" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="(Rectangle.StrokeProperty).StrokeThickness"> </DoubleAnimation> 

I also used the following line:

 <DoubleAnimation To="10" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="StrokeThickness"> </DoubleAnimation> 

and

 <DoubleAnimation To="10" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="(Rectangle.StrokeThickness)"> </DoubleAnimation> 

None of the above works.

All code is as follows:

 <Style x:Key="SecondaryButton" TargetType="Button"> <!--<Setter Property="Background" Value="LightSkyBlue"></Setter> <Setter Property="Foreground" Value="Black"></Setter>--> <Setter Property="Padding" Value="5"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Background="Transparent" x:Name="RootGrid"> <Border x:Name="Outline" BorderBrush="Transparent" BorderThickness="2"> <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Red" StrokeThickness="15" Fill="LightSkyBlue" RadiusX="15" RadiusY="15" /> </Border> <ContentPresenter x:Name="Text" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <!--<Storyboard> <ColorAnimation To="Black" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"></ColorAnimation> <ColorAnimation To="LightSkyBlue" Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"></ColorAnimation> </Storyboard>--> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <!--<ColorAnimation To="LightBlue" Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"></ColorAnimation>--> <DoubleAnimation To="10" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="(Rectangle.StrokeThickness)" > </DoubleAnimation> <!--<ColorAnimation To="LightSkyBlue" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Color)"> </ColorAnimation>--> <!--<ColorAnimation To="Red" Storyboard.TargetName="Outline" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"> </ColorAnimation>--> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation To="10" Storyboard.TargetName="innerRectangle" Storyboard.TargetProperty="StrokeThickness"> </DoubleAnimation> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Answer 1

Make sure Enable dependent animations .