How to change button style for pressed state?

Question

I have a style for a button.

 <Style x:Key="btnBackStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Image   Source="/Assets/Icons/ic_arrow_back_white_48dp.png"  Margin="8"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          Content=""/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

When a user clicks on it I need the image to be a different one and when he clicks again the image need to be the first one again. As i use this style over several places in the project I don't want to use C# code is it possible to set this via XAMl code ?

I tried the following with trigger

<ControlTemplate.Triggers>

   <Trigger Property="IsPressed" Value="True">
        <Setter Property="Source" Value="/Assets/Icons/ic_arrow_back_blue_48dp.png"  />
   </Trigger>

 </ControlTemplate.Triggers>

I also got the error

The attachable property 'Triggers' was not found in type 'ControlTemplate'

Answer 1

If you need the image to change ONLY whilst pressed (and by pressed, i mean you are literally pressing down on it with a mouse/finger/pen), then this will do:

<ControlTemplate TargetType="Button">
    <Grid>
        <Image x:Name="ImageOne"></Image>
        <Image x:Name="ImageTwo"></Image>
        <ContentPresenter></ContentPresenter>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="False">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

If you need it to -stay- changed once pressed until pressed again, then you will need to replace the Button with a ToggleButton and feed it this template:

<ControlTemplate TargetType="ToggleButton">
    <Grid>
        <Image x:Name="ImageOne"></Image>
        <Image x:Name="ImageTwo"></Image>
        <ContentPresenter></ContentPresenter>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
            <Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

If you want the contents animated as they make this transition, then i suggest using blend to target the Triggers shown here and create a storyboard that executes the animation(s) you're after.