WPF鼠标悬停触发效果，用于子控件 [英] WPF Mouseover Trigger Effect for Child Controls

问题描述

让我们说一下这段代码:

Lets say I have this bit of code:

<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或Image应该是特定大小的样式.

Basically I have a Style applied to the Grid that says any TextBlock or Image within it should be styles to a certain size.

我想在Grid上创建一个触发器，使该效果应用于Grid内的所有TextBlocks和Images，但不应用于Grid本身.

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.

我可以将触发器直接应用于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.

有人可以帮我吗?

推荐答案

您可以采用其他方法.也就是说，将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设置为一个值，例如Transparent.默认情况下，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屋！