在Windows Phone 8中按下时更改按钮的图像

Question

I set image for button with a code like this

<Button x:Name="btToBackgroundPage" Click="toBackground_Click" Width="250" Height="100" BorderThickness="0">
    <Image Source="/Assets/Image/A.png" Stretch="Fill"/>
</Button>

So when i click it, i want to change the Image within button to something like "B.png"

I know i can do it by using pressed event of button and change source of image , but my app have many buttons like that and I just want to know if is there anyway to set that in xaml ?

Answer 1

I don't think you could do that in xaml itself, because somehow you got to have an event handler for your image click event to change the image source of the button .

How to change the background image of button on runtime? would be helpful.

Hope it helps!

Answer 2

This may look little bit complex. But It works fine.

XAML:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="11,0,12,0" Background="Black">

            <Button x:Name="b1" Content="Button" HorizontalAlignment="Left" Margin="208,421,0,0" VerticalAlignment="Top" MouseEnter="MouseEnter" MouseLeave="MouseLeave" Tag="b1">
                <Button.Background>
                    <ImageBrush x:Name="b1bg"  ImageSource="/Assets/WP_20140902_001.jpg" />
                </Button.Background>
                <Button.Template>
                    <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.TargetName="ContentContainer" 
                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedHighlightBackground" 
                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" 
                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}"  
            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" 
            Background="{TemplateBinding Background }" Margin="{StaticResource PhoneTouchTargetOverhang}" >
                                <Border x:Name="PressedHighlightBackground" Background="Transparent">
                                    <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" 
                      Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <Button x:Name="b2" Content="Button" HorizontalAlignment="Left" Margin="71,421,0,0" VerticalAlignment="Top" MouseEnter="MouseEnter" MouseLeave="MouseLeave" Tag="b2">
                <Button.Background>
                    <ImageBrush x:Name="b2bg"  ImageSource="/Assets/WP_20140902_001.jpg"/>
                </Button.Background>
                <Button.Template>
                    <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.TargetName="ContentContainer" 
                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedHighlightBackground" 
                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" 
                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}"  
            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" 
            Background="{TemplateBinding Background }" Margin="{StaticResource PhoneTouchTargetOverhang}" >
                                <Border x:Name="PressedHighlightBackground" Background="Transparent">
                                    <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" 
                      Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>

CS::

private void MouseLeave(object sender, MouseEventArgs e)
{
    Button temp = sender as Button;

    var actionString = temp.Tag;
    var value = this.FindName(actionString + "bg");
    ((ImageBrush)value).ImageSource = new BitmapImage(new Uri("/Assets/WP_20140902_001.jpg", UriKind.Relative));
}

private void MouseEnter(object sender, MouseEventArgs e)
{
    Button temp = sender as Button;
    var actionString = temp.Tag;
    var value= this.FindName(actionString + "bg");
    ((ImageBrush)value).ImageSource = new BitmapImage(new Uri("/Assets/splash_480_720.png", UriKind.Relative));
}