Sunday 13 September 2009

Step-by-step Shiny Button Template with Expression Blend 3 – Part 1

Introduction

In this step-by-step walkthrough I’ll be showing you how to use Expression Blend 3 to create a template for shiny round buttons somewhat like the play button in Windows Media Player or the back and forward buttons in Internet Explorer.

The tutorial is split over three posts:

Part 1 Creating the static template (WPF and Silverlight)

Part 2 Adding transitions using triggers (WPF only)

Part 3 Adding transitions with the Visual State Manager (Silverlight and WPF)

The resulting template can be applied to standard WPF or Silverlight Button controls and styled with different colours to create buttons like these:

example buttons

 

Part 1 Creating the static template (WPF and Silverlight)

In this part we’ll create a static version of the button template which will be the same for both WPF and Silverlight.

Create the project

Start Blend, and select ‘New Project…’.

On the New Project dialog select either ‘Silverlight 3 Application’ or ‘WPF Application’. Give the project a name and click the OK button to create the project.

Add a button

Blend will now present you with a XAML file showing a blank white rectangle.

Double click the button tool :

Button Tool

This will insert a button in the top-left of the layout.

Set the button properties

With the new button selected, use the properties panel to set the following properties:

Set the Height and Width to 40.

Set the Content to 4 (Yes, just the number 4).

Set the font family to Webdings. This turns the number 4 into a ‘play’ triangle.

Set the font size to 22 pt.

brush properties Under the Brushes category, select the Background brush and select the ‘Solid color brush’ editor.

Click in the ‘Hex value’ box and type ‘DarkBlue’. Press enter and this should change into the hex value.

Similarly, set the ‘BorderBrush’ property to ‘Cyan’ and the Foreground brush to ‘White’, making sure to select the ‘Solid color brush’ editor each time.

Your button should now look something like this for WPF:

button with properties wpf

or this for Silverlight:

button with properties sl

The difference at this stage is down to the default button templates used by Silverlight and WPF.

Create the Template

Right click the button and select ‘Edit Template/Create Empty…’.

This brings up the ‘Create ControlTemplate Resource’ dialog.

Name the new template ShinyRoundButtonTemplate and click OK to close the dialog.

Add the background

The ‘Objects and Timeline’ panel switches to show the content of the template being edited – so far that consists of nothing but a Grid.

Set the Name property of the Grid to ‘main_grid’.

We’re going to add an ellipse, so if the ellipse tool isn’t displayed on the toolbar, click and hold the Rectangle or Line tool to display and select Ellipse:

select ellipse

Now double click the Ellipse tool to insert an ellipse that will occupy the whole of the template’s ‘main_grid’.

Set the Name of the ellipse to ‘background’.

Click the ‘Advance property options’ button adjacent to the ellipse’s Fill brush.

advanced property options

On the popup menu, select ‘Template Binding/Background’.

Click the ‘Advance property options’ button adjacent to the ellipse’s Stroke brush. Select ‘Reset’ to set the Stroke property to ‘No brush’.

Add the Outer Glow

Double-click the ellipse tool again to add another ellipse.

Give this ellipse the name ‘outer_glow’.

Use the advance options again to set the Fill brush to ‘Template Binding/BorderBrush’ and set the Stroke property to ‘No brush’.

This ellipse will be used to provide an outer glow for the button.

Under the Appearance section of the Properties panel, locate the Effect property and click the New button. This brings up the Select Object dialog. Select BlurEffect and close the dialog by clicking OK.

Set the Radius of the BlurEffect to 10.

The ‘outer_glow’ ellipse should be behind the background, so that only the blur around the edge is visible. Right click on the ellipse and select ‘Order/Send to Back’.

The outer glow will only be displayed when the mouse is over the button, for the default button state, we want to hide this ellipse.

Set the Opacity property of the ‘outer_glow’ ellipse to 0%.

Add Lightener and Darkener

When the state of the button changes, the template will lighten or darken the background colour. We’ll achieve this by overlaying a couple of partially opaque ellipses. In the button’s default state, these will both be hidden.

Double-click the ellipse tool again to add another ellipse.

Give this ellipse the name ‘lightener’.

Set its Fill brush to White, reset its Stroke brush, and set its Opacity to 0%.

In the same way, add another ellipse named ‘darkener’.

Set its Fill brush to Black, reset its Stroke brush, and set its Opacity to 0%.

Add the Inner Glow

Double-click the ellipse tool again to add another ellipse. Name this one ‘inner_glow’.

Set the ellipse’s Margin to 1,1,1,1.

Use the advance options to set the Fill brush to ‘Template Binding/BorderBrush’ and reset the Stroke brush.

In the Brushes category, select ‘OpacityMask’.

Select ‘Gradient Brush’ and then ‘Radial Gradient’.

radial gradient

Select the right hand gradient stop and set its alpha value to 0%

Click the ‘Show advance properties’ expander below the brush editor.

Set the following properties for the brush:

GradientOrigin = 0.5, 1

Center = 0.5, 1

RadiusX = 0.8

At this point, the button should look like this:

button with inner glow

Add the highlights

Double-click the ellipse tool again to add another ellipse.

Give this ellipse the name ‘lower_highlight’.

Reset the ellipse’s Fill brush to ‘No brush’.

Use the advance options again to set the Stroke brush to ‘Template Binding/BorderBrush’.

Select ‘OpacityMask’ and then select ‘Gradient Brush’.

Drag the left hand gradient stop to around the 55% position and set its alpha value to 0%.

In the Layout category, set the ellipse’s Margin to 1,1,1,1.

Double-click the ellipse tool again to add another ellipse.

Give this ellipse the name ‘upper_highlight’.

Reset the ellipse’s Fill brush to ‘No brush’.

Select the ‘Stroke’ brush and then select ‘Gradient Brush’.

Set the left hand gradient stop to ‘White’.

Drag the right hand gradient stop to around the 45% position and set it to ‘#00000000’ in the Hex value box.

Set the ellipse’s Margin to 1,1,1,1.

The button should now look like this:

with highlights

Add the shine

Double-click the Grid tool to add a new grid. Name this grid ‘shine_grid’.

Set the new grid’s left and right Margin to 2, and top and bottom Margin to 1.

With ‘shine_grid’ selected, expand the advanced properties of the Layout section.

Click the button marked ‘…’ next to the RowDefinitions property. This brings up the ‘RowDefinition Collection Editor’ dialog. Click the ‘Add another item’ button twice to add two rows to the grid. Close the dialog by clicking the OK button.

With ‘shine_grid’ still selected, double click the ellipse tool to add an ellipse as a child of ‘shine_grid’.

Right click the new ellipse and select ‘Path/Convert to Path’.  Name the new path ‘shine’.

This part is a bit fiddly, so it may be helpful to increase the zoom on the artboard. Try about 400%.

Click the ‘Direct Selection’ tool: Direct Selection Tool

Four points on the path are now displayed. Click the bottom point to select it.

Use the up arrow key to nudge this point up until it is in line with the left and right points.

The result should look like this:

adding shine

The Nudge operation will adjust the Margin property, so use the ‘Advance property options’ to reset the path’s Margin.

Set the Stroke property to ‘No Brush’.

Select the Fill brush, select ‘Gradient brush’ and ‘Radial gradient’.

Select the left hand gradient stop and set its hex value to #27FFFFFF.

Add a new gradient stop at around the 42% position and set its hex value to #2DFFFFFF.

Select the right hand gradient stop and set its hex value to #7CFFFFFF.

Click the ‘Show advanced property’ expander below the brush editor.

On the Translate tab of the brush’s RelativeTransform, set the Y value to 0.5.

On the Scale tab, set the Y value to 2.

brush transform

The button should now look like this:

with shine

Add the ContentPresenter

Finally, we want the button to display its content, so we need a ContentPresenter.

Select ‘main_grid’. We want the ContentPresenter to be added as a child of this grid.

On the Assets panel, select Controls and double-click on ContentPresenter.

assets panel

You should now see the triangle we originally added as our button’s content, but its not centred in the button.

Find the Layout category in the Properties panel.

For the HorizontalAlignment property, click the ‘Advanced property options’ and select ‘TemplateBinding/HorizontalContentAlignment’.

In the same way, bind the VerticalAlignment property to ‘TemplateBinding/VerticalContentAlignment’.

Your button should now look like this:

final static button

Wrapping up

That’s it for the static parts of the template.

In future posts, I’ll walkthrough adding states and transitions to bring the button to life.

No comments:

Post a Comment