【发布时间】：2013-07-15 10:27:27
【问题描述】：
我有一个DataGrid，它需要看起来像这样：
如您所见，有多个列以及多级列标题，其中一些跨越多个列。
我需要在 WPF 中执行此操作，因此请仅提供将创建多级列标题的 XAML 解决方案。
【问题讨论】：
【发布时间】：2013-07-15 10:27:27
【问题描述】：
据我所知，标准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
如果需要，您可以设置Grid 的ColumnDefinition Width，例如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>
另外，您需要为Grid 标头和DataGrid 定义相同的Style。
【讨论】：
-
我已经成功使用了这个..但是当滚动条可见时我遇到了问题..该列会自行缩小，并且大小再次与标题不匹配..我该如何解决这个问题?
-
@mrhands：我无法立即回答并发表评论。你需要提出一个新问题，并举例说明你做了什么以及它应该是什么样子。
-
我在这里问过问题.. stackoverflow.com/questions/22140746/…
-
@mrhands：好的我看到了，如果有解决办法我会写的。
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn Width="400">
<DataGridTemplateColumn.Header>
<StackPanel Width="400" HorizontalAlignment="Center">
<Label HorizontalContentAlignment="Center" FontWeight="Bold">EXPERIMENT 1</Label>
<Line Stroke="Black"
X1="0"
X2="400"
Y1="0"
Y2="0" />
<StackPanel Width="400" Orientation="Horizontal">
<Label Width="200" HorizontalContentAlignment="Center">MODE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="200" HorizontalContentAlignment="Center">MODE 2</Label>
</StackPanel>
<Line Stroke="Black"
X1="0"
X2="400"
Y1="0"
Y2="0" />
<StackPanel Width="400" Orientation="Horizontal">
<Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
</StackPanel>
</StackPanel>
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Width="400" Orientation="Horizontal">
<ComboBox Width="100" />
<ComboBox Width="100" />
<ComboBox Width="100" />
<ComboBox Width="100" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="400">
<DataGridTemplateColumn.Header>
<StackPanel Width="400" HorizontalAlignment="Center">
<Label HorizontalContentAlignment="Center" FontWeight="Bold">EXPERIMENT 2</Label>
<Line Stroke="Black"
X1="0"
X2="400"
Y1="0"
Y2="0" />
<StackPanel Width="400" Orientation="Horizontal">
<Label Width="200" HorizontalContentAlignment="Center">MODE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="200" HorizontalContentAlignment="Center">MODE 2</Label>
</StackPanel>
<Line Stroke="Black"
X1="0"
X2="400"
Y1="0"
Y2="0" />
<StackPanel Width="400" Orientation="Horizontal">
<Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 1</Label>
<Line Stroke="Black"
X1="1"
X2="1"
Y1="0"
Y2="26" />
<Label Width="100" HorizontalContentAlignment="Center">VALUE 2</Label>
</StackPanel>
</StackPanel>
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Width="400" Orientation="Horizontal">
<ComboBox Width="100" />
<ComboBox Width="100" />
<ComboBox Width="100" />
<ComboBox Width="100" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
【讨论】：