WPF中DataGrid的多级列标题

Question

我有一个DataGrid需要看起来像这样:

如您所见,有多列以及多级列标题,其中一些列跨越多列.

我需要在WPF中执行此操作,因此请仅提供将创建多级列标题的XAML解决方案.

Answer 1

据我所知,标准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 Widtha 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.