How to change button image on clicking and again o

Question

I want to change image1(let say) on clicking a button, to image2 and again on releasing I want to change it back to image1.

If any body knows please answer me. I am new to windows phone development.

Answer 1

<Button x:Name="MyButton" IsPressed="{Binding MyButtonIsPressed}"></Button>

C#

private bool _myButtonIsPressed;
public bool MyButtonIsPressed {
  get{ return _myButtonIsPressed;}
  set{
    _myButtonIsPressed = value;
    if(value==false){
      MyButton.Content = ImageWhenReleasing;
    }
    else{
      MyButton.Content = ImageWhenClicking;
    }
  }
}

I hope this can help you.

Answer 2

Change the Visibility of the images in the visual states of the button.

The style for the button:

<Style x:Key="ButtonStyle2"
           TargetType="Button">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderBrush"
                Value="{ThemeResource PhoneForegroundBrush}" />
        <Setter Property="Foreground"
                Value="{ThemeResource PhoneForegroundBrush}" />
        <Setter Property="BorderThickness"
                Value="{ThemeResource PhoneBorderThickness}" />
        <Setter Property="FontFamily"
                Value="{ThemeResource PhoneFontFamilyNormal}" />
        <Setter Property="FontWeight"
                Value="{ThemeResource PhoneButtonFontWeight}" />
        <Setter Property="FontSize"
                Value="{ThemeResource TextStyleLargeFontSize}" />
        <Setter Property="Padding"
                Value="{ThemeResource PhoneButtonContentPadding}" />
        <Setter Property="MinHeight"
                Value="{ThemeResource PhoneButtonMinHeight}" />
        <Setter Property="MinWidth"
                Value="{ThemeResource PhoneButtonMinWidth}" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="Grid"
                          Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Pressed"
                                                      To="PointerOver">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="PointerOver"
                                                      To="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="Pressed"
                                                      To="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="Grid" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <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>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                       Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Margin="{ThemeResource PhoneTouchTargetOverhang}">
                            <Grid>

                                <BitmapIcon x:Name="image2"
                                            UriSource="/Assets/Square71x71Logo.scale-240.png"
                                            Foreground="Red"
                                            Height="130" Visibility="Collapsed" />
                                <BitmapIcon x:Name="image1"
                                            UriSource="/Assets/Square71x71Logo.scale-240.png"
                                            Foreground="Yellow"
                                            Height="150" />

                                <ContentPresenter x:Name="ContentPresenter"
                                              AutomationProperties.AccessibilityView="Raw"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}"
                                              Foreground="{TemplateBinding Foreground}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>