如何让按钮上的图像在鼠标悬停上显示？ WPF

问题描述：

我有一个Button，我通过Window.Resources添加图像。如何让按钮上的图像在鼠标悬停上显示？ WPF

XAML为Window.Resources

<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去的reasson是我可以顺应图像按钮。

编辑2：我需要图像来改变颜色像一个正常的鼠标将做。

尝试添加一个'图像'作为按钮的子项，而不是其''背景'属性。 –

@LeiYang，我原来是这样做的，但是我不能让图像符合按钮，这就是为什么我用'ImageBrush'去的原因。我将如何处理这个问题？ – KyloRen

也许你也应该改变它的模板，因为Button已经构建在鼠标悬停模板中。怎么样[禁用它]（http://stackoverflow.com/questions/1224439/how-do-you-disable-mouseover-effects-on-a-button-in-wpf）？ –

答

OK，我想通了这一点，

，我发现这个有效的，因为它也表明你是在按钮上通过降低不透明度和这种方式只需要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>

然后，在按钮i加入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; 
    }

此切换两个图像之间当鼠标进入或离开，给你一个正常的鼠标给你的效果。

答

试试这个：

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

感谢您的帮助，但是，这不适合我。按钮本身改变颜色，但是当按钮被图像填充时，图像不会。回顾一下我的问题，我想我已经说得很糟糕。抱歉。 – KyloRen

答

您还可以通过按钮的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>

如何让按钮上的图像在鼠标悬停上显示？ WPF

相关推荐