![\"So](\"..\/fileadmin\/_temp_\/2021_06\/pic_291_001.png\")
<\/p>\nIm 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.<\/b><\/p>\n
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.<\/p>\n
Dazu legen Sie ein neues WPF-Projekt mit Visual Basic als Sprache an. Die nachfolgenden Elemente fügen wir dem Hauptfenster MainWindow.xaml <\/b>beziehungsweise der dazu gehörenden Code behind-Klasse MainWindow.xaml.vb <\/b>hinzu.<\/p>\n
Das Ergebnis dieses Artikels soll wie in Bild 1 aussehen.<\/p>\n
<\/p>\n
Bild 1: So soll das TabControl-Element aussehen<\/span><\/b><\/p>\n Unser Vorhaben ist es, die Elemente einer Klasse namens Person als Datenquelle für ein TabControl<\/b>-Element zu nutzen. Diese Klasse haben wir wie folgt beschrieben:<\/p>\n Der Datei MainWindow.xaml.vb <\/b>fügen wir außerdem per Imports<\/b>-Anweisung den Namespace System.Collections.ObjectModel <\/b>hinzu, der die für dieses Beispiel benötigte ObservableCollection<\/b>-Klasse beisteuert:<\/p>\n In der MainWindow<\/b>-Klasse schließlich deklarieren wir zunächst die Property für die Personen<\/b>-Liste. Diese deklarieren wir als Public, da sie als Datenquelle für das TabControl-Element dienen soll. Wir legen mit Person <\/b>auch gleich den Typ der aufzunehmenden Objekte fest:<\/p>\n Im Konstruktor der Klasse erledigen wir dann Aufgaben, die wir schon in vielen Artikeln durchgeführt haben. Wir deklarieren ein Objekt der Klasse Person <\/b>und initialisieren das ObservableCollection<\/b>-Element Personen<\/b>:<\/p>\n Danach erstellen wir zwei Person<\/b>-Elemente und weisen diesen die entsprechenden Eigenschaften zu. Für die Eigenschaft Bild <\/b>geben wir den Pfad von Bilddateien an, die wir im Projektmappen-Explorer in einem separaten Ordner namens Images <\/b>gespeichert haben.<\/p>\n Damit wir diese so wie hier mit \\Images\\user_sunglasses.png <\/b>referenzieren können, müssen Sie für die Bilddateien die Eigenschaft In Ausgabeverzeichnis kopieren <\/b>auf Immer kopieren <\/b>oder Kopieren, wenn neuer <\/b>einstellen (siehe Bild 2).<\/p>\n Bild 2: Einstellung, damit die Bilddateien ins Ausgabeverzeichnis kopiert werden<\/span><\/b><\/p>\n Der Code zum Anlegen der beiden vorerst benötigten Person<\/b>-Elemente und zum Hinzufügen der Elemente mit der Add<\/b>-Methode zur Personen<\/b>-Liste sieht so aus:<\/p>\n Schließlich rufen wir noch die Methode InitializeComponent <\/b>auf, damit die XAML-Definition angewendet wird, und stellen die Eigenschaft DataContext <\/b>des Fensters auf das Code behind-Modul ein:<\/p>\n 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.<\/p>\n Wie oben im Bild zu erkennen, wollen wir nicht nur das TabControl<\/b>-Element, sondern auch noch zwei Schaltflächen hinzufügen, mit denen wir neue Elemente zum TabControl<\/b>-Element hinzufügen oder vorhandene Elemente entfernen können. Damit die Schaltflächen und das TabControl<\/b>-Element nicht genau am Rand und aneinander kleben, definieren wir Margin<\/b>– und Padding<\/b>-Attribute für alle Elemente dieser Typen:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>Personen-Auflistung als Datenquelle für ein TabControl<\/h2>\n
Public Class<\/span> Person\r\n Public <\/span>Property ID As Long<\/span>\r\n Public <\/span>Property Vorname As String<\/span>\r\n Public <\/span>Property Nachname As String<\/span>\r\n Public <\/span>Property Bild As String<\/span>\r\nEnd Class<\/span><\/pre>\nImports System.Collections.ObjectModel<\/pre>\n
Public Class<\/span> MainWindow\r\n Public <\/span>Property Personen As <\/span>ObservableCollection(Of Person)<\/pre>\nAuflistung der anzuzeigenden Personen füllen<\/h2>\n
Public <\/span>Sub New()\r\n Dim <\/span>Person As <\/span>Person\r\n Personen = New<\/span> ObservableCollection(Of Person)<\/pre>\n![\"Einstellung,](\"..\/fileadmin\/_temp_\/2021_06\/pic_291_002.png\")
<\/p>\n Person = New<\/span> Person\r\n With<\/span> Person\r\n .ID = 1\r\n .Vorname = \"André\"\r\n .Nachname = \"Minhorst\"\r\n .Bild = \"\\Images\\user_sunglasses.png\"\r\n End With<\/span>\r\n Personen.Add(Person)\r\n Person = New<\/span> Person\r\n With<\/span> Person\r\n .ID = 2\r\n .Vorname = \"Anja\"\r\n .Nachname = \"Minhorst\"\r\n .Bild = \"\\Images\\woman2.png\"\r\n End With<\/span>\r\n Personen.Add(Person)<\/pre>\n InitializeComponent()\r\n DataContext = Me\r\n End Sub<\/pre>\n
Layout der Elemente vorbereiten<\/h2>\n
<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"250\" Width=\"400\">\r\n <Window.Resources>\r\n <Style TargetType=\"Button\">\r\n <Setter Property=\"Margin\" Value=\"2\"><\/Setter>\r\n <Setter Property=\"Padding\" Value=\"5\"><\/Setter>\r\n <\/Style>\r\n <Style TargetType=\"TabControl\">\r\n <Setter Property=\"Margin\" Value=\"2\"><\/Setter>\r\n <Setter Property=\"Padding\" Value=\"5\"><\/Setter>\r\n <\/Style>\r\n <\/Window.Resources><\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t