ColorAnimation with LinearGradientBrush

Question

I am trying to make an animated custom control with two different styles being displayed depending on a boolean Property.

I have been able to move elements back and forth as well as changing colors to plain colors, but I would like to be able to use a LinearGradient instead of a plain color and this is where it gets tricky.

I am aware that I could do this in a "not so tricky" way in code behind, but I really want to split code behind and display between .cs and .xaml files, so I'd love to have a fully XAML solution.

Here is the code of my Control:

        <Canvas
            Width="100"
            Height="40"
            Background="Red">

            <Ellipse Width="20" Height="20" >
                <Ellipse.RenderTransform>
                    <TranslateTransform X="0" Y="0"/>
                </Ellipse.RenderTransform>
                <Ellipse.Stroke>
                    <SolidColorBrush Color="White"/>
                </Ellipse.Stroke>
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
                        <GradientStop Color="#FFFFFF" Offset="0" />
                        <GradientStop Color="#BBBBBB" Offset="0.567"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Style>
                    <Style TargetType="Ellipse">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Test}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" To="Black" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" />
                                            <DoubleAnimation Duration="0:0:0.5" To="100" Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" To="White" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)"></ColorAnimation>
                                            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(TextBox.RenderTransform).(TranslateTransform.X)"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Ellipse.Style>
            </Ellipse>
        </Canvas>

I would love when my storyBoard begins or ends for instance, to be able to switch the two colors of my gradient, but I see no way to differentiate them as I can't use the Storyboard.TargetName property in a style.

Answer 1

You could use this to animate the first (index = 0) GradientStop of the LinearGradientBrush if that's what you want:

<ColorAnimation Duration="0:0:2" To="Black"
    Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].Color" />