如何将图像保持在Button上以在鼠标悬停时显示？ WPF

Question

我有一个Button ，我正在通过Window.Resources添加图像。

Window.Resources XAML

<Window.Resources> 
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png"  />
</Window.Resources>

还有Button的XAML，

<Button Name="Button1" Height="25" Grid.Column="0" 
         Grid.Row="0" Background="{StaticResource MyResource}" Click="Button1_OnClick"  > stuff
</Button>

我遇到的问题是，将鼠标悬停在按钮上时图像会消失。 我尝试了很多事情，但是我无法停止这种行为。 我仍然希望该按钮能够像鼠标悬停时的普通按钮一样工作，并进行颜色更改以表明您在它上面，但是我不知道该如何处理？

编辑：我与ImageBrush一起使用的原因是，我可以使图像符合按钮。

编辑2：我需要像普通鼠标一样更改图像的颜色。

Answer 1

尝试这个 ：

    <Button Name="Button1" Height="25" Grid.Column="0" 
     Grid.Row="0" Click="Button1_OnClick">
        <Border Background="{StaticResource MyResource}">
            <TextBlock Text="stuff"/>
        </Border>
    </Button>

Answer 2

您还可以通过Button的ControlTemplate基于MouseOver设置Background 。 这使事情变得更加干净，因为它全部在xaml中完成。

<Window.Resources>
    <ImageBrush x:Key="MyResource" ImageSource="Pics\Button.png"  />
    <ImageBrush x:Key="MyResource2" ImageSource="Pics\Button2.png"  />
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="{StaticResource MyResource}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                            BorderThickness="0" 
                            Background="Transparent">
                          <ContentPresenter HorizontalAlignment="Center" 
                                            VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource MyResource}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Background" Value="{StaticResource MyResource2}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Button Name="Button1" 
        Style="{StaticResource MyButtonStyle}"
        Height="25" 
        Grid.Column="0" 
        Grid.Row="0" 
        Click="Button1_OnClick">stuff</Button>

Answer 3

好，我知道了

我发现此方法很有效，因为它还可以减少不透明性，从而表明您已超出了按钮范围，并且这种方法仅需要XAML，因此它更加干净。

<Style x:Key="OpacityButton" TargetType="Button">
     <Setter Property="OverridesDefaultStyle" Value="True" />
     <Setter Property="Cursor" Value="Hand" />
     <Setter Property="FocusVisualStyle" Value="{x:Null}" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border Name="border" BorderThickness="1" 
                   Padding="2,2,2,2" BorderBrush="#FFEE82EE" 
                   Background="{TemplateBinding Background}" 
                   CornerRadius="5">
                      <ContentPresenter HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
                 </Border>
             <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                       <Setter Property="Opacity" Value="0.5" />
                  </Trigger>
             </ControlTemplate.Triggers>
          </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

这种下一种方式在XAML后面使用代码，而不是像在XAML上那样干净，但是我猜可能有些时候您可能想在后面使用代码，因此我也将展示这种方式。

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
         <Setter.Value>
               <ControlTemplate TargetType="Button">
                   <Border Background="Transparent">
                        <ContentPresenter />
                   </Border>
               </ControlTemplate>
          </Setter.Value>
     </Setter>
</Style>

然后在Button中，我添加了MouseEnter和MouseLeave事件以更改图像源，

<Button Name="Button1" Style="{StaticResource TransparentStyle}" Grid.Column="0" Grid.Row="0" Height="50" Width="70" Click="Button1_OnClick" MouseEnter="Button1_OnMouseEnter" MouseLeave="Button1_OnMouseLeave">
     <StackPanel Orientation="Horizontal">
           <Image x:Name="image4" Stretch="UniformToFill" />
     </StackPanel>
</Button>

然后在后面的代码中

private void Button1_OnMouseEnter(object sender, MouseEventArgs e)
   {
      string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1211794133.png";
      image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource;
    }

private void Button1_OnMouseLeave(object sender, MouseEventArgs e)
   {
       string imageSource = @"c:\users\user\documents\visual studio 2015\Projects\TestAppForXAML\TestAppForXAML\Pics\1313321102.jpg";
       image4.Source = new ImageSourceConverter().ConvertFromString(imageSource) as ImageSource;
   }

当鼠标进入或离开时，这会在两个图像之间切换，使您获得普通鼠标移过的效果。