Transitions, Animations, and Effects with Blend - Part One

  • Article

Recently, I was invited to speak at a Portland Silverlight user group meeting about designing great application experiences using Silverlight and Blend, and in doing so I demonstrated a lot of the cool new capabilities that Blend provides for easily creating transitions, animations, and effects. The meeting was a lot of fun, and I covered a lot, so I thought I would review some of what was discussed at the meeting on my blog. I'm breaking the post into two parts; the first part will address application themes, simple page transitions, Blend shapes, and master-details transitions, and the second part will address path ListBox, built in Blend pixel shaders for use in state changes, and fluid layout.

Before diving into the details, I want to briefly discuss the application I was building for the demo. The application was a blog for me, and it had to have bright and vibrant colors, fun animations and transitions, and an atypical feel. I didn't build out the entire experience during the demo, but I did build some of the 'friends' section and the 'flickering' section, and the general feel for the application is shown below

 

 Before moving further, please…

 

Application Themes

Towards the beginning of my demo, I showed how use of the Silverlight Navigation Application template can speed application development efforts. It provides building blocks for common application types, a navigation framework with a couple of pages, and it can leverage themes available on the Expression Gallery. The subsequent images show how I started building my application by using the template and how I applied a custom theme to speed initial application building steps

 

Create Silverlight Navigation Application Template Based Project Create a new Silverlight project and choose the Silverlight Navigation Application template. After creating the application, the UI should appear as follows when opening MainPage.xaml in the Visual Studio design surface

 

Apply New Project Styles and Update References Replace the default Styles.xaml file with my Styles.xaml, and then update project references by adding the following as shown below (my Styles.xaml file requires several additional references before the project will build correctly)

 

Build Project Once the Styles.xaml file is updated appropriately and the project is built, it should look as follows in the browser

  

 

Page Transitions

Compelling page transitions are used in many applications these days, and Blend makes it easy to create these types of transitions. In my application, I used one of the page transitions that Blend enables 'out of the box' (so to speak). The transition is a Ripple effect and details for creating this transition are found below

 

Add Visual State and Transition Effect to Page Open the xaml page, open the 'States' panel, add a VisualStateGroup, add a state, and name the state ('LoadPage' is what I named my state). Next, add a transition effect by clicking the 'fx' glyph, choose a transition effect (I chose Ripple), click the graph glyph and choose an easing function (I chose circle out), and then choose the time for the transition to take place (I chose 1 second)

 

Add GoToStateAction to Page Open the 'Assets' panel, select the 'Behaviors' item from the tree, and then drag and drop 'GoToStateAction' onto your 'Page' in the 'Objects and Timeline' panel

 

Specify GoToStateAction Properties Open the 'Properties' panel, select 'Loaded' for the EventName, and then choose your newly created state in the StateName combobox

 

 

Shapes

Blend provides several shapes that you can leverage in your applications. The arrow shape was used in my application to highlight the currently selected item in the ListBox, and details for producing this same effect are found below

 

Edit the ListBox ItemContainerStyle Right click the ListBox, select 'Edit Additional Templates', and then select the appropriate template as shown below

 

Choose a Shape Open the 'Assets' panel, select 'Shapes' from the tree, and then choose an appropriate arrow shape

 

Add the Arrow to the UI Double click the arrow to add it to the UI and then set the opacity of the arrow to 0

 

Set Arrow Opacity in Selected State Open the 'States' panel, choose the 'Selected' state, and then set the arrow opacity to 100%

 

 

Master - Details Transitions

Transitions can make the navigation experience for master-details scenarios engaging and fun, and Blend makes it easy to create these experiences. In my application, as items in the ListBox are selected, the details slide in from the right, and this is very easy to create as you will see below

 

Create Details User Control and Add Slide In Visual States Create a user control for details (mine is called CT_OneControl.xaml), add a visual state group, add two states, name the states (mine are named 'Slide1' and 'Slide2'), add a transition effect for the visual state group (mine is slide in from the right), add an easing function (mine is circle out), and a time for the transition to take place (mine is .75 seconds)

 

Add the User Control to the Page with the Master Control Add the newly created details user control to the page with the master control as shown below

 

Add a Bit of Code to the Trigger the Details State Transition Add an eventhandler to the master control to trigger the details state transition (my master control is a ListBox, my event is SelectionChanged, and my event handler is LB_One_SelectionChanged). Now add a bit of code to the event handler that checks for the current state of the details user control, and, then, sets the state to one of the two states that is not the current state (in my case it sets the state to 'Slide1' or 'Slide2' accordingly)

 

The End! Until part two ;)