"Programming WPF" translation 8th Chapter 1. Animation basics

Animations include changing some of the visible features of the user interface over time, such as its size, position, or color. You can do it very difficult by creating a timer and modifying the appearance of the user interface in each Timer_tick handle. Of course, this is the typical practice of animations in Win32 or Windows Forms. Fortunately, WPF takes care of these low level details. Animations, like other features in WPF, simply require that we declare what we want to do. The system will take care of its implementation for us.

All of the WPF animation support boils down to changing one or more attributes over a period of time. This means there are a lot of limitations on what the WPF animation system can do for you. For example, the visual tree is all maintained in the same structure. An animation can not add or remove elements for you (although it is possible to set properties for animations to make the elements visible). There is no way to provide a "before" and "after" scenario, or to have WPF add new scenes between the two. This means that there is no automatic way-to do an animation, from one appearance to another, enough to slide an element from the starting position to the ending position.

The key to understanding what animations can or cannot be achieved is to understand the nature of its focused attributes. It just changes what you notice regardless of any attributes. When deciding to animate a UI, ask yourself what you want to see exactly-midway through the animation, and figure out how to set the desired attributes-so you can capture the halfway point. If you apply this to the animation process: converting from a horizontal stackpanel to a vertical one, this obviously has a problem. You cannot set an attribute on the StackPanel so that it displays what is in the middle of the horizontal layout and vertical layout. If you can't do this, then the animation system is not! (If you want to achieve this type of effect, you can use canvas, which allows elements to be placed in any position.) You may need to manually set the position and size of the animation for each element. ）

Before we see any part of the animation in detail, let's examine a simple example. Example 8-1 shows a form marker that contains a separate red ellipse. The height of this ellipse element is set to 100, but he does not declare a width property directly. Instead, the Width property is determined by an animation. The ellipse will change its width over a period of time.

Example 8-1

<Window Text="Simple Animation" Width="320" Height="150"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

<Window.Storyboards>
<SetterTimeline TargetName="myEllipse" Path="(Ellipse.Width)">
<DoubleAnimation From="10" To="300" Duration="0:0:5"
RepeatBehavior="Forever" />
</SetterTimeline>
</Window.Storyboards>

<Ellipse x:Name="myEllipse" Fill="Red" Height="100" />

</Window>