WPF按钮鼠标悬停图像

Question

WPF按钮鼠标悬停图像

9

我正在学习C#和XAML，以构建Windows应用程序。我想创建一个带有图像背景的按钮。但是当鼠标悬停在按钮上时，按钮的背景应该更改为另一个“高亮”图像。我尝试将背景图像添加到Resources.resx中。我必须使用xaml样式创建自定义按钮，以消除wpf按钮的默认高亮效果。

我从SO上找到了一些代码来创建自定义按钮。代码如下（在新的资源字典中）：

    <!-- 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上搜索过，但找到的解决方案并不完全符合我的需求。如果这是一个重复的问题，我很抱歉。

摘要：

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

更新：这是我作为触发器动作放置的代码，但图片没有更新。我确保将图像构建操作设置为资源，并将其放在名为“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

解决方案

以下是完整代码，允许鼠标悬停时更改按钮的图像：

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

对于实际的图片，我将其放置在根目录下的资源文件夹中。在使用Visual Studio中的资源工具导入图像后，在属性窗格中更新了图像构建设置为资源。 感谢dbaseman提供的解决方案。

- Ishikawa

2个回答

10

这里有另一种方法来完成这个任务。

你可以使用图片的两个事件，即MouseEnter和MouseLeave。现在在你的代码中这样做。

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

C#

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/Polaroid.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

- Yannick Turbang

1

我认为上面的代码写得非常糟糕。WPF支持MVVM模式。但是，如果在代码后台使用上述代码，那就太可怕了。 - Taehyung Kim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- McGarnagle · Accepted Answer

我认为最简单的方法是将图像添加到项目中的/Images文件夹中。然后您可以使用以下语法：

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

确保将MyImage.jpg的“生成操作”设置为“资源”。