A Step-by-Step Introduction to Styling, Templating, and Animating in Expression Blend

Designer / Developer Workflow Part 2

Author: Felix Corke - Senior Interactive Designer - Conchango
Blog: http://blogs.conchango.com/felixcorke/

Expression Newsletter, subscribe nowto get yours.

Hi! I'm Felix Corke, Senior Interactive Designer at Conchango, I work with Rich Griffinon a variety of live Silverlight and WPF projects for clients such as Nokia, Tesco and Microsoft.

Rich kicked off this project in the last newsletter, it's a Silverlight web app for browsing your delicious tags. It's a cool app, but it looks pretty plain. With the help of Expression Blend, I am going to reskin it using vector shapes and colours in XAML to brand it and give it a much more customised look.

View a finished version of this demo here: www.blackspike.com/permanent/blog/deliciousTute1/demo. Additionally, I put all the screens into a DeepZoom gallery so you can check out all the steps in a row.

What you will need

• A PC running XP or Vista (or a Mac with Parallels or vmWare Fusion)
• .NET Framework 3.5 SP1
• Expression Blend 3
• The Silverlight plugin

Remember to uninstall any previous versions of Blend or Silverlight you have already installed first!

Useful Tips

Here is a very quick guide to the Blend interface, covering the positions of most of the features we will use throughout the tutorial.

Step one - Project Setup

While Rich builds all the gubbins that make this app actually work, I'll start in a separate scratch project in Blend. There is no need to both be working on the same project at the start, as Rich will be doing the initial set up in Visual Studio with his preferred project structure - I'm not entirely sure what he's putting in there but it will be fairly unstable while he gets it working together. Later on we will use Visual Studio TFS to collaborate together simultaneously.

1. Open Blend, and click on New Project on the start screen and choose Silverlight 2 Application, give it a name and a home.
2. Under the Project tab (top right of the screen), you will see a couple of files and folders, ignore the folders for now - we will be working on Page.xaml - which is kind of like the index.htm homepage of your website, and App.xaml which would be your CSS file, if it helps to think about it like that.
3. Open up Page.xaml and select the UserControl under the Objects and Timeline panel on the left, and set the width and height settings in the Properties panel to be typical of a browser, say 960 x 600 pixels.
   
   Double click on the Rectangle icon on the toolbar on the far left (double clicking on an icon puts the rectangle on the page with default attributes, unlike just dragging it on which would add unwanted margins).
4. Set the stroke to No Brush, and set the width and height to Auto, and the horizontal and vertical alignment to Stretch. This removes all the default sizing, and the Rectangle will now fill whatever container it's in - in this case, the Grid called LayoutRoot, which in turn, fills the UserControl (Page.xaml).
5. Rename the Rectangle in the Objects and Timeline panel (think of this as a layers palette just as in Adobe Photoshop or Illustrator - only the order is reversed. There is an arrow button on the bottom left of this palette to switch the layering from bottom to top) to BackgroundRect, and then choose a couple of dark colours in a Radial Gradient for the fill. I chose #FF3C3C3E and #FF84897D. Notice these hex colours - although the same as HTML colours, the first two characters are the Alpha transparency - #00000000 being transparent black to #FF000000 which is fully opaque black. Cool huh - I wish they had that in HTML! Anyway, you can move the gradient to the top of the rectangle so it 'shines down' by choosing the Gradient tool from the toolbar and drag the center vertically upwards. Also, enlarge the gradient by dragging on its corner handles.
6. Now the stage is set up, let's look at how the stage should look. We will create our 'ideal' tag word which we can then drop into Rich's project later. If we look now at Rich's tag cloud, there are a lot of long tags taking up a lot of room, so choose a typical tag of a reasonable length as a template, say 'Web Development'. Add a TextBlock to your page (again by double clicking) the icon in the toolbar. Type the text, center it on the canvas and set the foreground to white, then set the TextBlocks horizontal & vertical alignment to Center.

Step Two - Fonts

A common developer oversight is to use one of the handful of fonts available by default, which can make all apps look the same, and more often than not your client will have their own custom font. For this scenario, we will choose a freeware font for our brand. Great places to look for these are www.dafont.com - an awesome and overwhelming resource. Another great source of quality free fonts is www.smashingmagazine.com  with a regular 'Freeware font of the month feature'. I'm looking for a font with a condensed weight to reduce the overall tag length. Serendipitously, Smashing Magazine links to a great font called 'Delicious' by http://www.josbuivenga.demon.nl/delicious.html which has a range of really well-built styles. Download and install these on your PC (Depending on your operating system, you may need to restart.).

1. In Blend, choose the font 'Delicious Small Caps' from the font menu. You will get a warning saying it is not a built-in font. This means we must use the shiny new Font Manager available in Blend 2 SP1.
2. Check the Embed Font box and expand the palette from the bottom arrow to see the Embed and Subset...Font Manager button, and choose to embed All Glyphs.
3. OK that and whack the font size up to 24 and press F5 to view your project in your default browser - behold your new app!

Step Three - Creating a Button Control

Now we'll make the text tag into a button control.

1. Right click the TextBlock in the layers palette and choose Group Into > Grid, then set the margins to 0 in the Properties palette, and the horizontal & vertical alignment to Center, effectively shrink wrapping it to the TextBlock. Now right click again, and this time choose Group Into > Border. The reason to wrap this twice is that Grids can hold multiple objects whereas borders can only hold one child item. I tend to set grids as the parent of all my controls for flexibility later on. Borders are great because they have individual stroke and corner radius settings - I don't generally apply styles directly to grids.
2. To convert this into a button, select the grid and choose Tools > Make Button from the menu bar at the top, which will pop up a dialogue box. Call the button 'TagButton' and choose to Define in App.xaml. It's good practice to keep your styles and your pages separate so you can find it easier - again, think of App.xaml as your stylesheet. When you OK this, you will see your grid has changed to a Button in the layers palette and the text 'Button' has appeared over it. This is because Blend has inserted a ContentPresenter control into your button for you. A ContentPresenter in your button will handle any content thrown at it, Text, Images, WMVs etc. Let's add some styles to its surroundings.
3. Right click your new button and choose Edit Control Parts (Template) > Edit Template. This will switch you to App.xaml where you can edit the template of your new button. In the layers you can see the ContentPresenter sitting outside the border below the grid. Drag the ContentPresenter into the border layer, and you can see it replaces our styled tag text - remember Border can only have one child item. We will restyle the text soon, Templates are the layout and structure of your control, Styles define its look.
4. Set the ContentPresenter to horizontal & vertical alignment Center. Select the Border and give it padding of 10 left and right, 5 up and down, a margin of 3, and the corner radius to 3.
   
   Also, change the background of the border to a linear gradient, left to right, dark grey to darker grey (I chose #FF5F6061 to #FF383637) and stretched the gradient end to end of the border with the gradient tool. I also gave it a 1px semi-transparent border by setting the BorderBrush to a solid black, then changing the Alpha to 40%.
   
   Save App.xaml and switch back to Page.xaml using the document tabs at the top of the window. You will need to set the margins to 0, and the horizontal & vertical alignment to Center again to reset the Blend-applied defaults. You can press F5 to see the (inactive) button in your app.
   
5. In Blend, select your button and choose Object > Edit Style > Edit Style to jump back to App.xaml, this time to add styling. Reset the min-height and width to 0, then choose the font Delicious Small Caps from the font list (it should now be at the top of the menu now that it has been embedded) and the font size to 24. Set the foreground to white and save it.
   
   You now have a styled up button, now to make it live!
   

Step Four - Animating with the Visual State Manager

Back in Page.xaml, let's edit the template to introduce some animation.

• Right click the button an Edit Control Parts (Template) > Edit Template to get to template editing mode in App.xaml, and select the parent grid in the button layers. With this highlighted, we can double click on the Rectangle tool to place a rectangle in the grid (remember also to check it has no margins again). Remove the white fill and set the stroke to 3 and the stroke fill to a linear gradient. I decided to go for a bright spectrum of colours (#FF0098D6, #FF26217E, #FFE00076, #FFE31324, #FFF8C223, #FFFCE723, #FF009933) to stand out from the dark background, but feel free to choose your own style :) Dragging the nodes close together gives cool sharp gradient changes, and a jaunty angle with the gradient brush looks good.
  
• We will animate this colourful border into view, and expand the button on mouseover. First, let’s move the colourful rectangle to the back of the layer stack. You can drag the layer up the tree or Ctrl+[ like most graphics programs. Set its opacity to 0% so it is not visible by default.
  
• To animate this button on mouseover, we use the new Visual State Manager, the top left palette of states your control can be in. Select MouseOver and you will get a red border around your stage. With your colourful rectangle selected, set the opacity back to 100%, and set the stroke thickness on the border surrounding the ContentPresenter to 3. You can animate a diverse number of values, so experiment to see what effects you can come up with. Select the parent grid of the button, and in the Transform palette in the Properties panel, choose Scale, and set X and Y to 1.1. If you press F5 to test it in your browser, you can see the juddery jump between the states.
  
• To fix this, it's back to the Visual State Manager (VSM). Above the mouseover state is a text field saying 0s. Change this to 0.2s, and click on the Arrow and + symbol on mouseover to Add transition. Choosing * > Mouseover will animate from whatever state it is in to the newly defined state, in this case brightly bordered and enlarged. Adding Mouseover *> will transition between its mouseover state to its normal state, inheriting the transition times from the CommonStates setting of 0.2s. This will give a smooth transition on and off the button. Test it!
  
• As you can see there are a few more states in the VSM to play around with such as Pressed, Focused and Disabled, all pretty obvious from their names what they do. Play around using the same technique as you did with the mouseover for different effects.
• If we now return to Page.xaml, we can copy and paste the button we have created and drag instances around inside the grid. Create about 10 instances of the button on your page, and change thefont size and the content of each button in the Properties panel. This will give you an idea of how the tag browser will look.
  

Step Five - Final Touches and Conclusion

I think the look could be improved by giving the tags a drop shadow – unfortunately the .Net BitmapEffects are not available in Silverlight yet, but there are a number of way around this. We will go through with their advantages and disadvantages in the next newsletter (alpha transparent .pngs, and grids with transparent vector shapes and clipping masks). Select a button and right click > Edit Control Parts (Template) > Edit Template. For now we'll crudely send to the back of the layer stack. Create an Ellipse with a RadialGradient fill from black to black, then set one of the black gradient nodes and set its Alpha value to 0%. Drag the Ellipse by the corners to make it larger than the size of your button so that it overhangs the grid. Then move the Ellipse to the back of the stack in layers palette, or again by using Ctrl+[

Test your app in your browser by pressing F5 again, it should look like this

Styling, templating, layout and VSM skills are the building blocks of every WPF or Silverlight or even Surface application. The next tutorial will be about how we integrate our graphics into Rich's tag browsing app, adding in more complex animations and branding.

You can see a demo here: www.blackspike.com/permanent/blog/deliciousTute1/demo

 This article appeared in the November Expression Newsletter, subscribe now to get yours.