Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the background image of a Button when pressed using VisualStateManager

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>
like image 482
Thomas Joulin Avatar asked Dec 16 '22 18:12

Thomas Joulin


1 Answers

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>
like image 118
Derek Lakin Avatar answered Jun 03 '23 11:06

Derek Lakin