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

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

2 个答案: