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>

我该放置什么，以便背景更改为另一个图像，无论它位于我的资源中。或其他位置？ （不确定将图像放置在何处进行访问）。我进行了搜索，但是发现的解决方案与我要处理的不完全相同。如果这是一个重复的问题，我深表歉意。

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 的文件夹中。

代码为：

<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中的资源工具将图像导入其中后，我将属性窗格中的图像构建设置更新为资源。

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