Introduction
This is the third of three posts showing how to use Expression Blend 3 to create a shiny button template for WPF and Silverlight.
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)
In part 1 we created a static template that was applied to the button shown below:
In this part I’ll walkthrough adding different visual states and animated transitions using the Visual State Manager (VSM). I’ll be working with a Silverlight project, but the same steps should apply using the VSM with WPF.
If you haven’t worked through part 1, you can download the Silverlight version of the static template here and use it as the starting point for what follows.
You can download the finished project for part three, or just the XAML file containing the finished template.
Part 3 Adding transitions with the Visual State Manager (Silverlight and WPF)
Controls like Button change their visual appearance to indicate different states. In this post, we’ll give our button template different looks when the button is disabled, when it is pressed and when the mouse is over the button.
If you’re working with a WPF project, check out my previous post regarding the availability of the VSM for WPF.
Get Started
Fire up Blend and open the project from part one.
Right-click on the button, and select ‘Edit Template/Edit Current’. The ‘Objects and Timeline’ panel switches to show the content of the template.
Add the MouseOver State
Select the States panel and select the MouseOver state.
The artboard is now surrounded by a red border to show that it is in recording mode.
In this mode, any properties we change will be recorded as changes to be applied when the selected state is activate.
Use the ‘Objects and Timeline’ panel to select the ellipse named ‘lightener’. On the Properties panel, set the ellipse’s Opacity to 20%.
Select the ellipse named ‘outer_glow’ and set its Opacity to 100%.
The button should now look like this:
Add the MouseOver Transitions
We want the changes between the MouseOver and Normal visual states to be animated, we achieve this using Transitions.
Click the ‘Add Transition’ button next to the Normal state and select 
to add the transition.
Then enter 0.5 for the ‘Transition Duration’.
Click the ‘Add Transition’ button next to the MouseOver state and select 
to add another transition.
Enter 0.5 again for the ‘Transition Duration’.
Add the Pressed State
On the States panel, select the Pressed state.
On the ‘Objects and Timeline’ panel, select the grid named ‘shine_grid’.
Set the grid’s Opacity property to 70%.
Select the ellipse named ‘lower_highlight’ and set its Visibility property to Collapsed.
Select the ellipse named ‘upper_highlight’ and set its Opacity property to 60%.
Select the ellipse named ‘darkener’ and set its Opacity to 50%.
Select the ellipse named ‘outer_glow’ and set its Opacity to 100%.
Your pressed button should now look like this:
Add the Disabled State
On the States panel, select the Disabled state.
On the ‘Objects and Timeline’ panel, select the grid named ‘main_grid’. On the Properties panel set the grid’s Opacity to 50%.
Select the ellipse named ‘inner_glow’ and set its Visibility property to Collapsed. Do the same for the ellipse named ‘upper_highlight’.
Select the ellipse named ‘lower_highlight’. Under the Brushes category of the Properties panel, select the Stroke brush.
The yellow box around the brush editor indicates that this property is bound with a TemplateBinding. Click the ‘Advanced property options’ button next to the Stroke brush and select ‘Convert to Local Value’. The ‘solid color brush’ editor should now be selected. In the ‘Hex value’ box enter ‘White’ and hit return.
Select the ellipse named ‘background’. Click the ‘Advanced property options’ button next to the Fill brush. Select ‘Convert to Local Value’. In the ‘Hex value’ box enter ‘#7F000000’ and hit return.
Select the Stroke brush and the ‘Solid color brush’ editor. Set the colour to black.
Your disabled button should now look like this:
Extract the Template
The template is now complete!
The final step is to move the template into a separate XAML file.
Select the resources tab and click the ‘Create new resource dictionary’ button.
The ‘New Item’ dialog is displayed. Name the new file ‘ShinyRoundButton.xaml’ and click the OK button.
Click the triangle to the left of the UserControl element and ‘ShinyRoundButtonTemplate’ should be displayed.
Click on‘ShinyRoundButtonTemplate’ and drag it onto ‘ShinyRoundButton.xaml’ to move the template into the resource dictionary.
Run the Project
We’re all done!
Hit the F5 button to run the project and test the shiny button in your web browser.
Final Thoughts-Customising the colours
My goal for this series of posts was to create a template that could be applied to a standard button control, defined entirely in XAML without requiring any code behind.
I also wanted to allow simple customisation of the colours, which is achieved using TemplateBindings on the Background and Foreground properties of the Button class.
The template uses alpha blending with white and black ellipses to lighten and darken the background colour. Using alpha blending like this reduces the saturation of colours, moving everything towards shades of black, white and grey. This is noticeable in the MouseOver state; ideally we want a brighter blue, not a whiter blue.
We could set specific colour values for the MouseOver state, but this would mean foregoing the ability to customise the colours using the Foreground and Background properties.
A more satisfactory result might be achieved using a ShaderEffect to lighten the colour, or possibly a Binding with a value converter.
No comments:
Post a Comment