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…
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
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
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%
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 ;)
The Windows system color theme for Silverlight now includes styles for all toolkit controls except charts and graphs (these will be themed shortly). When theming the remaining controls, we decided to make a few changes to all controls...
The project also contains a Styles.xaml file that you can use to theme your Silverlight Navigation Application projects by simply swapping Styles.xaml files. This new theme is a high contrast derivation of one of the three new themes that we plan to make available to the community this month. More details can be found below and the updated project is available for download here.
What follows are screen shots of the controls in standard and high contrast modes...
As mentioned previously, the theme now uses texthinting set to "Animated", and the controls look great in standard mode, but they are a bit muddied in high contrast modes with dark background colors, as you can see below (the first image shows texthinting set to "Animated" and the second image shows texthinting set to "Fixed"). If your scenarios require crisp text, we recommend you do a search and replace on "Animated" and replace it with "Fixed"...
Let me know what you think of the theme, and feel free to ping me with questions!