8

我正在学习 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>

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

感谢您的解决方案 dbaseman

4

2 回答 2

15

/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其“构建操作”设置为“资源”即可。

于 2012-09-04T22:06:57.503 回答
9

Here is another way to do this.

You can use the two events of the image MouseEnter and MouseLeave. Now in your code do this.

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;
}
于 2015-01-02T12:52:37.497 回答