digitalMoto.net

Problem:

I have an image in a button.  I’d like the image to change or toggle when the user clicks the button just like I can do with JavaScript.  You remember JavaScript…  Don’t you?  Not jQuery, but real JavaScript.  <sigh>

Anyway.  Here are a couple solutions that I worked out.     

Solution 1:

Use a setter inside a trigger to change the image.

<Setter TargetName="NormalImage" Property="Source" Value="/Images/PlusGrey.png" />

Downside:

What if there isn’t a second image to transition to?

Solution 2:

Set the OpacityMask to washout the existing image.

<Setter TargetName="NormalImage" Property="OpacityMask">
  <Setter.Value>
    <SolidColorBrush Opacity="0.2" Color="Black" >
      </SolidColorBrush  >
    </Setter.Value>
  </Setter>

Downside:

Not a real image swap, so you are limited in what you can do.

That’s it. 

What?  Great more meaningless code fragments!

I know I skipped a lot of code.  OK.  I skipped everything outside the setter which is the very last piece of the puzzle. 

Fear not.  All the important stuff is in the code below. The basic idea is to override the button temple inside the style by way of a control template.  Referenced images are at the very bottom. 

Complete Code:

<Window
    x:Class="ReuseableComponents.Views.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    SizeToContent="WidthAndHeight"
    >
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Button >
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Margin" Value="10" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border BorderThickness="1"    Padding="4,2" BorderBrush="DarkGray" CornerRadius="3" Background="{TemplateBinding Background}"                                                >
                                        <StackPanel Orientation="Horizontal">
                                            <Image Name="NormalImage" Source="/Images/PlusGreen.png"/>
                                            <Label Content="Version 1" />
                                        </StackPanel>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsPressed" Value="True">
                                            <!-- Simple Image Swap -->
                                            <Setter TargetName="NormalImage" Property="Source" Value="/Images/PlusGrey.png" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Button>
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Foreground" Value="Red" />
                        <Setter Property="Margin" Value="10" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border Name="border" BorderThickness="1"    Padding="4,2" BorderBrush="DarkGray" CornerRadius="3" Background="{TemplateBinding Background}"                                                >
                                        <StackPanel Orientation="Horizontal">
                                            <Image Name="NormalImage" Source="/Images/PlusGreen.png"/>
                                            <Label Content="Version 2" />
                                        </StackPanel>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsPressed" Value="True">
                                            <!-- Change the opacity mask -->
                                            <Setter TargetName="NormalImage" Property="OpacityMask">
                                                <Setter.Value>
                                                    <SolidColorBrush Opacity="0.2" Color="Black" >
                                                    </SolidColorBrush>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>
        </StackPanel>
    </StackPanel>
</Window>

Referenced Images: