Multilevel intestazione di colonna per DataGrid in WPF

Question

Ho un DataGrid che deve assomigliare a questo:

Come si può vedere, ci sono più colonne e le intestazioni delle colonne multi-livello, alcuni che si estendono su più colonne.

Ho bisogno di farlo in WPF, quindi offro solo soluzioni XAML che creeranno intestazioni di colonne multi-livello.

Answer 1

Per quanto ne so, lo standard DataGrid non lo supporta, quindi è necessario cercare delle alternative. Posso offrire l'utilizzo di funzionalità Grid, ad esempio: Grid.RowDefinitions, Grid.ColumnDefinitions. Per illustrare questa caratteristica, ho creato un campione, che hanno bisogno di completare:

<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

Se si desidera, è possibile impostare la ColumnDefinition Width di un Grid, come una colonna 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> 

Inoltre, è necessario definire la stessa Style per l'intestazione Grid e DataGrid.