子控件的 WPF 鼠标悬停触发效果

Posted 2023-03-06

【中文标题】子控件的 WPF 鼠标悬停触发效果

【英文标题】：WPF Mouseover Trigger Effect for Child Controls

【发布时间】：2011-12-01 18:47:51

【问题描述】：

假设我有这段代码：

<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>

基本上我有一个样式应用于网格，它表示其中的任何文本块或图像都应该是特定大小的样式。

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

我可以将 Trigger 直接应用于 TextBlock 和/或 Image，但效果只发生在每个元素上。无论我悬停在哪个内部子元素上，我都需要对 Grid 中的任何 TextBlock 和/或 Image 产生效果。

谁能帮我解决这个问题？

【参考方案1】：

我们曾经有过类似的要求，即只对列表框的一行内容进行外部发光，而不是整个行。我们得到了这篇文章的帮助...http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container。

【参考方案2】：

你可以反过来做。也就是说，将DataTriggers 添加到Image 和TextBlock 并让它们在IsMouseOver 上为祖先Grid 触发。

注意：如果您希望鼠标移到Grid 上时立即触发此效果，您需要将Background 设置为一个值，例如Transparent。默认情况下，Background 是null，并且该值不用于命中测试。

<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>