按钮上的背景图像在鼠标上消失

Question

在我的WPF窗口应用程序中,当我将鼠标移到按钮上时,按钮上的背景图像消失,按钮显示为好像没有任何图像.我想要的是,当鼠标在按钮上时,或者单击按钮时,图像仍然应该显示在按钮上,它不应该消失.

这是我的代码:

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

Answer 1

发生什么事是正常的.创建按钮时,如果不更改/覆盖它们,它将使用其默认属性.

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

为此,我建议你使用样式覆盖按钮模板,如下所示:

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

在这种情况下,此样式将应用于所有按钮.您可以通过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" />

Answer 2

我参加派对有点晚了,但你们这一切都太复杂了.

您所要做的就是设置内容和背景:

<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