Accessing parent's namescope from a child

Question

In XAML, I have code like this:

<Style TargetType="Button">
    <Setter Property="Foreground" Value="#c10000" x:Name="TextColor"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement" CornerRadius="8">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="TextColor" 
                                            Storyboard.TargetProperty="Foreground" To="#FF8D00" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This code fails with a message saying that "TextColor" wasn't found in the border's namescope. How do I access the namescope where the TextColor is defined then? The ColorAniamtion is supposed to access the setter with the foreground property and change the color.

Answer 1

Animate the Foreground property of the button instead of animating the Setter. Since the Foreground property has the type Brush as opposed to Color, I am using a object animation instead of a color animation in the sample code below:

<Button.Style>
    <Style TargetType="Button">
        <Setter Property="Foreground" Value="#c10000"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="RootElement" CornerRadius="8">
                        <ContentPresenter/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Foreground)">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="#FF8D00"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Button.Style>