如何將圖像保持在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;
   }

當鼠標進入或離開時，這會在兩個圖像之間切換，使您獲得普通鼠標移過的效果。