Подтвердить что ты не робот

Многоуровневый заголовок столбца для DataGrid в WPF

У меня есть DataGrid, который должен выглядеть следующим образом:

Как вы можете видеть, есть несколько столбцов, а также многоуровневые заголовки столбцов, некоторые из которых охватывают несколько столбцов.

Мне нужно сделать это в WPF, поэтому любезно предоставляйте только решения XAML, которые создадут многоуровневые заголовки столбцов.

Ответ 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 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.