Question

I’m actually surprised that I didn’t find the answer to this simple question here. I want to create a simple button with Image content. When pressed the image should change to another one and after the button is released change back to the original image. What is the easiest way to do this?

EDIT: This is not a toggle button!

Answer 1

You can achieve this using a ControlTemplate to specify the visual structure of your button.

The below XAML shows how to add an image to your button (maintaining the standard chrome border though you can remove this if you don’t want it), plus adding a trigger on the isPressed event to set your other image. You’ll need to include the namespace xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" as well if you want to use the chrome button border.

    <Button>
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">      
            <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true" ThemeColor="NormalColor">
                <Image x:Name="buttonImage" Source="defaultImage"/>
            </Microsoft_Windows_Themes:ButtonChrome>                
            <ControlTemplate.Triggers>      
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Source" TargetName="buttonImage" Value="onPressedImage"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>          
</Button>