Often times, the design for an interface calls for guidelines that cannot be sufficiently controlled with styles in a Silverlight resource dictionary alone. Take for instance, the Windows Phone interface shown below, and imagine that the design guidelines specify that the application/page name (the red arrow is pointing to this element) is supposed to be in all caps. How do you enforce this in the interface in a painless manner?
One way, is to define a style for the inteface element and attach a behavior that forces the string to be in all caps. Attaching behaviors in styles is something that I just discovered was possible, and it's pretty amazing!
I've created a sample project that contains two very simple TextBlock styles and associated behaviors that either force TextBlock text to be upper case or lower case as appropriate. What's great about this is that people consuming the styles no longer have to worry about the case of the text. The style alone controls the text case. This is particularly interesting in situations where TextBlocks are bound to data as the form of the bound data may not be known (e.g. it may not be all upper case, mixed case, etc...). The image below is a screen shot of the sample application
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!
Tim Heuer has a great blog post on the new NotificationWindow class for Silverlight 4 Out-Of-Browser applications. This class allows you to create notifications or 'Toast' for your Out-Of-Browser applications when you need to provided helpful information to the user as they are interacting with the application.
Tim provides great visuals for the notification window in his sample application, and I decided to leverage his sample to explore things myself and created a style that maps nicely with the default Silverlight control styles. My sample project can be found here and the visuals can be seen below...
The SDK controls are now themed in the Windows system color theme style, and the Toolkit controls will be themed very soon! The updated project is available for download here.
For those of you who desire a bit more contrast in the theme, particularly for high contrast color modes, there are a few approaches you can take...
What follows are screen shots of the PDC Ux in default and high contrast white modes and the newly themed SDK controls in various Windows default and high contrast modes...