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

92vpleto  于 2022-12-16  发布在  其他
关注(0)|答案(3)|浏览(315)

在我的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>
lbsnaicq

lbsnaicq1#

发生在你身上的事情是正常的。当你创建一个按钮时,如果你不改变/覆盖它们,它将使用它的默认属性。
在本例中,当您创建按钮时,您将覆盖Background属性,但仅适用于按钮的正常状态。如果您希望在悬停时背景也发生变化,则应告诉按钮这样做。
为此,我建议您使用样式覆盖button Template,如下所示:

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

vbkedwbf2#

我来晚了一点,但你们都太复杂了。
您只需设置“内容”和“背景”:

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

ltqd579y3#

这是我使用的..

<Button
  x:Name="buttonName"
  Style="{DynamicResource myButtonStyle}" 
  HorizontalContentAlignment="Center"
  HorizontalAlignment="Left"
  Width="130"
  VerticalAlignment="Top"
  Height="30"
>
  <ContentControl>
    <Image Source="/MYAPPNAME;component/buttonimage.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"  />
  </ContentControl>
</Button>

与之相关的样式(myButtonStyle)代码为:

<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="GhostWhite"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border
          x:Name="border" 
          CornerRadius="6"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Background="{TemplateBinding Background}"
          SnapsToDevicePixels="true"
        >
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

相关问题