子控件的 WPF 鼠标悬停触发效果 [英] WPF Mouseover Trigger Effect for Child Controls
问题描述
假设我有这段代码:
<Window>
<Window.Resources>
<Color x:Key="MyColor"
A="255"
R="152"
G="152"
B="152" />
<DropShadowEffect x:Key="MyEffect"
ShadowDepth="0"
Color="{StaticResource MyColor}"
BlurRadius="10" />
<Style x:Key="MyGridStyle"
TargetType="{x:Type Grid}">
<Setter Property="Height"
Value="200" />
<Setter Property="Width"
Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width"
Value="100" />
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height"
Value="100" />
<Setter Property="Width"
Value="100" />
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<!-- How do I apply my effect when this grid is hovered over to Image and TextBox, but not the grid itself? -->
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Style="{StaticResource MyGridStyle}">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0"
Source="image.png" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Hover Over Me" />
</Grid>
</Window>
基本上我有一个应用于网格的样式,它表示其中的任何 TextBlock 或图像都应该是特定大小的样式.
Basically I have a Style applied to the Grid that says any TextBlock or Image within it should be styles to a certain size.
我想在网格上创建一个触发器,使效果应用于网格内的所有文本块和图像,但不应用于网格本身.
I want to create a Trigger on the Grid that causes an effect to be applied to all TextBlocks and Images within the Grid, but not to the Grid itself.
我可以将 Trigger 直接应用于 TextBlock 和/或 Image,但是效果只会分别发生在每个元素上.不管我悬停在哪个内部子元素上,我都需要对网格中的任何 TextBlock 和/或 Image 产生影响.
I can apply the Trigger directly to TextBlock and/or Image, but then the effect only occurs on each element separately. I need to have the effect occur to any TextBlock and/or Image within the Grid despite which inner child element I am hovered over.
谁能帮我解决这个问题?
Can anyone help me with this?
推荐答案
你可以反过来做.即,将 DataTriggers
添加到 Image
和 TextBlock
并使其在祖先 Grid 的
.IsMouseOver
上触发
You can do it the other way around. That is, add DataTriggers
to Image
and TextBlock
and make them trigger on IsMouseOver
for the ancestor Grid
.
注意:如果您希望鼠标在 Grid
上方时立即触发此效果,您需要将 Background
设置为一个值,例如 <代码>透明代码>.默认情况下,Background
为 null
并且此值不用于命中测试.
Note: If you want this effect to trigger as soon as the mouse is over the Grid
you will need to set Background
to a value, like Transparent
. By default, the Background
is null
and this value isn't used in hit testing.
<Style x:Key="MyGridStyle" TargetType="{x:Type Grid}">
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
这篇关于子控件的 WPF 鼠标悬停触发效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!