On Button Press - Change Image Source

Question

Good afternoon,

Im trying to figure out how to change the imagesource of an images when a button is pressed. Then the imagesource should return to its original image whe

Answer 1

The simplest way is to add image to the Button template and change the Image Source with VisualState (Pressed).

Here is an example:

            <Button Content="Test"
                Foreground="{StaticResource PhoneAccentBrush}"
                VerticalAlignment="Top">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background"
                            Value="Transparent" />
                    <Setter Property="BorderBrush"
                            Value="{StaticResource PhoneForegroundBrush}" />
                    <Setter Property="Foreground"
                            Value="{StaticResource PhoneForegroundBrush}" />
                    <Setter Property="BorderThickness"
                            Value="{StaticResource PhoneBorderThickness}" />
                    <Setter Property="FontFamily"
                            Value="{StaticResource PhoneFontFamilySemiBold}" />
                    <Setter Property="FontSize"
                            Value="{StaticResource PhoneFontSizeMedium}" />
                    <Setter Property="Padding"
                            Value="10,5,10,6" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid Background="Transparent">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="MouseOver" />
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source"
                                                                                   Storyboard.TargetName="Img">
                                                        <!-- Path to image that you want to show when button is pressed. -->
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="Assets/..." />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                   Storyboard.TargetName="ContentContainer">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                                   Storyboard.TargetName="ButtonBackground">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{StaticResource TransparentBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                   Storyboard.TargetName="ContentContainer">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{StaticResource PhoneDisabledBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                                   Storyboard.TargetName="ButtonBackground">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{StaticResource PhoneDisabledBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                                   Storyboard.TargetName="ButtonBackground">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="Transparent" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <Border x:Name="ButtonBackground"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Background="{TemplateBinding Background}"
                                            CornerRadius="0"
                                            Margin="{StaticResource PhoneTouchTargetOverhang}">

                                        <StackPanel Orientation="Horizontal">

                                            <!-- Added Image to the Button Template. Specify image that you 
                                            want to show when button is in normal state.  -->
                                            <Image x:Name="Img"
                                                   Source="Assets/..."
                                                   Height="64"
                                                   Width="64" />

                                            <ContentControl x:Name="ContentContainer"
                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                            Content="{TemplateBinding Content}"
                                                            Foreground="{TemplateBinding Foreground}"
                                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            Padding="{TemplateBinding Padding}"
                                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />

                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

Answer 2

i think it's quite tricy here is a button with image for Windows Phone project

click here and download project zip file from this link