WPF - How to set background color to image button

Question

I have a button with background image and I want to add a background color to this button when I click on it.

This is how I have set image background to button:

XAML:

<Button x:Name="ScannerButton" DockPanel.Dock="Right" Visibility="Collapsed" Click="ScannerButton_Click" Margin="0,0,5,25" Height="70" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="75">
    <Button.Template>
        <ControlTemplate>
            <Image Source="/Resources/scanner.png"></Image>
        </ControlTemplate>
    </Button.Template>
</Button>

This is how I want it to look like when I click on it:

Answer 1

You could for example make it a ToggleButton and add a trigger that changes the background when the IsChecked property is set to true:

<ToggleButton x:Name="ScannerButton" DockPanel.Dock="Right" Visibility="Collapsed" Click="ScannerButton_Click" Margin="0,0,5,25" Height="70" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="75">
    <ToggleButton.Template>
        <ControlTemplate TargetType="ToggleButton">
            <Grid x:Name="grid">
                <Image Source="/Resources/scanner.png"></Image>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="grid" Property="Background" Value="Green" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>