[英]WPF Button Mouseover Image
我正在学习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的解决方案
我认为将图像添加到项目中的/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
将其“Build Action”设置为“Resource”。
这是另一种方法。
您可以使用图像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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.