2013-07-15 10 views
10

Ich habe eine DataGrid, die wie folgt aussehen muss:Mehrstufige Spaltenüberschrift für Datagrid in WPF

enter image description here

Wie Sie sehen können, gibt es mehrere Spalten sowie Multi-Level-Spaltenüberschriften, einige, Überspannen Sie mehrere Spalten.

Ich brauche dies in WPF zu tun, so freundlich nur XAML-Lösungen bereitzustellen, die Multi-Level-Spaltenüberschriften schaffen.

+1

[Was haben Sie versucht?] (Http://mattgemamm.com/2008/12/08/what-have-you-tried/) – Vale

Antwort

9

Soweit ich weiß, ist die Standard-DataGrid unterstützt es nicht, so dass Sie nach Alternativen zu suchen. Ich kann die Verwendung eines Grid Fähigkeiten bieten, wie zum Beispiel: Grid.RowDefinitions, Grid.ColumnDefinitions. Um diese Funktion zu veranschaulichen, habe ich eine Probe, die müssen vervollständigen:

<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

enter image description here

Wenn Sie möchten, können Sie die ColumnDefinition Width eines Grid gesetzt, wie eine DataGrid Säule:

<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> 

Außerdem müssen Sie die gleichedefinierenfür die Grid Header und DataGrid.

+0

Ich habe erfolgreich mit diesem .. Aber ich habe ein Problem beim Scrollen Balken ist sichtbar .. Die Spalte würde sich verkleinern und die Größe passt nicht wieder mit dem Header zusammen. Wie kann ich das beheben? – mrhands

+0

@mrhands: Ich kann nicht sofort und in Kommentar beantworten. Sie müssen eine neue Frage mit einem Beispiel dafür stellen, was Sie getan haben und wie es aussehen sollte. –

+0

Ich habe gestellte Frage hier .. http://stackoverflow.com/questions/22140746/how-to-fix-width-of-column-in-datagrid-when-horizontal-scrollbar-is-visible – mrhands