创建DataGrid列分隔符

Question

有没有一种方法可以在DataGrid中的两列之间创建一个视觉分隔符？它不需要很花哨，也许只是双线或更粗的边框即可。

- shader

---

这些列是自动生成的还是您在指定集合？ - Aaron Ray

我通过循环遍历所有对象并添加尚未在集合中的任何列来指定列。这是为了将所有列都放入表格中，即使并非所有对象都定义了所有列。 - shader

Answer 1

如果是这种情况，您可以使用自定义样式来实现：

。

<Window.Resources>
    <Style x:Key="DataGridColumnSeparatorStyle" TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="Gray"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">        
    <DataGrid.Columns>
        <DataGridTextColumn Header="Start"/>
        <DataGridTextColumn Header="End"/>
        <!-- Separator column -->
        <DataGridTemplateColumn MinWidth="0" Width="2" CellStyle="{StaticResource DataGridColumnSeparatorStyle}"/>
        <DataGridTextColumn Header="Start"/>
        <DataGridTextColumn Header="End"/>
    </DataGrid.Columns>
</DataGrid>

如果您在代码后台生成列，无论是通过自动生成列还是其他方式，仍然可以通过从XAML获取资源来创建分隔符列：

DataGridTextColumn s1 = new DataGridTextColumn() { Header = "Start" };
DataGridTextColumn s2 = new DataGridTextColumn() { Header = "Start" };
DataGridTextColumn e1 = new DataGridTextColumn() { Header = "End" };
DataGridTextColumn e2 = new DataGridTextColumn() { Header = "End" };

DataGridTemplateColumn column = new DataGridTemplateColumn();
column.MinWidth = 0;
column.Width = 2;

var separatorStyle = (Style)FindResource("DataGridColumnSeparatorStyle");
column.CellStyle = separatorStyle;

dataGrid.Columns.Add(s1);
dataGrid.Columns.Add(e1);
dataGrid.Columns.Add(column);
dataGrid.Columns.Add(s2);
dataGrid.Columns.Add(e2);

- sondergard

---

在使用键盘导航单元格时，分隔列会获得焦点。这是不期望的情况... - Vijay Chavda

Vijay Chavda，有很多方法可以解决这个问题。你可以轻松地防止列获得焦点。 - Josh

Answer 2

我认为你有两个选项。最简单的选择可能是使用一个Style并将你的DataGrid.CellStyle设置为已定义的样式。

    <Style x:Key="DataGridBorder" TargetType="DataGridCell">
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1,1,1,1" />          
    </Style>
    ...
    <DataGrid CellStyle="{StaticResource DataGridBorder}">
    ...

另一种选择是与DataGridTemplateColumn结合使用CellTemplate。

    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Border BorderBrush="LightGray" BorderThickness="1,1,1,1" Margin="-6,-6,-6,-6">
                    <Grid Margin="6,6,6,6">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />                                                    
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Whatever}" Grid.Column="0" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />
                    </Grid>                                            
                </Border>
            </DataTemplate> 
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>   

我没有测试过这两个，而且你可能需要稍微调整一下边距。

- Aaron Ray

Answer 3

尝试一下。 在使用键盘 Tab 键导航单元格时，它不会聚焦分隔列：

<DataGridTemplateColumn MinWidth="2" MaxWidth="2" IsReadOnly="True" CanUserResize="False">
    <DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="Gray" />
            <Setter Property="BorderBrush" Value="Gray" />
            <Setter Property="BorderThickness" Value="2" />
        </Style>
    </DataGridTemplateColumn.HeaderStyle>
    <DataGridTemplateColumn.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">                       
            <Setter Property="BorderBrush" Value="Gray" />
            <Setter Property="BorderThickness" Value="2" />                          
            <Setter Property="Focusable" Value="False" />
        </Style>
    </DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>

Source

- Vijay Chavda