Dot-Net
如何在 WPFToolkit DataGrid 的列之間創建間隙
我有一個 WPF 數據網格(來自 WPF 工具包,如標題所示),我想要一些列之間的間隙,其中甚至沒有標題,您可以看到它們之間的背景。我不知道如何管理這個。
順便說一句,我的所有列都是 TemplateColumns,但我更喜歡這樣的解決方案,我不必為每一列設置樣式,並且它的標題在一側有一個 gab。也許像
<DataGridGapColum Width="5" />,但不幸的是,這樣的東西並不存在。
這將需要一些步驟。首先,我們需要關閉 DataGrid 中的 GridLines,這樣我們才能獲得“Gap Cells”。我們將把 GridLines 留給 DataGridCells。我們還必須指定一個 GridLinesBrush。我們無法為 DataGridColumn 創建“DataGridGapColumn”樣式,因為它不是從 FrameworkElement 派生的,因此我們必須滿足 GapCellStyle 和 GapHeaderStyle。然後我們可以像這樣創建一個“DataGridGapColumn”
<DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
一些列和間隙列的範例
<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>更新
您可以將樣式放在 ResourceDictionary 或 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>
