Comment créer un espace entre les colonnes d'un DataGrid WPFToolkit

Question

J'ai une grille de données WPF (de la WPF Toolkit comme le titre l'indique) et je veux un écart entre certaines colonnes, où même pas un en-tête est au-dessus et vous pouvez voir le fond entre. Je n'ai aucune idée de comment gérer ça. D'ailleurs, toutes mes colonnes sont TemplateColumns, mais je préférerais une solution où je n'ai pas besoin de styliser chaque colonne et son en-tête pour avoir un gab d'un côté. Peut-être quelque chose comme <DataGridGapColum Width="5" />, mais quelque chose comme ça n'existe pas malheureusement.

Answer 1

Cela nécessitera quelques étapes. Nous devons d'abord désactiver les GridLines dans le DataGrid pour pouvoir obtenir des "Gap Cells". Nous laisserons les GridLines aux DataGridCells à la place. Nous devons également spécifier un GridLinesBrush. Nous ne pouvons pas créer un style "DataGridGapColumn" pour un DataGridColumn puisqu'il ne dérive pas de FrameworkElement, donc nous devrons nous contenter d'un GapCellStyle et d'un GapHeaderStyle. Ensuite, nous pouvons créer un "DataGridGapColumn" comme celui-ci

<DataGridTextColumn Width="100" 
        CellStyle="{StaticResource DataGridGapCell}" 
        HeaderStyle="{StaticResource DataGridGapHeader}"/> 

Exemple avec des colonnes et des colonnes Gap

<DataGrid x:Name="dataGrid" 
      GridLinesVisibility="None" 
      HorizontalGridLinesBrush="Black" 
      ...> 
    <DataGrid.Resources> 
     <!-- Regular Cell Style --> 
     <Style TargetType="DataGridCell"> 
      <Setter Property="BorderThickness" Value="0,0,1,1"/> 
      <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/> 
     </Style> 
     <!-- Gap Cell Style --> 
     <Style x:Key="DataGridGapCell" TargetType="DataGridCell"> 
      <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/> 
      <Setter Property="BorderThickness" Value="0,0,1,0"/> 
      <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/> 
     </Style> 
     <!-- Gap ColumnHeader Style --> 
     <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader"> 
      <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/> 
     </Style> 
    </DataGrid.Resources> 
    <DataGrid.Columns> 
     <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/> 
     <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/> 
     <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/> 
     <DataGridTextColumn Header="Header 3" Binding="{Binding Header3}"/> 
     <DataGridTextColumn Width="50" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/> 
     <DataGridTextColumn Header="Header 4" Binding="{Binding Header4}"/> 
     <DataGridTextColumn Header="Header 5" Binding="{Binding Header5}"/> 
    </DataGrid.Columns> 
</DataGrid> 

Mise à jour
Vous pouvez mettre les styles dans un ResourceDictionary ou dans Window.Resouces. Exemple

<Window.Resources> 
    <Style x:Key="DataGridGapStyle" TargetType="DataGrid"> 
     <Setter Property="GridLinesVisibility" Value="None"/> 
     <Setter Property="HorizontalGridLinesBrush" Value="Black"/> 
    </Style> 
    <!-- Regular Cell Style --> 
    <Style TargetType="DataGridCell"> 
     <Setter Property="BorderThickness" Value="1,0,1,1"/> 
     <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/> 
    </Style> 
    <!-- Gap Cell Style --> 
    <Style x:Key="DataGridGapCell" TargetType="DataGridCell"> 
     <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/> 
     <Setter Property="BorderThickness" Value="0,0,0,0"/> 
     <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/> 
    </Style> 
    <!-- Gap ColumnHeader Style --> 
    <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader"> 
     <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/> 
    </Style> 
</Window.Resources> 
<Grid> 
    <DataGrid x:Name="dataGrid" 
       Style="{StaticResource DataGridGapStyle}" 
       AutoGenerateColumns="False" 
       ItemsSource="{Binding MyCollection}"> 
     <DataGrid.Columns> 
      <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/> 
      <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/> 
      <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/> 
     </DataGrid.Columns> 
    </DataGrid> 
</Grid>