首页 > 解决方案 > 当我在单击时禁用行选择时,仅选择复选框时如何突出显示 DataGrid 行?

问题描述

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

标签: c#wpfxaml

解决方案


首先,我将 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>

请注意,我只是将背景更改为红色,因此非常清楚发生了什么。


推荐阅读