我有一个 DataGrid
这需要看起来像这样:
如您所见,有多个列以及多级列标题,其中一些跨越多个列。
我需要在 WPF 中执行此操作,因此请仅提供将创建多级列标题的 XAML 解决方案。
最佳答案
据我所知,标准DataGrid
不支持它,所以你需要寻找替代品。我可以提供 Grid
的使用能力,例如: Grid.RowDefinitions
, Grid.ColumnDefinitions
.为了说明这个特性,我创建了一个示例,需要完成:
<Window x:Class="MultiHeaderDataGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Bisque" />
<Setter Property="TextBlock.FontSize" Value="14" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border Grid.Column="1" Grid.ColumnSpan="4">
<TextBlock Text="Main application" TextAlignment="Center" />
</Border>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<TextBlock Grid.Column="1" Text="Experiment 1" TextAlignment="Center" />
</Border>
<Border Grid.Column="1">
<TextBlock Grid.Column="1" Text="Experiment 2" TextAlignment="Center" />
</Border>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
</Border>
<Border Grid.Column="1">
<TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
</Border>
<Border Grid.Column="2">
<TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
</Border>
<Border Grid.Column="4">
<TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
</Border>
</Grid>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
</Border>
<Border Grid.Column="1">
<TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
</Border>
<Border Grid.Column="2">
<TextBlock Grid.Column="1" Text="Mode 1" TextAlignment="Center" />
</Border>
<Border Grid.Column="4">
<TextBlock Grid.Column="1" Text="Mode 2" TextAlignment="Center" />
</Border>
</Grid>
<DataGrid Name="datagrid1" AutoGenerateColumns="False" Grid.Row="3" RowHeaderWidth="10" Loaded="datagrid1_Loaded">
<DataGrid.Columns>
<DataGridTextColumn x:Name="Column1" Binding="{Binding Name}" Header="column 1" Width="100" />
<DataGridTextColumn x:Name="Column2" Binding="{Binding Age}" Header="column 2" Width="80" />
<DataGridTextColumn x:Name="Column3" Binding="{Binding Sample}" Header="column 3" Width="80" />
<DataGridTextColumn x:Name="Column4" Binding="{Binding Sample}" Header="column 4" Width="*" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
Output
如果需要,可以设置
ColumnDefinition Width
的 Grid
,如 DataGrid
柱子:<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=SampleDataGrid, Path=RowHeaderWidth}" />
<ColumnDefinition Width="{Binding ElementName=Column1, Path=ActualWidth}" />
<ColumnDefinition Width="{Binding ElementName=Column2, Path=ActualWidth}" />
</Grid.ColumnDefinitions>
此外,您需要定义相同的
Style
对于Grid
标题和 DataGrid
.
关于wpf - WPF 中 DataGrid 的多级列标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17652039/