The background image on the button disappears on the mouse

Question

In my WPF window application, when I click on my button, the background image on the button disappears and the button appears as if it has no image. I want when the mouse is on the button or when the button is pressed, the image should still be displayed on the button, it should not disappear.

Please, help.

thanks

Answer 1

What happens to you is normal. When you create a button, it will use its default properties unless you change / override them.

In this case, when you create your button, you override the Background property, but only for the normal state of your button. If you want the background to change when you hover, you must point to the button to do this.

To this end, I suggest that you redefine the Template template using styles, for example:

 <Window x:Class="ButtonTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ImageBrush x:Key="ButtonImage" ImageSource="/ButtonTest;component/Resources/ok.png"></ImageBrush> <Style TargetType="Button"> <Setter Property="Background" Value="{StaticResource ButtonImage}"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="Blue" /> <Setter Property="Cursor" Value="Hand" /> <!-- If we don't tell the background to change on hover, it will remain the same --> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> </Grid> </Window> 

In this case, this style will be applied to all of your buttons. You can specify which button to apply the style by adding x:Key to your style, and then specify it in your button:

 <Style TargetType="Button" x:Key="ButtonStyled"> ..... <Button Style="{StaticResource ButtonStyled}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> 

Answer 2

I'm a little late to the party, but you all do it too hard.

All you have to do is set the content and background:

 <Button x:Name="YouTubeButton" Width="148" Height="76" BorderBrush="Black" Click="YouTubeButton_Click" Margin="112,20,112,0" MouseEnter="Button_OnMouseEnter" MouseLeave="Button_MouseLeave"> <Button.Content> <Image Source="Images/YouTube.png" /> </Button.Content> <Button.Background> <ImageBrush ImageSource="Images/YouTube.png" /> </Button.Background> </Button> (Optional - makes the mouse behave like a hand clicking a link) #region Button_MouseLeave(object sender, MouseEventArgs e) /// <summary> /// This event is fired when the mouse leaves a button /// </summary> private void Button_MouseLeave(object sender, MouseEventArgs e) { // Change the cursor back to default Cursor = null; } #endregion #region Button_OnMouseEnter(object sender, EventArgs e) /// <summary> /// This event is fired when the mouse hovers over a button /// </summary> public void Button_OnMouseEnter(object sender, EventArgs e) { // Change the cursor to a Hand pointer Cursor = Cursors.Hand; } #endregion