wpf - WPF の DataGrid のマルチレベル列ヘッダー

Question

次のようにDataGridする必要があります。

ご覧のとおり、複数の列と複数レベルの列ヘッダーがあり、複数の列にまたがるものもあります。

これは WPF で行う必要があるため、マルチレベルの列ヘッダーを作成する XAML ソリューションのみを提供してください。

Answer 1

私の知る限り、標準DataGridではサポートされていないため、代替手段を探す必要があります。次のGridような機能の使用を提供できます。この機能を説明するために、サンプルを作成しました。以下を完了する必要があります。Grid.RowDefinitionsGrid.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.