How to create a simple button based on the image with visual states in Silverlight 3?

Question

At my previous company, we created our RIAs using Flex with graphic assets created in Flash. In Flash, you can simply lay out your graphics for different states, i.e. Rollover, disconnect.

Now I'm working on a Silverlight 3 project. They gave me a bunch of images that should serve as graphics for buttons that have rollover, click, and normal state. I can’t understand how easy it is to create buttons with different images for different visual states in Visual Studio 2008 or Expression Blend 3.

Here where I am now. My button is defined like this in XAML:

<Button Style="{StaticResource MyButton}"/> 

MyButton style is as follows:

 <Style x:Key="MyButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Image Source="/Assets/Graphics/mybtn_up.png" Width="54" Height="24"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Image> </ControlTemplate> </Setter.Value> </Setter> </Style> 

I can’t understand how to assign a different template for different states, as well as how to change the image source based on what state I am in. How to do it? Also, if you know any good documentation describing how styles work in Silverlight, that would be great. All the search results I can think of are useless.

Edit:

I found a way to change the image through the storyboards as follows:

 <Style x:Key="MyButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Image Source="/Assets/Graphics/mybtn_up.png" Width="54" Height="24" x:Name="Image"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source"> <ObjectAnimationUsingKeyFrames> <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_over.png"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source"> <ObjectAnimationUsingKeyFrames> <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_active.png"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Image> </ControlTemplate> </Setter.Value> </Setter> </Style> 

However, this seems like a weird way of doing things for me. Is there a more standard way to accomplish this?

Answer 1

I guess what I did is a way to do it, given how no one made a joke. You just have to accept this as an answer.