none
WPF Datagrid: Header zweizeilig, eine Zeile über zwei Spalten RRS feed

  • Frage

  • Guten Morgen alle zusammen

    Ich habe ein WPF Datagrid welches wunderbar funktioniert.

    Mit einer DataGridTemplateColumn habe ich Checkboxen in das Datagrid gemacht. Funktioniert.

    Nun möchte ich gerne für die beiden Checkbox-Spalten einen "gemeinsamen" Header definieren weil die Checkboxen so schmal sind und die Überschriften so breit.

    Die beiden Checkbox Spalten sind: "Bericht vollständig" und "Bericht versendet".

    Nun möchte ich das Wort Bericht in die erste Zeile des Header über beide Spalten gespannt und dann in der zweite Zeile über der ersten Spalte "ok" und über der zweiten "send".

    _______________ | Bericht <-- Header 1. Zeile über zwei Spalten | OK | Send | <-- Header 2. Zeile in jeder Spalte eine Beschriftung | [ ] | [ ] | <-- Datenzeile: Checkbox in beiden Spalten


    Kann man sich unter meinem Wunsch etwas vorstellen?

    Vielen Dank für Hilfe zur Umsetzung.

    Freitag, 28. März 2014 08:46

Antworten

  • Hi Sabrina,
    solch eine Gestaltung ist über Templates möglich. Hier mal ein Beispiel:

    XAML:

    <Window x:Class="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"
            xmlns:local="clr-namespace:WpfApplication2">
      <Window.Resources>
        <local:ViewModel x:Key="vm"/>
      </Window.Resources>
        <StackPanel DataContext="{Binding Source={StaticResource vm}}">
        <DataGrid ItemsSource="{Binding View}" AutoGenerateColumns="False">
          <DataGrid.Columns>
            <DataGridTemplateColumn>
              <DataGridTemplateColumn.HeaderTemplate>
                <DataTemplate>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="40"/>
                      <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition/>
                      <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="Bericht" HorizontalContentAlignment="Center"/>
                    <Label Grid.Row="1" Grid.Column="0" Content="OK"/>
                    <Label Grid.Row="1" Grid.Column="1" Content="Send"/>
                  </Grid>
                </DataTemplate>
              </DataGridTemplateColumn.HeaderTemplate>
              <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="40"/>
                      <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <CheckBox Grid.Column="0" HorizontalAlignment="Center" IsChecked="{Binding OK}"/>
                    <CheckBox Grid.Column="1" HorizontalAlignment="Center" IsChecked="{Binding Send}"/>
                  </Grid>
                </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
          </DataGrid.Columns>
        </DataGrid>
        </StackPanel>
    </Window>

    Dazu der ViewModel:

    Imports System.ComponentModel
    Imports System.Collections.ObjectModel
    
    Public Class ViewModel
    
      Private cvs As New CollectionViewSource
    
      Public Sub New()
        Dim rnd As New Random
        Dim col As New ObservableCollection(Of Data)
        For i = 1 To 10
          col.Add(New Data With {.OK = rnd.NextDouble < 0.5, .Send = rnd.NextDouble < 0.5})
        Next
        cvs.Source = col
      End Sub
    
      Public ReadOnly Property View As ICollectionView
        Get
          Return cvs.View
        End Get
      End Property
    
    End Class
    
    Public Class Data
      Public Property OK As Boolean
      Public Property Send As Boolean
    
    End Class
    

    --
    Peter

    Freitag, 28. März 2014 10:01

Alle Antworten

  • Hi Sabrina,
    solch eine Gestaltung ist über Templates möglich. Hier mal ein Beispiel:

    XAML:

    <Window x:Class="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"
            xmlns:local="clr-namespace:WpfApplication2">
      <Window.Resources>
        <local:ViewModel x:Key="vm"/>
      </Window.Resources>
        <StackPanel DataContext="{Binding Source={StaticResource vm}}">
        <DataGrid ItemsSource="{Binding View}" AutoGenerateColumns="False">
          <DataGrid.Columns>
            <DataGridTemplateColumn>
              <DataGridTemplateColumn.HeaderTemplate>
                <DataTemplate>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="40"/>
                      <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition/>
                      <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="Bericht" HorizontalContentAlignment="Center"/>
                    <Label Grid.Row="1" Grid.Column="0" Content="OK"/>
                    <Label Grid.Row="1" Grid.Column="1" Content="Send"/>
                  </Grid>
                </DataTemplate>
              </DataGridTemplateColumn.HeaderTemplate>
              <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="40"/>
                      <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <CheckBox Grid.Column="0" HorizontalAlignment="Center" IsChecked="{Binding OK}"/>
                    <CheckBox Grid.Column="1" HorizontalAlignment="Center" IsChecked="{Binding Send}"/>
                  </Grid>
                </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
          </DataGrid.Columns>
        </DataGrid>
        </StackPanel>
    </Window>

    Dazu der ViewModel:

    Imports System.ComponentModel
    Imports System.Collections.ObjectModel
    
    Public Class ViewModel
    
      Private cvs As New CollectionViewSource
    
      Public Sub New()
        Dim rnd As New Random
        Dim col As New ObservableCollection(Of Data)
        For i = 1 To 10
          col.Add(New Data With {.OK = rnd.NextDouble < 0.5, .Send = rnd.NextDouble < 0.5})
        Next
        cvs.Source = col
      End Sub
    
      Public ReadOnly Property View As ICollectionView
        Get
          Return cvs.View
        End Get
      End Property
    
    End Class
    
    Public Class Data
      Public Property OK As Boolean
      Public Property Send As Boolean
    
    End Class
    

    --
    Peter

    Freitag, 28. März 2014 10:01
  • Wow, ich bin überwältigt. Ok, ich glaube ich habe das verstanden. Ich werde das kommende Woche einbauen zu versuchen.

    Supervielen Dank und ein tolles Wochenende.

    Freitag, 28. März 2014 20:02
  • Hi Sabrina,
    das freut mich. Damit andere Mitleser das auch nachvollziehen können, solltest Du aber auch den thread als beantwortet vermerken.

    --
    Peter

    Samstag, 29. März 2014 07:22