Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College



Blend provides an interface that is similar to of Visual Studio in many ways. In Blend, Solution Explorer can be found on the Projects tab, Toolbox on the Assets tab in the upper left corner. Just below that, Objects and Timeline, which corresponds to Document Outline, is located. The Designer and Properties tools are also similar to their counterparts in Visual Studio. In the Properties window, you can set transformations, effects, and brushes in the way as shown in the previous section.

There is one significant difference as compared to what Visual Studio offers, namely how one can edit animations. Blend makes this really easy for designers.

Triggers and Animations

Let us create a sample program, in which a control will be animated, triggered by an event. Place a control on your form (from the Assets tab). Let us assume that we would like to implement the followings: when the mouse pointer enters the form, we make the invisible control appear gradually, wait for 1 second, and then fade it out. Do not forget to set the (default) Opacity of your control to 0% (Figure 22)!

One can monitor an event by using a trigger (Section X). A trigger can be created on the Triggers tab, next to Assets, by clicking the „+ Event” button. One can specify the control’s event that is supposed to be watched by the trigger, as can be seen in Figure 19. Let us choose Window.MouseEnter! Blend – if we have not added an animation to our project yet – asks whether we would like to create a Storyboard (Section Hiba! A hivatkozási forrás nem található.); Blend is going to give it a unique name (e.g. OnMouseEnter1).

XVIII.19. Adding a trigger

XVIII.20. Timeline recording

One can edit a Storyboard by using the Objects and Timeline tool; although, actually, all our „actions” are recorded in the Storyboard (all what we do, for example, in the Designer or in the Properties). This mode is called Timeline recording, which, when switched on, displays a red frame around the Designer (Figure 20). By clicking the small icon in the upper left corner of this frame, one can (temporarily) exit this mode, or enter back later.

The first step of our animation is supposed to fade in a control during a given time period (e.g., half a second). As can be seen in Figure 21, we therefore set the time on the Timeline to half a second. After doing so, all we are doing is being “recorded” for this specific moment. Thus, select the control you want, and then set its Opacity to 100% (Figure 22)! The animation that you have made so far can be played by using the buttons above the Timeline. Note that WPF calculates the opacity values between two moments – actually, between two keyframes – automatically.

XVIII.21. Timeline – Setting time

XVIII.22. Setting opacity

Let us suppose that then we would like to leave the control unchanged for 1 second, and, after that, to fade it out in half a second. For this, it is necessary to insert a keyframe at 1.5 seconds, by click the button shown in Figure 23. Last, we only need to set the Timeline to 2 seconds, and then to decrease the opacity of the control to 0%. The final result can be seen in Figure 24. Note that, beside the keyframe we have inserted, Blend has added two other keyframes automatically as well.

XVIII.23. Timeline – Adding a keyframe

XVIII.24. Timeline – Keyframes added automatically and manually

Execute the program and enjoy the animation whenever you are pulling the mouse pointer above the window![24] Of course, you can further improve the animation with several other movements; e.g., if the animated control is an Image of a frog, you could make the frog “hop” by moving the Image up and down from time to time (i.e., from keyframe to keyframe), or by rotating it, and so on.

[24] We have had some problem with executing WPF projects from Blend. It is not clear whether this problem originates in Blend + SketchFlow Preview for Visual Studio 2012 or in our own system. Nevertheless, the problem can be solved by opening those projects in Visual Studio (as well), and by compiling and executing them there.