nagłówek kolumny wielopoziomowe dla DataGrid w WPF

Question

Mam DataGrid która musi wyglądać następująco:

Jak widać, istnieje wiele kolumn, jak również nagłówki kolumn wielopoziomowe, że niektóre obejmuje wiele kolumn.

Potrzebuję zrobić to w WPF, więc uprzejmie zapewnij tylko rozwiązania XAML, które utworzą wielopoziomowe nagłówki kolumn.

Answer 1

O ile mi wiadomo, standard DataGrid go nie obsługuje, dlatego należy szukać alternatyw. Mogę zaoferować możliwość korzystania z funkcji Grid, takich jak: Grid.RowDefinitions, Grid.ColumnDefinitions. Aby zilustrować tę funkcję, stworzyłem próbkę, który trzeba wypełnić:

<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

Jeśli chcesz, możesz ustawić ColumnDefinition Width o Grid, jak kolumny 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> 

Należy również zdefiniować ten sam Style dla nagłówka Grid i DataGrid.