How to change the background image of a button on click in xaml using styles or triggers?

Question

Hi guys, I have few buttons in my xaml and I am setting their content and background to different images. I want to change the background image of the button when that button is clicked. The content image shouldn't be changed. In short, I want to retain the content image and change the background image of the button when its clicked. I hope I have made my question clear. I'm posting the xaml which I have managed to write so far. Any guidance or sample would be of great help.

  <Style TargetType="{x:Type Button}" x:Key="imgButton">
            <Setter Property="Template">
                <!--<Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter ContentTemplate="{TemplateBinding Content}"/>
                    </ControlTemplate>
                </Setter.Value>-->
                 <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <StackPanel Orientation="Horizontal" >
                            <Image Name="PART_Image" Source="img/button_background.png" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Source" Value="img/button_backgroundSelected.png"  TargetName="PART_Image"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Source" Value="img/button_backgroundSelected.png"  TargetName="PART_Image"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Source" Value="img/button_backgroundSelected.png"  TargetName="PART_Image"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                 </ControlTemplate>
           </Setter.Value>
      </Setter>
 </Style>

<Button Style="{DynamicResource imgButton}" Margin="18,-42,0,0" Width="32" BorderThickness="0" BorderBrush="Transparent" Height="52" VerticalAlignment="Center"  Grid.Column="3" Grid.Row="2" HorizontalContentAlignment="Center" HorizontalAlignment="Left" FontSize="48" FontWeight="ExtraBold" ScrollViewer.CanContentScroll="True" RenderTransformOrigin="1.318,0.356" >
	<Button.Content>
		<Image Source="Img/foreground_image1.png" Margin="0,0,0,22"/>
	</Button.Content>
	<Button.Background>
  		<ImageBrush ImageSource="Img/button_background.png" />
	</Button.Background>
</Button>

But when i do this, The image set on the content doesn't show. Only the background images could be seen.

---

Thanks and Regards, Prashanth MP.

Answer 1

The reason the content doesn't show is because in your re-templated version, you missed out the content presenter (as shown in the commented out bit)

 

It should be as follows:

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Image Name="PART_Image" Source="img/button_background.png" />
        <ContentPresenter ContentTemplate="{TemplateBinding Content}"/>
    </Grid>

    ...etc

 
Regards,
Pete

---

#PEJL

Answer 2

The reason the content doesn't show is because in your re-templated version, you missed out the content presenter (as shown in the commented out bit)

 

It should be as follows:

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Image Name="PART_Image" Source="img/button_background.png" />
        <ContentPresenter ContentTemplate="{TemplateBinding Content}"/>
    </Grid>

    ...etc

 
Regards,
Pete

---

#PEJL

Hi Pete,I tried adding the contentpresenter but the background image is not changing,

---

Thanks and Regards, Prashanth MP.

Answer 3

The reason the content doesn't show is because in your re-templated version, you missed out the content presenter (as shown in the commented out bit)

 

It should be as follows:

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Image Name="PART_Image" Source="img/button_background.png" />
        <ContentPresenter ContentTemplate="{TemplateBinding Content}"/>
    </Grid>

    ...etc

 
Regards,
Pete

---

#PEJL

Hi pete it worked, Can you tell me how I can make the background change when the button is pressed? Now the background changes back when the mouse moves out . I don't want that to happen.

---

Thanks and Regards, Prashanth MP.

Answer 4

The reason the content doesn't show is because in your re-templated version, you missed out the content presenter (as shown in the commented out bit)

 

It should be as follows:

<ControlTemplate TargetType="{x:Type Button}">
    <Grid>
        <Image Name="PART_Image" Source="img/button_background.png" />
        <ContentPresenter ContentTemplate="{TemplateBinding Content}"/>
    </Grid>

    ...etc

 
Regards,
Pete

---

#PEJL

Thanks man, I fixed it, Just added the below code.

 <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="Source" Value="img/button_backgroundSelected.png"  TargetName="PART_Image"/>
                            </Trigger>

Hope this helps someone.. Happy coding.

---

Thanks and Regards, Prashanth MP.