Change the background image of a Button when pressed 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 can I change the background to /Images/prev-selected.png when a user pressed the button ? It'll give him a feedback, since it's a WP7 app

what I have so far (not working) :

<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>

I don't see any reference to the background you wish to switch to (/Images/prev-selected.png) in your code. — Falanwe, Jan 17 '11 at 10:13
@Falanwe I edited. The ImageBrush ImageSource is Images/prev-selected.png — Thomas Joulin, Jan 17 '11 at 10:29

score 5 · Answer 1 · answered Jan 17 '11 at 10:38

As far as I know, you can't change the value of the Source property on the Image element by using the VisualStateManager. However, you can just add two Image elements to the ControlTemplate: one for the Normal state and one for the Pressed state, and toggle the Visibility in the Pressed state.


<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>

score 4 · Accepted Answer · answered Jan 17 '11 at 11:52

4

See Peter Torr's post on "Why can't I change the Background of my Button on a Click event?" for an example and explanation of how to do this.

answered Jan 17 '11 at 11:52

Matt Lacey

65,560
11
91
143

score 3 · Answer 3 · edited May 23 '17 at 10:24

3

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

edited May 23 '17 at 10:24

Community

1
1

answered Dec 11 '12 at 05:02

onmyway133

45,645
31
257
263

Change the background image of a Button when pressed using VisualStateManager

3 Answers3