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

Question

In my Windows Phone7 application, I just need to create a custom button with different images for each button state (Normal, mouseOver, Pressed, disabled).

If I just wanted to create a custom button for each state with a different background color, I would follow these steps and do it.

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 a background image for each state in the same way in accordance with the steps above.

But the problem is that when I add the image needed for one state, it automatically applies to all other states. Thus, in the end, he adds the same image for all states (the last added image for any state).

If anyone can explain the steps that should be followed to create a custom button with different images for each state in the blend for windows phone7 windows, I would be very grateful. Thank you in advance....!!!

Answer 1

When you add images, you basically set the appearance of the button template, which is independent of the state of the buttons. To achieve what you want, you can create a button template containing two images, and then use states to show or hide the corresponding 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 (eg 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 things are removed 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>