WPF XAML Animation property path not working

Question

I'm trying to animate the content of a metro styled button. My problem is that the content of the button does not change color. The foreground color does not change.

Here's my button's style:

    <Style x:Key="MetroButtonStyle"
       TargetType="Button">
    <Setter Property="MinWidth"
            Value="40"/>
    <Setter Property="Width"
            Value="100"/>
    <Setter Property="MinHeight"
            Value="88"/>
    <Setter Property="HorizontalAlignment"
            Value="Center"/>
    <Setter Property="Foreground"
            Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="AppButton"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="1"
                                                     Storyboard.TargetProperty="(UIElement.Opacity)"
                                                     Storyboard.TargetName="MouseOverEllipse"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="1"
                                                     Storyboard.TargetProperty="(UIElement.Opacity)"
                                                     Storyboard.TargetName="PressedEllipse"/>
                                    <ColorAnimation Duration="0"
                                                    To="Black"
                                                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="EllipseInnerContent"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Duration="0"
                                                    To="#7F8D8D8D"
                                                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
                                                    Storyboard.TargetName="EllipseInnerContent"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Vertical"
                                HorizontalAlignment="Center">
                        <Grid Margin="0,14,0,5"
                              HorizontalAlignment="Center"
                              MinWidth="40">
                            <Ellipse x:Name="PressedEllipse"
                                     Fill="{TemplateBinding Foreground}"
                                     Opacity="0"
                                     Width="40"
                                     Height="40"/>
                            <Ellipse x:Name="MouseOverEllipse"
                                     Fill="#7F8D8D8D"
                                     Opacity="0"
                                     Width="40"
                                     Height="40"/>
                            <Ellipse Fill="Transparent"
                                     Stroke="{TemplateBinding Foreground}"
                                     StrokeThickness="2"/>
                            <ContentPresenter x:Name="EllipseInnerContent"
                                              Content="{TemplateBinding Content}"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>
                        </Grid>
                        <TextBlock x:Name="LabelText"
                                   TextWrapping="Wrap"
                                   HorizontalAlignment="Center"
                                   FontFamily="Segoe UI"
                                   FontSize="12"
                                   Text="{TemplateBinding Tag}"
                                   Foreground="{TemplateBinding Foreground}"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here's is how i use it. This does not works:

                        <Button Style="{StaticResource MetroButtonStyle}"
                                Tag="Blah">
                            <TextBlock Text="XXX"/>
                        </Button>

This works:

                        <Button Style="{StaticResource MetroButtonStyle}"
                                Tag="Blah"
                                Content="XXX"/>

TextBlock is not a Control. TextBlock is a FrameworkElement. That is the reason why animating the Control.Foreground property doesn't work. — roberther, May 24 '12 at 17:01
Changing TargetProperty to Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" does not change anything. Can it even work at all? — SiriusNik, May 24 '12 at 18:28
[here](http://stackoverflow.com/questions/3856780/in-a-buttons-control-template-how-can-i-set-the-color-of-contained-text) is a similar question — roberther, May 24 '12 at 20:02

score 0 · Accepted Answer · answered May 25 '12 at 06:36

You have

Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="EllipseInnerContent"

in your animations, where EllipseInnerContent is a ContentPresenter and there's no Foreground property on ContentPresenter.

Change it to ContentControl.

Also, when putting a TextBlock as a content of a control, it will inherit the foreground of the page\user control that it's part of. Use DataTemplate instead to have the TextBlock created for you and then it will inherit the foreground from the button.

WPF XAML Animation property path not working

1 Answers1