如何改变数据格行背景时，点击togglebutton内的罗彻德？

Question

我正在重写DataGrid行标题样式，并且受到以下两个问题的阻碍：

1. DataGrid行标题包含一个图像和一个ToggleButton。当ToggleButton被“选中”时，我想要改变整行的背景颜色，但是我只设法改变了行头的背景，无法想出在行级触发触发器的方法。

​

​

2.当一行被选中时，行和标题背景被设置为不同的背景，反之亦然。我需要做的是当行标题被选中时更改行的背景

​

​

下面是DataGridRowHeader的样式代码

<Style x:Key="{x:Type DataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                <Grid>
                    <Border Name="RowHeaderBorder"
                        BorderThickness="0,0,3,0"
                        Margin="0,0,0,0"
                        BorderBrush="{StaticResource DataGridRowBorder}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Image Grid.Column="0" Source="{Binding ImageSource}" RenderOptions.BitmapScalingMode="HighQuality" Stretch="None"  VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <ToggleButton x:Name="tglButton" Visibility="{Binding ActiveCall}"  Grid.Column="1"  Content="Button" Focusable="True" BorderThickness="1" Width="80" Height="33" VerticalAlignment="Top"  >
                            </ToggleButton>
                        </Grid>
                    </Border>
                </Grid>

                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}" Value="true">
                        <Setter Property="Background"   TargetName="RowHeaderBorder" Value ="Green"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

下面是DataGridRow的风格：

<Style x:Key="DataGridRowStyle" TargetType="{x:Type DataGridRow}">

    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{StaticResource DataGridRowBorder}"/>

    <Style.Triggers>
        <Trigger Property="IsMouseOver"   Value="true">
            <Setter Property="Background" Value="{StaticResource DataGridRowHoveredBackground}" />
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0"  BlurRadius="20"/>
                </Setter.Value>
            </Setter>
        </Trigger>

        <Trigger Property="IsSelected" Value="true">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="{StaticResource RowBackgroundSelectedBrush2}" />
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0"  BlurRadius="20"/>
                </Setter.Value>
            </Setter>

        </Trigger>
        <DataTrigger Binding="{Binding ElementName=DataGridRowHeader.tglButton, Path=IsChecked}" Value="true">
            <Setter Property="Background"   Value ="Green"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 1

这是因为tglButton出现在行头中，它是DataGridRow的子级。子行标题中定义的触发器正在尝试更新父级(DataGridRow)的属性，但找不到该属性。

一种解决方案是在DataGridRow的模板中定义DataGridRowHeader的模板，并为其提供一个可在触发器中使用的名称。一个非常粗糙的例子：

<Style
       TargetType="{x:Type DataGridRow}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="DGR_Border"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        SnapsToDevicePixels="True"
                        CornerRadius="8,8,8,8">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </SelectiveScrollingGrid.ColumnDefinitions>
                        <SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </SelectiveScrollingGrid.RowDefinitions>
                        <DataGridCellsPresenter Grid.Column="1"
                                                ItemsPanel="{TemplateBinding ItemsPanel}"
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <DataGridDetailsPresenter Grid.Column="1"
                                                  Grid.Row="1"
                                                  SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, 
                                                    ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, 
                                                    Converter={x:Static DataGrid.RowDetailsScrollingConverter}, 
                                                    RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                                  Visibility="{TemplateBinding DetailsVisibility}" />
                        <DataGridRowHeader Name="RHeader" Grid.RowSpan="2"
                                           SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                           Visibility="{Binding HeadersVisibility, 
                                            ConverterParameter={x:Static DataGridHeadersVisibility.Row}, 
                                            Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                                            RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">

                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="50" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>

                                            <ToggleButton x:Name="tglButton"
                                                          Grid.Column="1"
                                                          Content="Button"
                                                          Focusable="True"
                                                          BorderThickness="1"
                                                          Width="80"
                                                          Height="33"
                                                          VerticalAlignment="Top">
                                            </ToggleButton>
                                        </Grid>
                        </DataGridRowHeader>

                    </SelectiveScrollingGrid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected"
                             Value="True">
                        <Setter TargetName="DGR_Border"
                                Property="Background"
                                Value="Gray" />
                    </Trigger>
                    <DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}"
                                 Value="true">
                        <Setter Property="Background"
                                TargetName="RHeader"
                                Value="Green" />
                        <Setter Property="Background"
                                Value="Green" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="DataContext"
            Value="{Binding RelativeSource={RelativeSource Self}}" />

    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="BorderBrush"
            Value="Aqua" />

    <Style.Triggers>

        <Trigger Property="IsSelected"
                 Value="true">
            <Setter Property="Foreground"
                    Value="Black" />
            <Setter Property="Background"
                    Value="Pink" />
            <Setter Property="FontWeight"
                    Value="Bold" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0"
                                      BlurRadius="20" />
                </Setter.Value>
            </Setter>

        </Trigger>

    </Style.Triggers>
</Style>