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

您还可以通过按钮Background根据MouseOver设置ControlTemplate。这使事情变得更加清晰，因为它在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一样干净，但我猜测有时候你可能想要使用代码，所以我也会以这种方式展示。< / p>

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

然后在按钮中我添加了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;
   }

当鼠标进入或离开时，它会在两个图像之间切换，从而为您提供普通鼠标所带来的效果。

如何在按钮上保留图像以显示鼠标悬停？ WPF

3 个答案: