Why doesn't Storyboard Effectuate Color Change

Question

Why doesn't Storyboard Effectuate Color Change

RogerSchlueter-7899 1,756

In XAML:

<Window.Resources>
	....
	<Storyboard
		x:Key="sbSuccess">
		<ColorAnimation
			Storyboard.TargetName="btnAdd"
			Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
			Completed="ColorAnimation_Completed"
			From="#ff1493"
			To="Green"
			Duration="0:0:10"
			FillBehavior="Stop" />
	</Storyboard>
</Window.Resources>

<Button
	x:Name="btnAdd"
	Content="Add">
	<Button.Background>
		<SolidColorBrush
			x:Name="AddButtonBackgroundBrush"
			Color="#ff1493" />
	</Button.Background>
</Button>

In code-behind:

Private Sub Add(sender As Object, e As RoutedEventArgs) Handles btnAdd.Click
	....
	sbSuccess.Begin()
End Sub

Private Sub ColorAnimation_Completed(sender As Object, e As EventArgs)
	btnAdd.Background = New SolidColorBrush(CType(ColorConverter.ConvertFromString("#FF1493"), Color))
End Sub

At run-time the button's background never changes. Why?

Viorel 127.1K Reputation points

2026-05-05T04:16:16.3733333+00:00

It seems to work if the cursor is moved out of the button after the click.

2 answers

Your answer

Viorel 127.1K Reputation points

2026-05-05T04:16:16.3733333+00:00

It seems to work if the cursor is moved out of the button after the click.

Answer 1

Hello @RogerSchlueter-7899 ,

Thanks for your question.

The problem is x:Name="AddButtonBackgroundBrush" on your brush. When you give the brush its own name, WPF registers it as an independent object in the namescope. So when the Storyboard tries to reach the color through the Button path (TargetName="btnAdd" → Button.Background → Color), WPF gets confused because the brush thinks it belongs to itself, not the Button anymore, and the animation silently fails.

On top of that, FillBehavior="Stop" + the Completed handler replaces the background with a brand new unnamed brush, so even if the first animation worked, the second click would fail because the original brush is gone.

You can refer to code example below:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Test Storyboard" Height="200" Width="300"
        Loaded="Window_Loaded">

    <Window.Resources>
        <Storyboard x:Key="sbSuccess">
            <ColorAnimation
                Storyboard.TargetName="btnAdd"
                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                From="#ff1493"
                To="Green"
                Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button x:Name="btnAdd"
                Content="Button"
                Width="160" Height="50"
                Click="AddStandardEntry">
            <Button.Background>
                <SolidColorBrush Color="#ff1493"/>
            </Button.Background>
        </Button>
    </Grid>

</Window>

Imports System.Windows.Media.Animation

Class MainWindow

    Private sbSuccess As Storyboard

    Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        sbSuccess = CType(Me.FindResource("sbSuccess"), Storyboard)
    End Sub

    Private Sub AddStandardEntry(sender As Object, e As RoutedEventArgs) Handles btnAdd.Click
        sbSuccess.Begin()
    End Sub

End Class

Please feel free to reach out if you have concerns.

I hope this addresses your question. If this response was helpful, please consider following the guidance to provide feedback.

Nancy Vo (WICLOUD CORPORATION) 7,985 Reputation points Microsoft External Staff Moderator

2026-05-08T02:33:32.24+00:00

Hello @RogerSchlueter-7899 ,
If you're still interested or have any questions, feel free to reach out whenever it works best for you.

Answer 2

Because the animation is targeting the wrong object/property, the storyboard never actually changes the brush color, so there is nothing to “revert” from or override.

Details:

The Storyboard.TargetProperty is
```
   Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
```
but the Background of btnAdd is set to a SolidColorBrush instance declared in XAML and named AddButtonBackgroundBrush:
```
   <Button.Background>
       <SolidColorBrush
           x:Name="AddButtonBackgroundBrush"
           Color="#ff1493" />
   </Button.Background>
```
In WPF, when animating a color used by a brush, the animation should typically target the Color property of that SolidColorBrush, not the Background property of the Button itself.
The documentation pattern is to animate the brush’s Color directly, for example:
```
   <ColorAnimation
       Storyboard.TargetName="AddButtonBackgroundBrush"
       Storyboard.TargetProperty="Color"
       From="#ff1493" To="Green" />
```
This ensures the animation is applied to the actual dependency property (SolidColorBrush.Color) that controls the visible color.
With FillBehavior="Stop", when the animation completes it stops influencing the property, and the base value becomes effective again. If the animation never correctly targeted the brush’s Color, the base value (#FF1493) is what remains visible. The Completed handler then sets btnAdd.Background to a new brush with the same color #FF1493, so visually nothing changes.

To make the color change visible:

Target the brush instead of the button:

  <ColorAnimation
      Storyboard.TargetName="AddButtonBackgroundBrush"
      Storyboard.TargetProperty="Color"
      From="#ff1493"
      To="Green"
      Duration="0:0:10"
      FillBehavior="Stop" />

Or, if changing the color after animation, first remove the animation from the brush, then set the color, as shown in the documentation:
```
  Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
  Button4BackgroundBrush.Color = Colors.Blue;
```
(VB equivalent for the same pattern.)

This way the animation actually affects the brush color, and when it stops, subsequent property changes take effect.

References:

How to: Set a Property After Animating It with a Storyboard
How to: Animate a Property by Using a Storyboard
Storyboarded animations
[ColorAnimation Class

Definition

Namespace:
- Microsoft.UI.Xaml.Media.Animation

Animates the value of a Color property between two target values using linear interpolation over a specified Duration.](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.coloranimation?view=windows-app-sdk-2.0)