Geek asks and answers

Color transition in WPF

I want to make a color transition Backgroundin a WPF window.

How can i do this?

For instance:

Brush i_color = Brushes.Red; //this is the initial color
Brush f_color = Brushes.Blue; //this is the final color

When I click Buttonbutton1

private void button1_Click(object sender, RoutedEventArgs e)
{
    this.Background = f_color; //here the transition begins. I don't want to be quick. Maybe an interval of 4 seconds.
}
+5
source share
4 answers

In code, this can be done using

private void button1_Click(object sender, RoutedEventArgs e)
{
    ColorAnimation ca = new ColorAnimation(Colors.Red, Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));
    Storyboard.SetTarget(ca, this);
    Storyboard.SetTargetProperty(ca, new PropertyPath("Background.Color"));

    Storyboard stb = new Storyboard();
    stb.Children.Add(ca);
    stb.Begin();
}

As HB noted, this will work too.

private void button1_Click(object sender, RoutedEventArgs e)
{
    ColorAnimation ca = new ColorAnimation(Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));
    this.Background = new SolidColorBrush(Colors.Red);
    this.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca);
}
+13
source

Here is one way:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid x:Name="BackgroundGrid" Background="Red">

        <Button HorizontalAlignment="Left" VerticalAlignment="Top">
            Transition
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation  Storyboard.TargetName="BackgroundGrid" From="Red" To="Blue" Duration="0:0:4" Storyboard.TargetProperty="Background" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>
+5
source

You can use animation (read this), in particular ColorAnimation(see examples) or ColorAnimationUsingKeyframes.

+3
source

Just to complete the LPL and HB answer ..... In my case, I needed to return the control back to the same color that was before the animation.

Here is my code

ColorAnimation animation = new ColorAnimation()
{
    From = Colors.Orange,
    To = ((SolidColorBrush)myControl.Background).Color,//Revert to initial control Color
    Duration = new Duration(TimeSpan.FromSeconds(2))
};

myControl.Background = new SolidColorBrush(Colors.Orange);//Do not use a frozen instance
myControl.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation);
+1
source

More articles:


All Articles