Question

I need to animate the text color of a custom control between two colors, which are read from two Brush properties of the custom control. My resources look like this:

<SolidColorBrush x:Key="TextBrush">{TemplateBinding Foreground}</SolidColorBrush>
<SolidColorBrush x:Key="AltTextBrush">{TemplateBinding ForegroundAlt}</SolidColorBrush>

Right now, I am trying to animate using a ColorAnimation:

<ColorAnimation Storyboard.TargetName="MyControlText" Storyboard.TargetProperty="Foreground" To="{StaticResource AltTextBrush}" Duration="00:00:00.3000000" />

The ColorAnimation seems to want a Color object, rather than the Brush I am trying to pass. I think I can write an IValueConverter to get the color from the brush, but before I do that, I want to see if there is a simpler way to do the job. Here are my questions:

— Is there a simple way to animate between two brush resources, or do I need to extract the color for animation?

— If I need to extract the colors, is an IValueConverter best practice?

— And finally, amI headed down the right road, or is there a simpler solution to this problem?

Thanks for your help.

Answer 1

Tried with using a Binding and it seems to be working like this

To="{Binding Source={StaticResource TextBrush}, Path=Color}"

Here’s a xaml example

<Window.Resources>
    <SolidColorBrush x:Key="TextBrush">Black</SolidColorBrush>
    <Storyboard x:Key="blinkAnimation" Duration="0:0:5" >
        <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                        Storyboard.TargetName="TitleTextBlock"
                        To="{Binding Source={StaticResource TextBrush}, Path=Color}"
                        AutoReverse="True"
                        Duration="0:0:2"/>
    </Storyboard>
</Window.Resources>
<Grid Background="Black" Name="grid">
    <TextBlock x:Name="TitleTextBlock"
               Background="Black"
               Text="My Text"
               FontSize="32"
               HorizontalAlignment="Center"
               VerticalAlignment="Bottom"
               Foreground="White">
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <StaticResource ResourceKey="blinkAnimation"/>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
</Grid>