Windows phone7: Create a custom button with different background Images for each state

Question

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

Answer 1

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>