創建DataGrid列分隔符

Question

有沒有辦法在DataGrid中的兩個特定列之間創建一個可視化分隔符？它不需要花哨，也許只是雙線或更厚的邊界。

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); 

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> 

我還沒有測試過其中的任何一個，而且您可能必須稍微使用邊距。

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