How to animate Rectangle Stroke Thickness in XAML?

storyboard, visualstates, windows-8, windows-runtime, xaml

Solution

Make sure you Enable Dependent Animations.

Problem

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> ```

Original source