Question

我的wpf按钮如下

<Button x:Name="helpButton" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="552,201,95,726" Width="32" Height="32" BorderThickness="0" Click="helpButton_Click">
  <Button.Background>
    <ImageBrush ImageSource="/Images/help-icon1.png"></ImageBrush>  
  </Button.Background>
</Button>

在窗口加载时，我能够完美地看到图像，但是当我将鼠标悬停在鼠标上时，我无法看到图像

有人可以帮助我

Answer 1

更明智的方法是使用<Button.Template>代替<Button.Background>

<Button x:Name="helpButton">
    <Button.Template>
        <ControlTemplate>
            <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image Source="/Images/help-icon1.png" Width="32" Height="32"/>
            </Border>
        </ControlTemplate>
     </Button.Template>
</Button>

另外设置按钮边框的样式，例如使用Trigger和Setter

的悬停效果

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="buttonBorder" Property="BorderBrush" Value="Green"></Setter>
        <Setter TargetName="buttonBorder" Property="BorderThickness" Value="1" />
     </Trigger>
</ControlTemplate.Triggers>

您将添加如下：

<Button x:Name="helpButton" Height="35">
    <Button.Template>
        <ControlTemplate>
            <Border Name="buttonBorder"  HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image Source="/Images/help-icon1.png" Width="32" Height="32"/>
             </Border>
             <ControlTemplate.Triggers>
                 <Trigger Property="IsMouseOver" Value="True">
                     <Setter TargetName="buttonBorder" Property="BorderBrush" Value="Green"/>
                     <Setter TargetName="buttonBorder" Property="BorderThickness" Value="1"/>
                 </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer 2

为什么按钮悬停时无法看到图像真的很奇怪。默认样式始终显示Content（在您的情况下为图像）。所以我建议你只使用按钮的默认样式：

<Button Style="{ x:Null}">
   <Image Source="/images/images.jpg"></Image>
</Button>

或者只是在鼠标悬停在按钮上时覆盖模板的行为：

<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <!--Do not do any actions here to see your image-->      
    </Trigger>
  </Style.Triggers>
</Style>

在这种情况下，鼠标悬停在按钮上时没有任何操作。

WPF问题与按钮背景图像

2 个答案: