WPF按钮背景色顺序渐变动画实现问题求助

The issue occurs because multiple ColorAnimation elements targeting the same property run in parallel by default, resulting in mixed color transitions. To achieve the sequential gray → lime → red cycle (and proper cleanup when stopping), follow these adjustments:

Corrected XAML Code #

<UserControl.Resources>
    <Style x:Key="BlinkingStyle" TargetType="Button">
        <!-- Set initial background color to gray -->
        <Setter Property="Background" Value="Gray" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding AnimationMode}" Value="BlinkingOn">
                <DataTrigger.EnterActions>
                    <!-- Name the storyboard to reference it in ExitActions -->
                    <BeginStoryboard x:Name="BlinkingStoryboard">
                        <Storyboard RepeatBehavior="Forever">
                            <!-- Transition from Gray to Lime over 5 seconds -->
                            <ColorAnimation 
                                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                From="Gray" To="Lime"
                                Duration="0:0:5" />
                            <!-- Transition from Lime to Red, starts after first animation ends -->
                            <ColorAnimation 
                                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                From="Lime" To="Red"
                                Duration="0:0:5"
                                BeginTime="0:0:5" />
                            <!-- Transition back from Red to Gray, starts after second animation ends -->
                            <ColorAnimation 
                                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                From="Red" To="Gray"
                                Duration="0:0:5"
                                BeginTime="0:0:10" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <!-- Stop the running blinking animation first -->
                    <StopStoryboard BeginStoryboardName="BlinkingStoryboard" />
                    <!-- Transition to LightGray over 2 seconds and hold the final color -->
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                To="LightGray"
                                Duration="0:0:2"
                                FillBehavior="HoldEnd" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid>
    <Border BorderBrush="Black" BorderThickness="1">
        <Button Command="{Binding ItemSelectedCommand}" CommandParameter="{Binding}" Style="{StaticResource BlinkingStyle}" />
    </Border>
</Grid>

Key Changes Explained #

• Sequential Animation: Used BeginTime on subsequent ColorAnimation elements to delay their start until the previous animation completes, eliminating parallel color mixing.
• Controlled Repetition: Set RepeatBehavior="Forever" on the entire Storyboard instead of individual animations to loop the full sequence consistently.
• Initial State: Added a Setter to set the button's default background to gray, ensuring the animation starts from the correct color.
• Clean Exit: Added StopStoryboard to halt the blinking animation before transitioning to LightGray, and used FillBehavior="HoldEnd" to keep the final LightGray color after the exit animation finishes.

Alternative: Reverse Cycle (Gray → Lime → Red → Lime → Gray...) #

If you want the animation to reverse direction after reaching red instead of jumping back to gray, use this simplified Storyboard in the EnterActions:

<Storyboard AutoReverse="True" RepeatBehavior="Forever">
    <ColorAnimation 
        Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
        From="Gray" To="Lime"
        Duration="0:0:5" />
    <ColorAnimation 
        Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
        From="Lime" To="Red"
        Duration="0:0:5"
        BeginTime="0:0:5" />
</Storyboard>

内容的提问来源于stack exchange，提问作者Winellen Fam