How to change button style for pressed state? - xaml

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.

Answer 2

The idea is to have two images one behind other, so when the button is pressed just change the visibility of the image to collaped when the button ispressed.
You can do that by making changes in the visual state of the button.
From your scenario it appears that you are looking for checkbox. That displays different images for the checked states.