WPF ColorAnimation alternative-CodePudding

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'.

CodePudding user response：

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>