WPF How to change background image when mouse is over the button

Question

I have write this code for insert into a Button a background Image with text. So I have this:

<Button Style="{StaticResource TransparentButton}"
        Grid.Column="0"
        Grid.Row="0"
        Command="{Binding Path=MovePreviousCommand}"
        Width="150">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Grid>
                <Image Source="./Resources/Images/bottone_indietro.png" Width="130"/>
                <Label Content="{x:Static res:Strings.GestoreWizardView_Button_MovePrevious}" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Margin="48,10,26,8" Style="{StaticResource LabelStyleButton}"
                        />
            </Grid>

        </StackPanel>
    </Button.Content>
</Button>

It is a Style button

<Style TargetType="Button" x:Key="TransparentButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now I would like to change background Image when mouse is over button.

Can we help me?

Best reguards.

Is it background of the button or the entire window? – ZoomVirus Sep 24 '14 at 14:53 — ZoomVirus, Sep 24 '14 at 14:53
Is the background of button – bircastri Sep 24 '14 at 14:53 — bircastri, Sep 24 '14 at 14:53

score 2 · Accepted Answer · answered Sep 24 '14 at 14:56

This should work providing the image you want it to be is inside a resources folder.

<Style x:Key="TransparentButton" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="0" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="border">
                        <Setter.Value>
                            <ImageBrush ImageSource="Resources/image.jpg" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I try to use you code and it Works but the background image is under the default background Image, I think this method for insert background image on button is wrong "" — bircastri, Sep 24 '14 at 15:32
The problem here is you set the button background while the original image is added as content. It needs to match, either both as background or both as content. — Mike Fuchs, Sep 24 '14 at 15:58
Thanks, I have fixed my problem with your code and I change a background image button like this: — bircastri, Sep 25 '14 at 08:00

score 0 · Answer 2 · edited May 23 '17 at 10:33

To keep it compact:

<Image Width="130" >
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Source" Value="./Resources/Images/bottone_indietro.png"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <Setter Property="Source" Value="./Resources/Images/bottone_indietro_altro.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

I get a harmless design time exception (runs fine), because the button as ancestor is only detected at runtime. If that is an issue, you could try this.

WPF How to change background image when mouse is over the button

2 Answers2