Question

我是WPF的新手，并且想要创建如下内容：

正如您在下面的xaml文件中所看到的，我已将所有列设为只读（复选框列除外），并且由于DataGrid的默认行为是在直接单击时突出显示该行在它上面，我通过使背景色透明来隐藏了它。

但是，我想发生的事情是，当您单击复选框时，整个行将突出显示。因此，我不希望在单击其他内容时（包括复选框列中但不在复选框本身中）突出显示行，而在单击复选框时突出显示行。

有人可以帮我实现这种期望的行为吗？

<DataGrid Grid.Row="2"
          Grid.Column="1"
          Grid.ColumnSpan="2"
          ItemsSource="{Binding StudentData}"
          AutoGenerateColumns="False"
          RowHeight="30"
          ColumnWidth="150"
          GridLinesVisibility="Horizontal"
          HeadersVisibility="Column"
          SelectionMode="Extended"
          >
    <DataGrid.Resources>
        <!-- Set the color, height, and padding of colum headers -->
        <Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="#7AC040" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Height" Value="30" />
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="0,0,1,0"/>
            <Setter Property="Padding" Value="10 0 0 0" />
        </Style>

        <!-- When selecting a row, sets its highlight color to a light blue and its text to be black -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#CFECFF"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>

        <!-- Stylizes the checkbox column and makes it so that clicking the checkbox will select it instead of having to click twice -->
        <Style x:Key="DataGridCheckboxStyle" TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>

        <!-- Pads the text of the actual data and makes the font size a bit bigger -->
        <Style x:Key="GridCellStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Padding" Value="10 0 0 0"/>
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="13" />
        </Style>
    </DataGrid.Resources>

    <DataGrid.Columns>
        <DataGridTemplateColumn Width="40">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <CheckBox Style="{StaticResource DataGridCheckboxStyle}" IsChecked="{Binding Path=Selected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTextColumn Width="270" Header="Name" Binding="{Binding Name}" ElementStyle="{StaticResource GridCellStyle}" IsReadOnly="True" />
        <DataGridTextColumn Width="250" Header="University" Binding="{Binding University}" ElementStyle="{StaticResource GridCellStyle}" IsReadOnly="True" />
        <DataGridTextColumn Width="100" Header="Age" Binding="{Binding Age}" ElementStyle="{StaticResource GridCellStyle}" IsReadOnly="True" />

        <DataGridTemplateColumn Width="50">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding StatusImage}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>

    <!-- Removes any highlighting of rows when clicking on a cell -->
    <DataGrid.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                </Trigger>
            </Style.Triggers>

        </Style>
    </DataGrid.CellStyle>

</DataGrid>

Answer 1

首先，我将DataTemplateColumn替换为DataGridCheckBoxColumn，如下所示：

<DataGridCheckBoxColumn Binding="{Binding Selected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

然后，我将向您的DataGrid添加一个RowStyle，如下所示：

      <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
          <Style.Triggers>
            <DataTrigger Binding="{Binding Selected}"
                         Value="True">
              <Setter Property="IsSelected"
                      Value="True" />
              <Setter Property="Background"
                      Value="Red" />
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </DataGrid.RowStyle>

请注意，我只是将背景更改为红色，因此非常清楚正在发生的事情。

如果在单击时禁用了行选择，如何仅选中复选框时如何突出显示DataGrid行？

1 个答案: