WPF ColorAnimation alternative - wpf

Question

What I'm trying to do is set the background of control to a gradient when the ToggleButton its part of is enabled. This would be easy but this is WPF and for whatever reason will not let me use a LinearGradientBrush in the ColorAnimation.
All I'm looking for is just an alternative to accomplish something similar thing to what I've attempted to do below.
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="DarkGray" Style="{StaticResource ToggleBrushOn}" x:Name="Pill">
<Border x:Name="Circle" Background="#FFFFFF" Width="22" Height="22" CornerRadius="22" Margin="35,5,5,5" HorizontalAlignment="Right"/>
<Border.Clip>
<RectangleGeometry Rect="0,0,65,32" RadiusX="15" RadiusY="32"/>
</Border.Clip>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Pill" Storyboard.TargetProperty="(Control.Background)" To="{StaticResource tbGradient}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Pill" Storyboard.TargetProperty="(Control.Background)" To="DarkGray"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
When using <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Pill" Storyboard.TargetProperty="(Control.Background)" To="{StaticResource tbo}"/> I receive the following error: ArgumentException: 'System.Windows.Media.LinearGradientBrush' is not a valid value for property 'To'.

Answer 1

tbGradient is supposed to be a Color:
<Color x:Key="tbGradient">Blue</Color>
You could then animate the background using the Trigger like this:
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Pill" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="{StaticResource tbGradient}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="Pill" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="DarkGray"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
If you want a gradient background, you could set the Background to a LinearGradientBrush and animate a GradientStop, e.g.:
<ToggleButton>
<ToggleButton.Resources>
<Color x:Key="tbGradient">Blue</Color>
</ToggleButton.Resources>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Pill">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop x:Name="gs" Color="DarkGray" Offset="0.5" />
</LinearGradientBrush>
</Border.Background>
<Border x:Name="Circle" Background="#FFFFFF" Width="22" Height="22" CornerRadius="22" Margin="35,5,5,5" HorizontalAlignment="Right"/>
<Border.Clip>
<RectangleGeometry Rect="0,0,65,32" RadiusX="15" RadiusY="32"/>
</Border.Clip>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="gs" Storyboard.TargetProperty="Color" To="{StaticResource tbGradient}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="gs" Storyboard.TargetProperty="Color" To="DarkGray"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>