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.

Try add an `Image` as child of button, instead of its `Background` property. — Lei Yang, Dec 14 '16 at 02:12
@LeiYang, I did that originally ,but I could not have the image conform to the button, which is why I went with `ImageBrush`. How would I deal with that issue? — KyloRen, Dec 14 '16 at 02:18
Maybe you should also change its template, since Button has built in mouseover template. how about [disable it](http://stackoverflow.com/questions/1224439/how-do-you-disable-mouseover-effects-on-a-button-in-wpf)? — Lei Yang, Dec 14 '16 at 02:49

score 2 · Answer 1 · answered Dec 14 '16 at 04:52

2

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>

answered Dec 14 '16 at 04:52

Amol Bavannavar

2,062
2
15
36

Thanks for the help, but ,that does not work for me. The button itself changes color, but when the button is filled with the image, the image does not. Going back over my question, I think I have worded it badly. Sorry. – KyloRen Dec 14 '16 at 05:04

score 1 · Answer 2 · answered Dec 14 '16 at 05:04

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>

KyloRen · Accepted Answer · 2016-12-18T02:56:53.033

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.

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

3 Answers3