C# WPF Style: One Button Mouseover - One Button keep Image

Question

I have 2 buttons and one should change the background color on mouseover. The otherone should keep his background Image also when mouseover.

My Problem is that the second one also gets the mouseover effect and the image is overwrited :(

    <Window.Resources>
      <Style x:Key="hover" TargetType="Button">
        <Setter Property="Background" Value="#FF2598CE" />
        <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Background" Value="#FF24779D" />
             </Trigger>
        </Style.Triggers>
      </Style>
    </Window.Resources>

1.Button

<Button Content="0" Name="num0" Foreground="White" Background="#FF2598CE" BorderBrush="#FF24779D" Style="{StaticResource hover}" />

2.Button

<Button Content="" Name="up" BorderBrush="#FF24779D">
    <Button.Background>
       <ImageBrush ImageSource="/Rechner;component/Images/btn_up.jpg" />
    </Button.Background>
</Button>

thx for your help

Answer 1

The second button's default template means it will behave like a Windows button (e.g. not show the background image on mouse over). You may need to provide your own template.

There is a good explanation in another question which might help you get started.

This might also help too.

I would probably do something like this:

<Button Content="" Name="up" Template="{DynamicResource BackgroundButton}" >
        <Button.Background>
            <ImageBrush ImageSource="image.png" />
        </Button.Background>
        <Button.Resources>
            <ControlTemplate x:Key="BackgroundButton" TargetType="Button">
                <Border Name="border" BorderThickness="1" BorderBrush="Black" 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="image.png" Opacity="0.5" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Resources>
    </Button>