How to create a template for a button type with visual states

Silverlight allows user to create template for button with visual states. For example let’s look at the following screenshot:

It is an image button that contains customized template. XAML will look like the following

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >

...

</Button>

1. To create this using Expression Blend,



2. Drag a button into the page.



3. Select the button, Right Click and Select Edit Control Parts (Template) -> Create Empty.



4. The button is now assigned with an empty template and the XAML will look similar to the code above.



5. In the Edit Template section, you can put in image, text or create animation using visual states.



6. All of the states are remained in Base state, it means no animation. You may want to create a bit of animation during MouseOver state.                                                                       



7. To do that, click on the MouseOver state and it will start recording each change into key frame. For e.g Change color, Scale up and down, etc.

Once you have done, click on the Base state to stop recording.