How to animate Rectangle Stroke Thickness in XAML? - xaml

Question

I have been trying to change the stroke thickness of my button, but I seem to be missing something. The basic idea is I want the button to look zoomed in, as I shrink the transparent stroke (border) around the rectangle.
Here are the variations that I have used:
<DoubleAnimation To="10"
Storyboard.TargetName="innerRectangle"
Storyboard.TargetProperty="(Rectangle.StrokeProperty).StrokeThickness">
</DoubleAnimation>
I have 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.
The entirety of the code is as follow:
<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 you Enable Dependent Animations.