Change the background image of the button when clicked using VisualStateManager

Question

I have this button:

<Button x:Name="PrevAdIcon" Tag="-1" Visibility="Collapsed" Width="80" Height="80" Click="PrevAd"> <Button.Background> <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="/Images/prev.png"></ImageBrush> </Button.Background> </Button> 

How to change background to /Images/prev-selected.png when user clicked a button? This will give him feedback since this is a WP7 application

what i still (doesn't work):

 <vsm:VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <ImageBrush ImageSource="/Images/prev-selected.png" Stretch="Fill"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> 

Answer 1

See Peter Torr's post “ Why Can't I Change the Background of My Button on a Click Event? ” For an example and explanation of how to do this.

Answer 2

As far as I know, you cannot change the value of the Source property in the Image element using VisualStateManager. However, you can simply add two image elements to the ControlTemplate: one for the Normal state and one for the Pressed state, and also switch the visibility when pressed.

 <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImg"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> 

Answer 3

To add more info to Derek's answer, you should look at the Gambit answer here for full XAML that works