Confessions of a .NET Developer!

WPF Tutorial : Change opacity using Animation

Here I will be using Simple Animations to give a “fading in and fading out” rectangle by reducing its opacity.

For the example, When I click on a Button, the Rectangle’s opacity will be reduced from 1 to 0 in a timespan of 3 seconds, and vice-versa

Here is the code-behind way of doing it :

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.From = 1;
            da.To = 0;
            da.Duration = new Duration(TimeSpan.FromSeconds(2));
            da.AutoReverse = true;
            da.RepeatBehavior = RepeatBehavior.Forever;
            //da.RepeatBehavior=new RepeatBehavior(3);
            rectangle1.BeginAnimation(OpacityProperty, da);
        }

Here rectangle1 is our rectangle whose opacity will be changed. We are creating a DoubleAnimation(opacity is of type Double). From and To properties are set to decrease opacity from 1 to 0, Duration is set for 2 seconds. AutoReverse is cool as when the animation finishes(ie. from 1 to 0) , it will start to animate the property from 0 to 1! And RepeatBehaviour property is set as Forever so that it will animate forever. The commented line says that the animation will be repeated 3 times.
But I would recommend everyone to do it in XAML to prevent cluttering the code-behind.

Here is how its done in XAML :

        <Button Height="23" Margin="102,95,100,0" Name="button3" VerticalAlignment="Top" Content="Opacity">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="Opacity"
                                             From="1"
                                             To="0"
                                             Duration="0:0:2"
                                             AutoReverse="True"
                                             RepeatBehavior="3x"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>    
        </Button>

This does the same thing as explained above! Go ahead and have fun with it 🙂
Have a nice day!

Advertisements

March 18, 2011 - Posted by | WPF

2 Comments »

  1. Always remember that opacity animations force the rendering of the entire object (and child objects) repeatedly throughout… this obviously has serious performance considerations. Think very carefully about if your interface actually needs it before doing it – just because you can & it’s pretty, doesn’t mean you should.

    However, thanks for the info – much appreciated!

    Comment by Derek Bartram | November 16, 2012 | Reply

  2. 🙂

    Comment by Taron Geghamyan | June 23, 2014 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: