WinRT Foreground animation

Question

I wanna animate the Foreground color of a ContentControl.

<VisualStateGroup
x:Name="SelectionStates">
<VisualState
    x:Name="Unselected">
    <Storyboard>
        <DoubleAnimation
            Duration="0"
            Storyboard.TargetName="UnselectedContent"
            Storyboard.TargetProperty="Opacity"
            To="1" />
        <DoubleAnimation
            Duration="0"
            Storyboard.TargetName="Content"
            Storyboard.TargetProperty="Opacity"
            To="0" />
    </Storyboard>
</VisualState>
<VisualState
    x:Name="Selected">
    <Storyboard>
        <DoubleAnimation
            Duration="0"
            Storyboard.TargetName="Content"
            Storyboard.TargetProperty="Opacity"
            To="1" />
        <DoubleAnimation
            Duration="0"
            Storyboard.TargetName="UnselectedContent"
            Storyboard.TargetProperty="Opacity"
            To="0" />
    </Storyboard>
</VisualState>

<ContentControl
    x:Name="Content"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    Foreground="{StaticResource CalendarDayForegroundSelected}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    Margin="{TemplateBinding Padding}"
    IsTabStop="False" >
    <ContentControl.Content>
        <TextBlock Text="{TemplateBinding Content}" />
    </ContentControl.Content>
</ContentControl>
<ContentControl
    x:Name="UnselectedContent"                            
    ContentTemplate="{TemplateBinding ContentTemplate}"
    Foreground="{StaticResource CalendarDayForeground}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    Margin="{TemplateBinding Padding}"
    IsTabStop="False" >
    <ContentControl.Content>
        <TextBlock Text="{TemplateBinding Content}" />
    </ContentControl.Content>
</ContentControl>

This is the way I do it. Unfortunately I need the same ContentControl twice with a different name. Is there a better way to do it?

I tried it with the ColorAnimation but without success.

Thanks Dani

Answer 1

You cannot directly set the "Foreground" property of your control using a ColorAnimation. You can, however, set the color of its Foreground brush by explicitly setting the brush in XAML and giving it a name:

<ProgressBar x:Name="ProgressBar" Grid.Row="1" VerticalAlignment="Bottom" Value="{TemplateBinding Progress}">
<ProgressBar.Foreground>
    <SolidColorBrush x:Name="ProgressBrush" Color="Orange"/>
</ProgressBar.Foreground>

Now that you have a reference to the control's Foreground brush property ("ProgressBrush") you can animate it's color using the Color Animation.

<ColorAnimation Storyboard.TargetName="ProgressBrush" Storyboard.TargetProperty="Color"
                               To="Black" Duration="0:0:0.25" EnableDependentAnimation="True"/>

Hope this helps! Reference: How to: Animate the Color or Opacity of a SolidColorBrush