wpf 在父元素上触发鼠标悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17473886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger for mouseover on parent element
提问by Mare Infinitus
If have written a button usercontrol that contains an image and a text.
如果已经编写了一个包含图像和文本的按钮用户控件。
When the user moves the mouse over the button, I want an effect on the image.
当用户将鼠标移到按钮上时，我想要对图像产生影响。
Right now I just can get it to work with an effect on the button.
现在我只能让它在按钮上起作用。
Here is what I have so far:
这是我到目前为止所拥有的：
<Button x:Class="Example.Controls.MyButton"
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"
Name="MyButtonControl"
Margin="5"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
d:DesignHeight="80"
d:DesignWidth="120"
Style="{DynamicResource SomeButtonStyle}"
mc:Ignorable="d">
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml" />
<ResourceDictionary>
<Style x:Key="SomeButtonStyle"
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
TargetType="Button">
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="30"
Opacity="100"
ShadowDepth="0"
Color="WhiteSmoke" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Button.Resources>
<Border HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="SlateGray"
BorderThickness="1">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="1"
Margin="7"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Source="{Binding ElementName=MyButtonControl,
Path=Image}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Style="{DynamicResource MenuButtonText}"
Text="{Binding ElementName=MyButtonControl,
Path=Text}" />
</Grid>
</Border>
</Button>
Now I want the effect to just affect the image, or the image and text perhaps.
现在我希望效果只影响图像，或者图像和文本。
Can this be achieved somehow?
这可以以某种方式实现吗？
Right now I'm trying to have the trigger at the image and let it fire on mouseover of the parent.
现在我试图在图像上触发，让它在父鼠标悬停时触发。
Here is the testcode:
这是测试代码：
<Image Grid.Row="0"
Grid.Column="1"
Margin="7"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Source="{Binding ElementName=ImageButtonControl,
Path=Image}">
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
<Setter Property="Image.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="30"
Opacity="100"
ShadowDepth="0"
Color="WhiteSmoke" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
But the trigger does not change anything...
但是触发器不会改变任何东西......
回答by Mare Infinitus
The seconds trigger works
秒触发工作
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
<Setter Property="Image.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="30"
Opacity="100"
ShadowDepth="0"
Color="WhiteSmoke" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
回答by SvenG
You have to define your buttons look and feel in a ControlTemplateso you are able to use the TargetNameproperty in the Trigger to target the Image Control.
e.g.:
您必须在 a 中定义按钮的外观和感觉，ControlTemplate以便您能够使用TargetName触发器中的属性来定位图像控件。例如：
<Button Width="200" Height="200">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="SlateGray"
BorderThickness="1">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Image x:Name="MyImage" Grid.Row="0"
Grid.Column="1"
Margin="7"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Source="{Binding ElementName=MyButtonControl,
Path=Image}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Text="{Binding ElementName=MyButtonControl,
Path=Text}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Effect" TargetName="MyImage">
<Setter.Value>
<DropShadowEffect BlurRadius="30"
Opacity="100"
ShadowDepth="0"
Color="WhiteSmoke" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
