CODEWITHSUNDEEP
c#wpfxamlbuttonbackground-image
bircastri
bircastri

Reputation: 2169

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

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.

Upvotes: 1

Views: 3196

Answers (2)

Mike Fuchs
Mike Fuchs

Reputation: 12319

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.

Upvotes: 0

ZoomVirus
ZoomVirus

Reputation: 615

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>

Upvotes: 2

Related Questions