Registerseiten im TabControl an Daten binden

Im Artikel “TabControl: Das Registersteuerelement von WPF” haben wir uns die grundlegenden Eigenschaften des Registersteuerelements von .NET und WPF angesehen. Dieses bietet ähnliche Möglichkeiten wie das Registersteuerelement, das Sie vielleicht von Microsoft Access kennen. An einigen Stellen gehen die Möglichkeiten, bedingt durch die größere Flexibilität der Beschreibungssprache XAML, darüber hinaus. So können Sie beispielsweise das TabControl und seine TabItem-Elemente an eine Datenquelle wie eine ObservableCollection binden und die Daten der Objekte dieser Collection sowohl für die Gestaltung der Registerreiter als auch für den eigentlich Inhalt einer jeden Registerseite nutzen.

Unter Microsoft Access müssen Sie, wenn Sie ein Registersteuerelement mit je einer Registerseite pro Datensatz versehen wollen, jede Registerseite per VBA-Code hinzufügen. Das gelingt zwar, aber unter .NET/WPF ist das wesentlich komfortabler zu erledigen.

Dazu legen Sie ein neues WPF-Projekt mit Visual Basic als Sprache an. Die nachfolgenden Elemente fügen wir dem Hauptfenster MainWindow.xaml beziehungsweise der dazu gehörenden Code behind-Klasse MainWindow.xaml.vb hinzu.

Das Ergebnis dieses Artikels soll wie in Bild 1 aussehen.

Bild 1: So soll das TabControl-Element aussehen

Personen-Auflistung als Datenquelle für ein TabControl

Unser Vorhaben ist es, die Elemente einer Klasse namens Person als Datenquelle für ein TabControl-Element zu nutzen. Diese Klasse haben wir wie folgt beschrieben:

Public Class Person
     Public Property ID As Long
     Public Property Vorname As String
     Public Property Nachname As String
     Public Property Bild As String
End Class

Der Datei MainWindow.xaml.vb fügen wir außerdem per Imports-Anweisung den Namespace System.Collections.ObjectModel hinzu, der die für dieses Beispiel benötigte ObservableCollection-Klasse beisteuert:

Imports System.Collections.ObjectModel

In der MainWindow-Klasse schließlich deklarieren wir zunächst die Property für die Personen-Liste. Diese deklarieren wir als Public, da sie als Datenquelle für das TabControl-Element dienen soll. Wir legen mit Person auch gleich den Typ der aufzunehmenden Objekte fest:

Public Class MainWindow
     Public Property Personen As ObservableCollection(Of Person)

Auflistung der anzuzeigenden Personen füllen

Im Konstruktor der Klasse erledigen wir dann Aufgaben, die wir schon in vielen Artikeln durchgeführt haben. Wir deklarieren ein Objekt der Klasse Person und initialisieren das ObservableCollection-Element Personen:

     Public Sub New()
         Dim Person As Person
         Personen = New ObservableCollection(Of Person)

Danach erstellen wir zwei Person-Elemente und weisen diesen die entsprechenden Eigenschaften zu. Für die Eigenschaft Bild geben wir den Pfad von Bilddateien an, die wir im Projektmappen-Explorer in einem separaten Ordner namens Images gespeichert haben.

Damit wir diese so wie hier mit \Images\user_sunglasses.png referenzieren können, müssen Sie für die Bilddateien die Eigenschaft In Ausgabeverzeichnis kopieren auf Immer kopieren oder Kopieren, wenn neuer einstellen (siehe Bild 2).

Bild 2: Einstellung, damit die Bilddateien ins Ausgabeverzeichnis kopiert werden

Der Code zum Anlegen der beiden vorerst benötigten Person-Elemente und zum Hinzufügen der Elemente mit der Add-Methode zur Personen-Liste sieht so aus:

         Person = New Person
         With Person
             .ID = 1
             .Vorname = "André"
             .Nachname = "Minhorst"
             .Bild = "\Images\user_sunglasses.png"
         End With
         Personen.Add(Person)
         Person = New Person
         With Person
             .ID = 2
             .Vorname = "Anja"
             .Nachname = "Minhorst"
             .Bild = "\Images\woman2.png"
         End With
         Personen.Add(Person)

Schließlich rufen wir noch die Methode InitializeComponent auf, damit die XAML-Definition angewendet wird, und stellen die Eigenschaft DataContext des Fensters auf das Code behind-Modul ein:

         InitializeComponent()
         DataContext = Me
     End Sub

Dies zeigt schön, wie die Trennung der Definition der Benutzeroberfläche und der Anwendungslogik unter WPF funktioniert. Wir haben noch keine Elemente zur Benutzeroberfläche hinzugefügt und die Anwendungslogik ist quasi schon fertig. Nun können wir uns an den Entwurf der Benutzeroberfläche begeben.

Layout der Elemente vorbereiten

Wie oben im Bild zu erkennen, wollen wir nicht nur das TabControl-Element, sondern auch noch zwei Schaltflächen hinzufügen, mit denen wir neue Elemente zum TabControl-Element hinzufügen oder vorhandene Elemente entfernen können. Damit die Schaltflächen und das TabControl-Element nicht genau am Rand und aneinander kleben, definieren wir Margin– und Padding-Attribute für alle Elemente dieser Typen:

<Window x:Class="MainWindow" ... Title="MainWindow" Height="250" Width="400">
     <Window.Resources>
         <Style TargetType="Button">
             <Setter Property="Margin" Value="2"></Setter>
             <Setter Property="Padding" Value="5"></Setter>
         </Style>
         <Style TargetType="TabControl">
             <Setter Property="Margin" Value="2"></Setter>
             <Setter Property="Padding" Value="5"></Setter>
         </Style>
     </Window.Resources>

Username or Email

Passwort

Angemeldet bleiben