WPF 按钮鼠标悬停图像 [英] WPF Button Mouseover Image

问题描述

我正在学习 C# 和 XAML 来构建 Windows 应用程序.我想创建一个以图像为背景的按钮.但是当鼠标悬停在按钮上时，按钮的背景应该变成另一个突出显示"的图像.我试图将背景图像添加到 Resources.resx 中.我不得不使用 xaml 样式创建一个自定义按钮，以摆脱 wpf 按钮的默认突出显示效果.

I am learning C# and XAML to build windows applications. I wanted to create a button that has an image as its background. But when hovering over the button, the background of the button should change to another "highlighted" image. I attempted to add the background images into Resources.resx. I had to create a custom button using xaml styles to get rid of the default highlight effect of a wpf button.

我根据在 SO 上找到的一些代码创建了一个自定义按钮.代码是(在一个新的资源字典中):

I created a custom button from some code I found on SO. The code is (in a new resource dictionary):

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我要放什么才能让背景变成另一个图像，无论是在我的 resources.resx 中还是其他位置?(不确定将图像放在哪里才能访问它).我搜索了 SO，但我找到的解决方案并不是我正在处理的.如果这是一个重复的问题，我深表歉意.

What do I put so that the background changes to another image, whether it is in my resources.resx or another location? (Not sure where to put the image to access it). I searched SO but the solutions I found were not exactly what I am dealing with. If this is a duplicate question, I apologize.

总结:

如何在 XAML 中更改鼠标悬停触发器上按钮的背景图像?我把图片放在哪里，以便在触发代码中访问它?

How do I change the background image of a button on a mouse over trigger in XAML? Where do I put the image so that it can be accessed in the trigger code?

更新这就是我作为触发器操作的内容，但图像没有更新.我确保将图像构建操作设置为资源并将其放在名为 Resources 的文件夹中.

Update This is what I have put as the trigger action, but the image does not update. I made sure to set the image build action to resource and put it in a folder called Resources.

代码是:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

文件结构是

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

解决方案

以下是允许在按钮上更改鼠标悬停图像的完整代码:

The following is the complete code to allow for a mouseover image change on the button:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

对于实际图像，我将其放在根目录中的 Resources 文件夹中.使用 Visual Studio 中的资源工具将图像导入其中后，我将图像构建设置更新为属性"窗格中的 Resource.

For the actual image, I placed it in the Resources folder that is in the root directory. After importing the images in there using the resources tool in visual studio, I updated the image build settings to Resource in the Properties pane.

感谢 dbaseman 的解决方案

推荐答案

我认为将图像添加到项目中的 /Images 文件夹更容易.那么这是你使用的语法:

I think it's easier to just add the image to an /Images folder in the project. Then this is the syntax you use:

<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">
               <Setter.Value>
                   <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
               </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

(假设您的图像 MyImage.jpg 位于项目根目录的 Images 文件夹中.)

(Assuming your image MyImage.jpg is in the Images folder in the root of your project.)

只需确保 MyImage.jpg 将其构建操作"设置为资源".

Just make sure that MyImage.jpg has its "Build Action" set to "Resource".

这篇关于WPF 按钮鼠标悬停图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！