WPF button background mouseenter and leave not working as expected

Question

I have a WPF button like so:

<Page.Resources>
      <ImageBrush x:Key="black_pane_normal" ImageSource="/Images/TroubleShooting/black_pane_clear.png" />
</Page.Resources>

<Button x:Name="ButtonBlackPane" Background="{StaticResource black_pane_normal}" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="157" Height="136" MouseEnter="ButtonBlackPane_MouseEnter" MouseLeave="ButtonBlackPane_MouseLeave" Click="ButtonBlackPane_Click" RenderTransformOrigin="0.533,0.281" Margin="189,199,0,0"/>

My C# code behind is:

    BitmapSource _black_pane_yellow_border = Imaging.CreateBitmapSourceFromHBitmap(InstallerToolkit.Properties.Resources.black_pane_yellow.GetHbitmap(),
                                                                          IntPtr.Zero,
                                                                          Int32Rect.Empty,
                                                                          BitmapSizeOptions.FromEmptyOptions());

    BitmapSource _black_pane_no_border = Imaging.CreateBitmapSourceFromHBitmap(InstallerToolkit.Properties.Resources.black_pane_clear.GetHbitmap(),
                                                                          IntPtr.Zero,
                                                                          Int32Rect.Empty,
                                                                          BitmapSizeOptions.FromEmptyOptions());

    private void ButtonBlackPane_MouseEnter(object sender, MouseEventArgs e)
    {
        ButtonBlackPane.Background = new ImageBrush(_black_pane_yellow_border);
    }

    private void ButtonBlackPane_MouseLeave(object sender, MouseEventArgs e)
    {
        ButtonBlackPane.Background = new ImageBrush(_black_pane_no_border);
    }

My first problem is that my image does not fill the whole button background, how do I get this to fill it?

My second problem is that when the mouse enters the button, the correct background image gets displayed for a moment and then the default gray button image shows and my image goes away, how can I solve this?

score 1 · Answer 1 · edited May 23 '17 at 12:01

First, it's not a good practice to set first the background with a static resource and then use code to set it each time to a new ImageBrush object. Have a look at the FindResource method (http://msdn.microsoft.com/de-de/library/system.windows.frameworkelement.findresource(v=vs.110).aspx) to use your resources in code behind.

Second, you should use Styles and Triggers to modify the appearance of a control depending for example on the MouseOver-State. There is a property called IsMouseOver which you can use for that. Here is an example:

<Page.Resources>
    <Style TargetType="Button" x:Key="myButtonStyle">
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="12" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Foreground" Value="Blue" />
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="FontSize" Value="16" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Page.Resources>

<Button Width="200" Height="100" Style="{StaticResource myButtonStyle}">Hello, World!</Button>

Third, because of the default template of a WPF button, you cannot change directly the background of it when hovering with the mouse. This problem is discussed and solved here: How do you change Background for a Button MouseOver in WPF? If you want to have more Information about styling WPF controls and how to use the default templates, have a look here: http://msdn.microsoft.com/en-us/library/aa970773.aspx

WPF button background mouseenter and leave not working as expected

1 Answers1