Windows phone7: Create a custom button with differ

In my Windows phone7 Application I just have to create a custom button with different Images for each state of the button(Normal, mouseOver, Pressed, disabled).

If I just wanted to create a custom button for each state with different background color, then I would have followed the following steps and done that.

1. Open the page with Expresion Blend
2. Right click button -> Edit Template -> Edit a copy
3. Select Background (In the "Objects and Timeline" Section)
4. Select each "state" under the "state" tab and start adding backgroung color with the  "Pressed" state from the properties pannel.

* Ultimately Can add this as follows for all the buttons which require this custom style
Style="{StaticResource ButtonStyle1}"

I tried to assign the background Image for each state in a similar way according to above steps.

But problem is, when I add the Image required for one state automatically it apply for all the other states as well. So ultimately it ends up adding the same Image for all the states(lastly added image for any state).

If anyone can explain the steps that have to follow to to create a custom button with different images for each state in expression blend for windows phone7, I would be really grateful. Thanks Inadvance....!!!

When you are adding images, you are basically setting the look of the button template, which is independent of the button states. To achieve what you want, you can create a button template that contains the two images and then use the states to show or hide the appropriate one.

1. Edit Button Template
2. Add images to the Grid level of the template
3. Highlight each image item and Send to Back to make sure they are behind your border/content
4. Select a State (e.g. Normal, Pressed), highlight one of the images and set the Visibility property to Visible.  Highlight the other image and set the Visibility property to Collapsed.
5. Select the other States and do something similar depending on what you what shown.

Your XAML should look something like this. Some stuff is deleted for brevity.

<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">            
        <VisualState x:Name="Normal">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Image x:Name="image1" HorizontalAlignment="Left" Margin="0,0,0,24" Source="/Images/image1.png" Stretch="Fill" Width="48"/>
    <Image x:Name="image2" HorizontalAlignment="Left" Margin="0,0,0,24" Source="/Images/image2.png" Stretch="Fill" Width="48"/>
    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
</Grid>