Question

I have the following code:

<Style x:Key="GoButton" TargetType="Button">
    <Setter Property="Background" Value="#FF2B832C"/>
    <Setter Property="Foreground" Value="#FFfdf7bd"/>
    <Setter Property="FontSize" Value="30" />
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#4d9e41" Offset="0" />
                <GradientStop Color="#294c22" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="5">
                        <Grid Background="{TemplateBinding Background}" Margin="0">
                            <Border x:Name="BackgroundAnimation" Background="#FF448DCA" CornerRadius="5" Opacity="0"/>
                            <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.8,1" StartPoint="0,0">
                                        <GradientStop Color="#66b04d" Offset="0"/>
                                        <GradientStop Color="#66b04d" Offset="0.375"/>
                                        <GradientStop Color="#2d822d" Offset="0.625"/>
                                        <GradientStop Color="#2d822d" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="6" RadiusX="6"/>
                    <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="5" RadiusX="5" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I want to change FontSize when user MouseOver on button. But this code does not work, it works if I remove string, but without my animation:

<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" To="35" />

how to do it correctly?

Answer 1

I got your animation to work by replacing the <ContentPresenter> in your template with

<ContentControl x:Name="nestedContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" 
                Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

and then setting Storyboard.TargetName of your MouseOver animation to nestedContentControl.

The problem appears to be providing a value for Storyboard.TargetName. Although you can access the name of the control the template applies to (i.e. the Button that uses this template), the Storyboard doesn’t seem able to access the templated control. So instead we nest another ContentControl (Button is itself a ContentControl) within the template and use that.

Using another ContentControl has its downsides, however. I had to add the Foreground="{TemplateBinding Foreground}" property in order for it to pick up the foreground colour you were using. It’s quite possible that you might need to add further such ‘pass-through’ bindings depending on what other properties you need to use.

Be aware that there is also an animation on your Focused VisualState. This animation won’t work as it stands because you haven’t specified a TargetName for it. I don’t know what to suggest for this one because I’m not sure what you’re trying to achieve.

Finally, while answering this question I also found a similar question about animating a property of the templated-parent object. In that case, the solution appears to be to wire up the animation in code-behind.