Fabrikam Catalog Part 3: Special Effects

Download the sample project files for the RC build of Expression Blend

FabrikamCatalogSpecialEffects.zip

Adding visual effects and animation to an interactive product catalog by using Microsoft® Expression Blend™

Overview

The finished project

The finished project

This tutorial shows you how to add visual effects and animation to a Expression Blend project. This tutorial starts from a pre-built project that you can download from FabrikamCatalogControlTemplates.zip. If you have completed the tutorial Fabrikam catalog part 2: Control Templates, you can use the project that you created in that tutorial.

At the completion of this tutorial, your finished project will display—in two adjacent panes—a catalog of the products that are manufactured by the fictitious company Fabrikam. The project also showcases three stylized and appealing visual effects. First, the combination of the gradient background and the reflection effect gives the illusion that the master pane and the details pane are standing on a highly-polished dark surface. Second, a spotlight orbits the document and also appears to be reflected in the polished surface. Third, the transition between products is cued by a fly-in animation in which the details pane rotates and scales up into the document from behind the master pane.

If you want to work through this tutorial while looking at an example of the completed project, you can open a second instance of Expression Blend and view the FabrikamCatalogSpecialEffects sample project which you can download from FabrikamCatalogSpecialEffects.zip.

Features that you will learn about in this tutorial

Make Visual Brush Resource tool
Transformation tools
Animation workspace
Animation timeline
Convert to Motion Path tool
Animation triggers

Task 1: Opening and saving the sample project

Download the sample project from FabrikamCatalogSpecialEffects.zip. If you completed the tutorial Fabrikam catalog part 2: Control templates, you can use the project that you created in that tutorial.
Open the project in Expression Blend.

If you previously had a project open, you might first see a dialog box asking whether you want to save or discard your current project before opening the sample project.
Press F5 to make sure that your project builds and runs before you continue with the steps in this tutorial.

As you work in Expression Blend, your changes take place in memory and not on your hard disk, so be sure to save often.

Task 2: Adding a reflection effect

The following procedure shows you how to use the Make Visual Brush Resource tool to create an element in your application that shoes a mirror image of part of your application.

Under Objects and Timeline in the Interaction panel, double-click LayoutRoot to activate it (if it is not already activated).
Notice that when you activate the element, a yellow bounding box appears around its name.

In Expression Blend, you can select or activate elements. You can select an element without activating it.
Double-clicking an element is called activating the element. The activated element is identified by a yellow bounding box around the element name. To add child elements to an element (which will become the parent element), double-click the parent element under Objects and Timeline, and then add the child element.
Clicking an element once is called selection. The selected element is identified by a highlighted background color. To change the properties of an element, click the element name once under Objects and Timeline.

In the Toolbox, select Rectangle .

On the artboard, draw a Rectangle directly beneath and the same size as MainGrid. Doing so will require you to draw off the bottom of the document. Your rectangle should look something like the following screenshot.

New rectangle drawn on the artboard

To be able to see enough of the artboard to draw your rectangle, you might have to zoom out the artboard view. To zoom out, enter a zoom value in the text box at the bottom of the artboard , click the arrow next to the zoom value, or rotate your mouse wheel while holding down CTRL.

To undo changes in Expression Blend, press CTRL+Z. Alternately, you can click Undo on the Edit menu. The Undo menu item will include a brief statement about the specific step that it will undo. You can undo an unlimited number of steps in Expression Blend, but your undo history is cleared each time that you build your application.

Under Objects and Timeline, select the [Rectangle] element and rename it to Reflection.
Under Objects and Timeline, select the MainGrid element. On the Tools menu, point to Make Brush Resource, and then click Make Visual Brush Resource.
The Create VisualBrush Resource dialog box appears. In the next few steps, you will create a brush that can make any other element look like MainGrid.
In the Resource name (Key) field of the Create VisualBrush Resource dialog box, enter ReflectionBrush.
This sets a name for your visual brush in the resource dictionary for your project so that you can set this brush as the brush for any element. You can view your visual brush in the Resources panel under Window.
In the Define in field, select the This document radio button and make sure that Window: Window is selected in the list.
The Define in field indicates the resource dictionary in which to define your new visual brush. Selecting Window: Window means that this visual brush will be visible to all elements in the window.
Click OK.
You have now created a VisualBrush named ReflectionBrush that can make any element in your project look like MainGrid. You can now apply this brush to your Reflection element. The ReflectionBrush brush has been placed into the resource dictionary, which you can view in the Window node of the Resources panel. (The Resources panel occurs together with the Project panel and the Properties panel on the right side of the artboard.)

With the Reflection element selected under Objects and Timeline, locate and select the Fill property under Brushes in the Properties panel.

If you have trouble locating a particular property, expand the categories in the Properties panel and use the scroll bar on the right side of the panel to scroll up or down to locate the property, or type part of the property name into the Search box near the top of the panel. When you use Search, remember to clear the Search box when you are done; the properties in the Properties panel will remain filtered by whatever is typed into the Search box, until you clear it. To clear the Search box, click the Clear Clear search box button

button.

If a category in the Properties panel is collapsed, expand it by clicking the Expand Category icon on the title bar of the category, or by simply click the title bar of the category.

With the Fill property selected under Brushes in the Properties panel, click the Brush Resources button. Select ReflectionBrush from the list of brush resources.
The image of the MainGrid element is projected onto the Reflection Rectangle.
Recall that the Fill property is always set to a Brush of some kind. In previous Fabrikam tutorials, you have set the Fill of a Rectangle to a Solid Color Brush or Linear Gradient Brush. ReflectionBrush is a different type of brush—a VisualBrush—that dynamically mimics the appearance of a Visual. Think of it as pointing a Web camera at MainGrid and showing the live feed in Reflection. In Windows Presentation Foundation (WPF), any visible element is a Visual, and in this case the Visual is MainGrid.

With the Reflection element selected under Objects and Timeline, look under Transform in the Properties panel. Click the arrow at the bottom to display the advanced LayoutTransform properties. Select the Flip tab Flip transform tab

and then click the Flip Y button.
This creates a mirror effect below MainGrid. Notice that the corner radius adorners Corner radius cursor

of the Reflection element are now in the lower-left corner. (Adorners are visible when the Selection tool is selected.)

LayoutTransform properties are applied to the object when layout actions are performed when the object first appears in the application.
RenderTransform properties are applied to the object during rendering, which can occur at any time, and multiple times, after layout. A render transform does not regenerate layout size or render size information. Render transforms are typically used for animation.

With the Reflection element selected under Objects and Timeline, set the Stroke property under Brushes in the Properties panel to No Brush.
With the Reflection element still selected, set the OpacityMask property under Brushes in the Properties panel to Gradient Brush. Select Brush Transform from the Toolbox and drag the arrow on the artboard while holding the SHIFT key to rotate the brush so that the arrow points down. Change both gradient stops to White and move the right-hand stop to the middle of the gradient bar. Set the Alpha property of the left-hand stop to 50 and set the alpha of the center stop to 0. This will cause the element to be painted semi-transparently at the beginning of the gradient and fully transparently from the center to the end.
On the Project menu click Test Project (F5). When the application starts, test that your reflection effect resembles the one illustrated in the tutorial’s overview and that it tracks changes to the product selection.
You might notice that when you resize the application window, your reflection does not resize properly. To fix the resizing problem, you can divide the LayoutRoot grid into three rows and change the Layout properties.
Under Objects and Timeline, activate the LayoutRoot element.
In the Toolbox, click Selection . On the artboard, move the mouse pointer over the thick blue ruler area at the left side of LayoutRoot. An orange row ruler will follow your mouse pointer and indicate where a new row divider would be placed should you click.
Click to create a new row divider at the top of MainGrid so that MainGrid will be in the second row.
Click to create another new row divider between MainGrid and Reflection, at the bottom of MainGrid.
Blue row dividers appear inside LayoutRoot.
With MainGrid selected under Objects and Timeline, set the following properties under Layout in the Properties panel:
- Set Width and Height to Auto if they are not already set to Auto.
- Set the Row and RowSpan properties to 1 if they are not already set to 1.
- Set the HorizontalAlignment and VerticalAlignment properties to Stretch if they are not already set to Stretch.
- Set the Top and Bottom Margin properties to 0 if they are not already set to 0.
With Reflection selected under Objects and Timeline, set the same property values as above with two exception - set the Row property to 2 and set the Top Margin property to 8.
Reflection will now resize with the application window and keep its proportions. However, the reflection of MainGrid will be squished because the height of Reflection is smaller than MainGrid.
With Reflection selected under Objects and Timeline, click the name of the Height property under Layout in the Properties panel, and select Data Binding.
The Create Data Binding dialog appears.
Apart from binding to a data source like an XML file or a database, you can also bind to values of properties of elements in your project.
In the Create Data Binding dialog, select the Element Property tab.
In the Scene Elements field, expand LayoutRoot and select MainGrid.
In the Properties field, select ActualHeight, and then click Finish.
The height of the Reflection rectangle will now stay the same as the height of MainGrid.
On the Project menu click Test Project (F5) to test your application again.

Task 3: Adding a faux spotlight effect

The following procedure shows you how to create the effect of a spotlight which appears reflected in a polished surface. The spotlight uses animation to orbit the catalog.

Under Objects and Timeline in the Interaction panel, double-click LayoutRoot to activate it.
In the Toolbox, select Ellipse .
On the artboard, draw a narrow Ellipse, at the base of MainGrid and nearly as wide as the scene. This ellipse will play the part of your spotlight.
Under Objects and Timeline, select [Ellipse] and rename it Spotlight.
With Spotlight selected under Objects and Timeline, look under Brushes in the Properties panel. Set the Stroke and OpacityMask properties to No Brush . To adjust Spotlight’s opacity, set the Fill property to Gradient Brush . The Gradient Brush is Linear by default. Change to Radial by selecting the Radial Gradient icon at the bottom left under Brushes. Make both of the gradient stops white, and set the Alpha of the left-hand stop to 100 and the right-hand stop to 0.
The next Ellipse you will draw represents the path you wish your orbiting spotlight to follow. It will be large, so zoom out the artboard until the artboard is at about 50%.
With LayoutRoot activated under Objects and Timeline, draw another Ellipse, again at the base of MainGrid, but this time a little wider than the artboard. You can adjust the size and location of SpotlightPath by using the blue adorners on the artboard.
Under Objects and Timeline, select [Ellipse] and rename it SpotlightPath.
Select SpotlightPath under Objects and Timeline. From the Object menu, click Path, and then click Convert to Motion Path. The Choose Target for Motion Path dialog box is displayed. Select Spotlight and click OK.

There is no more need for SpotlightPath so you can delete it under Objects and Timeline (select it and then press DELETE).

The Convert to Motion Path command does the following things:

It copies the shape of SpotlightPath, which is why you can subsequently delete it.
It creates a new timeline (Timeline1) in which Spotlight moves along a path defined by the shape of SpotlightPath. In Expression Blend, a timeline is richer than the static snapshots used to plan movies and animations. Here, the timeline is the definition of the animation itself.
It sets up a trigger to cue the animation timeline, and the event on the trigger is the Window.Loaded event. You can view the specifics of the trigger by selecting Window.Loaded under Triggers in the Interaction panel which displays the specifics in the bottom of Triggers .
It moves Spotlight to take up position at the beginning of its storyboard’s path.

Under Objects and Timeline, Timeline1 is selected. Click Play to preview the storyboard.
The default length of the animation is 2 seconds.
Press F7 to switch to the Animation Workspace.
This moves the Interaction panel below the artboard.
With Timeline1 selected at the top of Objects and Timeline in the Interaction panel, expand the element tree beneath Spotlight right down to MotionPath. Drag the blue bar at the right end of MotionPath‘s timeline out to the 10 second mark. Click Play again to view the change to the length of the animation.

Close-up of the end point of the motion path on the timeline (at 10 second mark)
With Timeline1 still selected, right-click MotionPath and click Edit Repeat Count. The Edit Repeat dialog box is displayed. Set Repeat to Forever and click OK.
Now the spotlight animation will loop forever when you run your application (not when you click Play in Expression Blend).
So that the spotlight disappears behind the panes at the appropriate part of its orbit, right-click Spotlight under Objects and Timeline, click Order, and then click Send to Back.
Test the project (F5) to see your changes.
If you want to change the path of your spotlight, you can create a new Ellipse and use the Convert to Motion Path tool again. The previous animation will be deleted and replaced with the new one generated by Convert to Motion Path.

Task 4: Adding an animation effect

The following procedure shows you how to use animation to make the DetailsPane fly into view from behind MasterPane. This animation timeline will be triggered when the application loads and when an item is selected in MasterList.

Under Objects and Timeline in the Interaction panel, click Create New Timeline . The Name Timeline dialog box is displayed. In Name type FlyIn and click OK.
The new FlyIn timeline is selected in the dropdown box under Objects and Timeline.
So that the DetailsPane begins its fly-in from behind the MasterPane, right-click DetailsPane under Objects and Timeline, click Order, and then click Send Backward.
The DetailsPane node moves below the MasterPane node, indicating that it is lower in Z-order (the order that determines which elements appear in front of other elements).
To begin recording your animation sequence, select DetailsPane under Objects and Timeline, move the timeline playhead to second 0, and then click Record Keyframe .
A keyframe icon appears on the timeline at second 0.
Drag the key frame you just recorded to second 0.5 on the timeline.
This is the end position of DetailsPane in your animation sequence.
With the timeline play head still at second 0, hold down SHIFT and ALT while dragging a corner of DetailsPane to make it smaller.
With this first change, a new keyframe was created at second 0. Changes are automatically recorded in keyframes set at the location of the play head. Expand DetailsPane and RenderTransform to see the Translation element where the new keyframe was set.

When resizing an element on the artboard, SHIFT constrains proportions and ALT maintains the original center point. Release the mouse button before releasing the SHIFT and ALT keys.

In Expression Blend, animation is accomplished by recording changes in properties.
Hold down SHIFT and drag DetailsPane behind the center of MasterGrid.
You might notice that your reflection displays a stretched view of MasterPane. You will fix this in a later step.

When moving an element on the artboard, SHIFT constrains the movement to horizontal or vertical depending on the initial direction. Release the mouse button before releasing SHIFT.
Under Transform in the Properties panel, select the Rotation tab under RenderTransform, and set the Angle value to -90 to rotate the pane counterclockwise 90 degrees.
Click Play to preview the timeline.
You should see the details pane growing in size as it flies into view from behind the master pane.
The final job in building this animation is to cause the FlyIn timeline to be triggered by a change to MasterList’s selected item. The animation is already triggered when the application loads because that trigger gets created for the Window.Loaded event when you create the timeline. Triggering the animation in any other situation needs to be configured by you.
With the FlyIn timeline still selected under Objects and Timeline, activate MasterList.
Under Triggers in the Interaction panel, click + Event.
An new Window.Loaded event trigger is added to the list.
Under Triggers in the Interaction panel, select the new event trigger. In the bottom half of Triggers in the Interaction panel, you can edit the trigger specification by clicking the arrows next to the dropdown boxes. Change the trigger so that it states When MasterList.SelectionChanged is raised.
Click the plus sign next to the trigger specification to add a new action. Change the new action to FlyIn.Begin.
Now, the FlyIn animation will be triggered when an item is selected in the MasterList.

To fix the reflection problem, select MainGrid under Objects and Timeline, and then under Brushes in the Properties panel, change the Background property from No Brush to Solid Brush with an Alpha of 0.

When No Brush is used as the Background for an element, Windows Presentation Foundation (WPF) measures the element based on how much of the element's contents is visible during its animation phase. For example, whatever the measured size of MainGrid (with or without DetailsPane showing), WPF will stretch what it finds to fit into the Reflection rectangle. As long as an element's Background property is something other than No Brush , the element will always take up the same real estate as its bounding box.

One final tweak is to take into account the possibility that a corner of the DetailsPane might extend beyond the bottom of MainGrid while it is rotating. To prevent this from causing the layout of your elements to shift during the animation, select MainGrid under Objects and Timeline, and in the advanced section under Appearance in the Properties panel, set the ClipToBounds property to True (check the box).
This prevents any part of MainGrid to appear outside of its bounding box.
Now you’re ready to go ahead and test (F5) the finished application and experience all of your functionality and sparkly visuals in full effect.