How to keep image on Button to show on mouse-over? WPF

Question

I have a Button that I am adding an image via Window.Resources .

XAML for the Window.Resources

<Window.Resources> 
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png"  />
</Window.Resources>

And the XAML for the Button ,

<Button Name="Button1" Height="25" Grid.Column="0" 
         Grid.Row="0" Background="{StaticResource MyResource}" Click="Button1_OnClick"  > stuff
</Button>

The problem I am getting is that the image disappears when you mouse-over the button. I tried quite a few things ,but I just can't stop this behavior. I still want the button to act as a normal button would on mouse-over with a color change to show that you are over it, but I have no idea how to go about this?

EDIT: The reasson I went with ImageBrush was so I could conform the image to the button.

EDIT 2: I need the image to change color like a normal mouse over would do.

Answer 1

Try this :

    <Button Name="Button1" Height="25" Grid.Column="0" 
     Grid.Row="0" Click="Button1_OnClick">
        <Border Background="{StaticResource MyResource}">
            <TextBlock Text="stuff"/>
        </Border>
    </Button>

Answer 2

You could also set the Background based on MouseOver via the Button's ControlTemplate . This makes things much cleaner, as it's done all in xaml.

<Window.Resources>
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png"  />
    <ImageBrush x:Key="MyResource2" ImageSource="Pics\Button2.png"  />
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="{StaticResource MyResource}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                            BorderThickness="0" 
                            Background="Transparent">
                          <ContentPresenter HorizontalAlignment="Center" 
                                            VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource MyResource}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Background" Value="{StaticResource MyResource2}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Button Name="Button1" 
        Style="{StaticResource MyButtonStyle}"
        Height="25" 
        Grid.Column="0" 
        Grid.Row="0" 
        Click="Button1_OnClick">stuff</Button>

Answer 3

OK, I figured this out,

I found this effective as it also shows you are over the button by reducing the opacity and this way only requires XAML, so it is much cleaner.

<Style x:Key="OpacityButton" TargetType="Button">
     <Setter Property="OverridesDefaultStyle" Value="True" />
     <Setter Property="Cursor" Value="Hand" />
     <Setter Property="FocusVisualStyle" Value="{x:Null}" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border Name="border" BorderThickness="1" 
                   Padding="2,2,2,2" BorderBrush="#FFEE82EE" 
                   Background="{TemplateBinding Background}" 
                   CornerRadius="5">
                      <ContentPresenter HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
                 </Border>
             <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                       <Setter Property="Opacity" Value="0.5" />
                  </Trigger>
             </ControlTemplate.Triggers>
          </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

This next way uses code behind the XAML and is not a clean as using just XAML ,but I am guessing there may be times when you might want to use code behind, so I am going to show this way as well.

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

Then in the Button I added MouseEnter and MouseLeave events to change the image source,

<Button Name="Button1" Style="{StaticResource TransparentStyle}" Grid.Column="0" Grid.Row="0" Height="50" Width="70" Click="Button1_OnClick" MouseEnter="Button1_OnMouseEnter" MouseLeave="Button1_OnMouseLeave">
     <StackPanel Orientation="Horizontal">
           <Image x:Name="image4" Stretch="UniformToFill" />
     </StackPanel>
</Button>

Then in the code behind,

private void Button1_OnMouseEnter(object sender, MouseEventArgs e)
   {
      string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1211794133.png";
      image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource;
    }

private void Button1_OnMouseLeave(object sender, MouseEventArgs e)
   {
       string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1313321102.jpg";
       image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource;
   }

This switches between two images when the mouse is enters or leaves ,giving you the effect that a normal mouse over gives you.