使用带有父级属性的触发器

Question

I have a Grid with a ToggleButton. The ToggleButton has a ControlTemplate and in this ControlTemplate I've defined a Ellipse and a Path. Atm the color on the Ellipse and the Path is changeing if the ToggleButtons IsMouseOver property is true. Now I want to change the color if the Grids IsMouseOver property is true as well. But I can't get it working.

My code looks like

                <Grid Height="26"
    x:Name="GroupboxHeader"
    Background="Blue">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <ToggleButton Grid.Column="1"
                HorizontalAlignment="Right"
                Margin="0 0 5 0"
                OverridesDefaultStyle="True"
                Background="LightGray"
                Height="19"
                Width="19">
        <ToggleButton.Template>
            <ControlTemplate>
                <Grid>
                    <Grid.LayoutTransform>
                        <TransformGroup>
                            <TransformGroup.Children>
                                <TransformCollection>
                                    <RotateTransform Angle="90" />
                                </TransformCollection>
                            </TransformGroup.Children>
                        </TransformGroup>
                    </Grid.LayoutTransform>
                    <Ellipse x:Name="circle"
                            HorizontalAlignment="Center"
                            Height="19"
                            Stroke="White"
                            VerticalAlignment="Center"
                            Width="19" />
                    <Path x:Name="arrow"
                        Data="M 1,1.5 L 4.5,5 L 8,1.5"
                        HorizontalAlignment="Center"
                        SnapsToDevicePixels="false"
                        Stroke="White"
                        StrokeThickness="2"
                        VerticalAlignment="Center" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                            Value="true">
                        <Setter Property="Stroke"
                                TargetName="circle"
                                Value="LightGray" />
                        <Setter Property="Stroke"
                                TargetName="arrow"
                                Value="LightGray" />
                    </Trigger>
                    <DataTrigger Binding="{Binding ElementName=GroupboxHeader, Path=IsMouseOver}">
                        <Setter Property="Stroke"
                                TargetName="circle"
                                Value="LightGray" />
                        <Setter Property="Stroke"
                                TargetName="arrow"
                                Value="LightGray" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>
</Grid>

Answer 1

Change your ellipse/path stroke to {TemplateBinding BorderBrush} , and instead of using TargetName in your triggers change BorderBrush on your button. This way you can add triggers on grid with TargetName set to your toggle button to achieve desired behavior.

EDIT:

As this is not in control template, TargetName would not find child elements. Instead, you can set triggers to:

<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Value="True">

inside your ToggleButton style.