WPFToolkit DataGridの列間にギャップを作成する方法

Question

WPF Data Grid（タイトルが示すようにWPF Toolkitから）があり、いくつかの列間にギャップが必要です。間の背景を参照してください。私はこれをどうやって管理するか分かりません。

ところで、私のすべての列はTemplateColumnsですが、私はすべての単一の列をスタイルする必要はありませんし、一方の面にgabを持つヘッダーのソリューションを好むでしょう。 おそらく<DataGridGapColum Width="5" />のようなものですが、このようなものは残念ながら存在しません。

Answer 1

これにはいくつかの手順が必要です。まず、 "Gap Cells"を得るために、DataGridのGridLineをオフにする必要があります。 GridLinesをDataGridCellsの代わりに残します。また、GridLinesBrushを指定する必要があります。 DataGridColumnの「DataGridGapColumn」スタイルは作成できません.GridColumnはFrameworkElementから派生しないため、GapCellStyleとGapHeaderStyleを解決する必要があります。その後、我々はあなたがのResourceDictionaryでスタイルを置くことができ、いくつかの列とギャップ列

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

更新
この

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

例のように "DataGridGapColumn" を作成することができますかWindow.Resoucesで。例

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