tiêu đề cột đa cấp cho DataGrid trong WPF

Question

Tôi có một DataGrid mà cần phải trông như thế này:

Như bạn có thể thấy, có nhiều cột cũng như các tiêu đề cột đa cấp, một số đó span nhiều cột.

Tôi cần thực hiện việc này trong WPF, vì vậy vui lòng chỉ cung cấp các giải pháp XAML để tạo tiêu đề cột đa cấp.

Answer 1

Theo như tôi biết, tiêu chuẩn DataGrid không hỗ trợ, vì vậy bạn cần tìm giải pháp thay thế. Tôi có thể cung cấp khả năng sử dụng một khả năng của Grid, chẳng hạn như: Grid.RowDefinitions, Grid.ColumnDefinitions. Để minh họa cho tính năng này, tôi đã tạo ra một mẫu, những người cần để hoàn thành:

<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

Nếu bạn muốn, bạn có thể thiết lập các ColumnDefinition Width của một Grid, giống như một cột 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> 

Ngoài ra, bạn cần xác định chính xác Style cho tiêu đề Grid và DataGrid.