#7 – Property-Based Animation

Animation is one of the core features of WPF.  Unlike older frameworks, like Windows Forms, you don’t implement animation using timers and rendering the animation frame by frame.  Instead, WPF uses property-based animation, where you animate graphical elements by declaratively specifying how one of its properties should change, over time.

You can implement animation by writing code or by specifying the desired animated effect declaratively, in XAML.  You can also use the tools in Blend 4 to create WPF animations.

As an example, here’s a snippet of XAML that defines a button that will change it’s Height and Width properties, forever expanding and contracting:

<Button Content="Click Me" Height="25" HorizontalAlignment="Left" Margin="25,25,0,0" Name="button1" VerticalAlignment="Top" Width="100" >
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="button1"
                        Storyboard.TargetProperty="Width"
                        From="100" To="105" Duration="0:0:0.3"
                        AutoReverse="True" RepeatBehavior="Forever"/>
                    <DoubleAnimation
                        Storyboard.TargetName="button1"
                        Storyboard.TargetProperty="Height"
                        From="25" To="30" Duration="0:0:0.5"
                        AutoReverse="True" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

More

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

5 Responses to #7 – Property-Based Animation

  1. Grant says:

    Wow, I saw someone develop an animation easter-egg using Visual Studio 2003 and it was PAINFULLY slow. The animation features available in WPF are impressive. I’m currently learning WPF and enjoy reading through these posts. I read most of your WPF entries on your other blog too. Thank you!

  2. Grant says:

    And yes, I did mean VS2003. The code got carried through to 2008 before finally being removed. On the off chance anyone hit the right key combo on the right screen, the simple animation took about 2 minutes to complete. :p

  3. Pingback: #133 – Where a Dependency Property Gets Its Value « 2,000 Things You Should Know About WPF

  4. Pingback: #158 – When to Create a Custom Dependency Property « 2,000 Things You Should Know About WPF

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: