在父元素的触发器中设置子元素的属性

Posted 2023-03-25

【中文标题】在父元素的触发器中设置子元素的属性

【英文标题】：Set a property on child element in trigger on parent element

【发布时间】：2021-12-11 06:58:35

【问题描述】：

我有一个 Grid，它由两行和第二行的一个矩形组成。每当鼠标悬停在网格上时，我都想将其颜色更改为红色。

我尝试使用 EventTrigger，但是当鼠标悬停在网格上时没有任何反应

<Grid Width="50" Height="50" Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.Style>
        <Style TargetType="x:Type Grid">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Rectangle.Fill" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>

    <Rectangle Grid.Row="1" Fill="LightGray" />
</Grid>

【参考方案1】：

Rectangle.Fill 不是Grid 的属性。将Style 移动到正在更改的元素：

<Grid Width="50" Height="50" Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="1">
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Setter Property="Fill" Value="LightGray" />
                <Style.Triggers>
                    <DataTrigger Binding="Binding IsMouseOver, RelativeSource=RelativeSource AncestorType=Grid"
                                 Value="True">
                        <Setter Property="Fill" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Grid>