How to animate Rectangle Stroke Thickness in 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.