我需要在Image
的鼠标悬停上显示不同的图像
现在我正在这样做
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Hover image -->
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Source" Value="C:\Users\Images\Hi.png"/>
</Trigger>
</Style.Triggers>
工作正常。但在显示不同的图片之前,我需要检查tag
的{{1}}属性
也就是说,如果Image
值为1,我需要显示Tag
如果它是2我需要显示Hi1.png
。
我知道这可以通过处理hi2.png
和MouseEnter
图像事件后面的代码来实现
但我想在XAML中做到这一点。任何线索?
答案 0 :(得分:3)
您可以使用MultiDataTrigger。
由于DataTrigger在关联的DataContext / Binding上运行,因此您需要使用Image控件。
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="1"/>
</MultiDataTrigger.Conditions>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Source" Value="C:\Users\Images\Hi1.png"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="2"/>
</MultiDataTrigger.Conditions>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Source" Value="C:\Users\Images\Hi2.png"/>
</MultiDataTrigger>
</Style.Triggers>
答案 1 :(得分:1)
我创建了一个UserControl,允许您更改MouseOver上图像的颜色。有一个矩形使用两个SolidColorBrush样式来切换颜色并将图像显示为OpacityMask。
这a)允许您为任何颜色制作任何颜色,并且b)每次需要新按钮时都需要重写事件逻辑。
注意:必须在代码中设置源,因为它不能直接绑定在XAML中。
ImageButton.xaml:
<UserControl x:Class="ImageButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="Auto"
Height="Auto"
Cursor="Hand">
<Rectangle x:Name="Border">
<Rectangle.OpacityMask>
<ImageBrush/>
</Rectangle.OpacityMask>
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource ImageHoverBackground}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Fill" Value="{DynamicResource ImageBackground}" />
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</UserControl>
ImageButton.xaml.cs:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace MyNamespace
{
public partial class ImageButton : UserControl
{
public static DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnSourceChanged));
public ImageSource Source
{
get
{
return (ImageSource)GetValue(SourceProperty);
}
set
{
SetValue(SourceProperty, value);
}
}
private static void OnSourceChanged(DependencyObject Object, DependencyPropertyChangedEventArgs e)
{
ImageButton Button = Object as ImageButton;
var ImageBrush = Button.Border.OpacityMask as ImageBrush;
ImageBrush.ImageSource = Button.Source;
}
public ImageButton()
{
InitializeComponent();
}
}
}