wpf 鼠标悬停时按钮上的背景图像消失

Background image on a button disappears on mouse over

提问by WAQ

In my WPF window application, when I take the mouse over my button, the background image on the button disappears and the button appears as if it does not have any image. What I want is, when the mouse is on the button, or when the button is clicked, the image still should be shown on the button, it shouldn't disappear.

在我的 WPF 窗口应用程序中，当我将鼠标悬停在按钮上时，按钮上的背景图像消失，按钮看起来好像没有任何图像。我想要的是，当鼠标在按钮上时，或者当按钮被点击时，图像仍然应该显示在按钮上，它不应该消失。

Here is my code:

这是我的代码：

 <Button Margin="465, 3, 0, 0" Width="25" Height="20" IsEnabled="True" IsDefault="False" IsCancel="False" BorderBrush="{x:Null}" ToolTip="Reload pads list"> <Button.Background> <ImageBrush ImageSource="/FieldPlanner;component/Images/reload.gif" /> </Button.Background> </Button>

回答by Sonhja

What is happening to you is normal. When you create a button, it will use its default properties in case you don't change/override them.

发生在你身上的事情是正常的。当您创建按钮时，它将使用其默认属性，以防您不更改/覆盖它们。

In this case, when you create your button, you are overriding Backgroundproperty, but only for normal state of your button. If you want background to change also when hovering, you should tell the button to do so.

在这种情况下，当您创建按钮时，您将覆盖Background属性，但仅适用于按钮的正常状态。如果您希望在悬停时也改变背景，您应该告诉按钮这样做。

For this purpose, I suggest you to override the button Templateusing styles, like this:

为此，我建议您使用样式覆盖按钮模板，如下所示：

<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 for all your buttons. You can specify which button to apply style by adding an x:Keyto your style and then specify it in your button:

在这种情况下，此样式将应用于您的所有按钮。您可以通过x:Key在样式中添加 来指定要应用样式的按钮，然后在按钮中指定它：

<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" />

回答by WAQ

I am a little late to the party, but you are all doing this too complicated.

我参加聚会有点晚了，但你们都这样做太复杂了。

All you have to do is set the Content and the 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