{"id":55000290,"date":"2021-12-01T00:00:00","date_gmt":"2022-03-31T21:33:19","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=290"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"TabControl_Das_Registersteuerelement_von_WPF","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/TabControl_Das_Registersteuerelement_von_WPF\/","title":{"rendered":"TabControl: Das Registersteuerelement von WPF"},"content":{"rendered":"

Genau wie unter Microsoft Access finden Sie auch unter WPF ein Registersteuerelement – das sogenannte TabControl-Element. Sie können dieses Steuerelement vielseitig einsetzen, um beispielsweise Inhalte, die sonst nicht auf einer Bildschirmseite Platz finden, dennoch halbwegs übersichtlich darzustellen. Dieser Artikel stellt das Registersteuerelement von WPF vor und zeigt, wie Sie es in Ihren eigenen Anwendungen nutzen können.<\/b><\/p>\n

Das leere TabControl-Element<\/h2>\n

Wenn wir einem Grid in einem XAML-Fenster ein TabControl<\/b>-Element hinzufügen, bekommen wir auf jeden Fall wesentlich weniger geboten, als wenn wir ein solches beispielsweise einem Access-Formular hinzufügen:<\/p>\n

<Grid>\r\n     <TabControl Margin=\"5\"><\/TabControl>\r\n<\/Grid> <\/pre>\n
Wir müssen diesem schon per Margin<\/b>-Attribut einen Abstand zum Fensterrahmen hinzufügen, damit wir erkennen können, dass es überhaupt vorhanden ist (siehe Bild 1).<\/p>\n
\"Ein<\/p>\n
Bild 1: Ein leeres TabControl-Element<\/span><\/b><\/p>\n
Ein TabItem-Element hinzufügen<\/h2>\n
Erst wenn wir dem TabControl<\/b>-Element ein TabItem<\/b>-Element unterordnen, erkennen wir, dass es sich bei dem angezeigten Rahmen um ein TabControl<\/b>-Element handelt:<\/p>\n
<TabControl Margin=\"5\">\r\n     <TabItem Header=\"Seite 1\"><\/TabItem>\r\n<\/TabControl><\/pre>\n
Dem TabItem<\/b>-Element weisen wir über das Header<\/b>-Attribut den Text für den Registerreiter zu (siehe Bild 2).<\/p>\n
\"Ein<\/p>\n
Bild 2: Ein TabControl-Element mit einem TabItem-Element<\/span><\/b><\/p>\n
Auf die gleiche Weise legen Sie weitere Registerreiter an, die wie in Bild 3 erscheinen:<\/p>\n
\"Mehrere<\/p>\n
Bild 3: Mehrere TabItem-Elemente<\/span><\/b><\/p>\n
<TabControl Margin=\"5\">\r\n     <TabItem Header=\"Seite 1\"><\/TabItem>\r\n     <TabItem Header=\"Seite 2\"><\/TabItem>\r\n     <TabItem Header=\"Seite 3\"><\/TabItem>\r\n     <TabItem Header=\"Seite 4\"><\/TabItem>\r\n<\/TabControl><\/pre>\n
Um im Entwurf der XAML-Seite zu einer anderen Registerseite als der ersten zu wechseln, klicken Sie entweder auf den jeweiligen Registerreiter – also so, wie Sie es auch später in der laufenden Anwendung erledigen würden – oder Sie positionieren die Einfügemarke auf einem der TabItem<\/b>-Elemente im XAML-Code.<\/p>\n
Steuerelemente zu einem TabItem-Element hinzufügen<\/h2>\n
Allerdings können wir so nicht erkennen, ob tatsächlich der Inhalt der jeweiligen Registerseite angezeigt wird. Um dies zu erreichen, fügen wir jedem TabItem<\/b>-Element zunächst ein Label<\/b>-Steuerelement mit einer passenden Beschriftung hinzu:<\/p>\n
<TabItem Header=\"Seite 1\">\r\n     <Label>Dies ist die erste Seite.<\/Label>\r\n<\/TabItem>\r\n<TabItem Header=\"Seite 2\">\r\n     <Label>Dies ist die zweite Seite.<\/Label>\r\n<\/TabItem>\r\n<TabItem Header=\"Seite 3\">\r\n     <Label>Dies ist die dritte Seite.<\/Label>\r\n<\/TabItem>\r\n<TabItem Header=\"Seite 4\">\r\n     <Label>Dies ist die vierte Seite.<\/Label>\r\n<\/TabItem><\/pre>\n
Ein Klick auf die zweite Registerseite zeigt wie erwartet das zu dieser Seite hinzugefügte Label<\/b>-Steuerelement an (siehe Bild 4).<\/p>\n
\"TabItem-Element<\/p>\n
Bild 4: TabItem-Element mit Steuerelement<\/span><\/b><\/p>\n
Nur ein Element je TabItem-Element<\/h2>\n
Dass es möglich ist, einfach Steuerelemente im TabItem<\/b>-Element zu platzieren, liegt daran, dass das TabItem<\/b>-Steuerelement vom ContentControl<\/b>-Element abstammt. Das bedeutet gleichzeitig, dass Sie in jedem TabItem<\/b>-Element aber auch nur ein einziges Steuerelement unterbringen dürfen. Wenn Sie wie in Bild 5 noch ein TextBox<\/b>-Steuerelement hinzufügen möchten, erhalten Sie dementsprechend direkt eine Fehlermeldung. Das ist allerdings kein Problem, denn auch einem Window<\/b>-Element, also dem Hauptelement eines XAML-Fensters, können Sie ja nur ein Element unterordnen. Aber wozu gibt es Elemente, die zum Organisieren mehrerer untergeordneter Elemente vorgesehen sind wie Grid<\/b>, StackPanel <\/b>und so weiter<\/p>\n
\"Das<\/p>\n
Bild 5: Das TabItem-Element kann nur ein Unterelement aufnehmen.<\/span><\/b><\/p>\n
Registerreiter anpassen <\/h2>\n
Wenn Sie von Access kommen, wird Ihnen allein die Idee, die Registerreiter anzupassen, ungewohnt vorkommen – dort war das höchste der Gefühle, den angezeigten Text und die Schriftgröße und -art einzustellen. Unter WPF bieten sich naturgemäß einige zusätzliche Möglichkeiten. Wie wäre es beispielsweise mit ein paar Icons, mit denen der Benutzer noch schneller die gewünschte Registerseite finden kann Kein Problem: Fügen wir den Registerreitern Icons hinzu!<\/p>\n
Registerreiter mit Icons<\/h2>\n
Um die Registerreiter mit Icons auszustatten, müssen wir dem Projekt zunächst entsprechende Ressourcen hinzufügen. Für diese legen wir einen Ordner namens Images <\/b>an. In diesen ziehen Sie die gewünschten Bilddateien, sodass der Projektmappen-Explorer anschließend wie in Bild 6 aussieht.<\/p>\n
\"Images<\/p>\n
Bild 6: Images für die Registerreiter<\/span><\/b><\/p>\n
Danach passen Sie den Code des TabItem<\/b>-Elements an, indem Sie das Header<\/b>-Attribut, das ja nun nicht mehr nur einen Text aufnehmen soll, sondern ein Icon und einen Text, entfernen und stattdessen ein Property-Element namens TabItem.Header <\/b>zum TabItem<\/b>-Element hinzufügen. Wie schon beim TabItem<\/b>-Element gesehen, können Sie auch dem Property-Element TabItem.Header <\/b>nur ein einziges Element unterordnen. Allerdings kann es sich hierbei auch beispielsweise um ein StackPanel<\/b>-Element handeln, mit dem wir das Icon und die Beschriftung nebeneinander anordnen können. Dafür ist die Einstellung des Attributs Orientation <\/b>des StackPanel<\/b>-Elements auf den Wert Horizontal <\/b>notwendig.<\/p>\n
Die Definition für den ersten Registerreiter sieht dann wie folgt aus:<\/p>\n
<TabControl Margin=\"5\">\r\n     <TabItem>\r\n         <TabItem.Header>\r\n             <StackPanel Orientation=\"Horizontal\">\r\n                 <Image Source=\"Images\\keyboard_key_1.png\"><\/Image>\r\n                 <Label>Seite 1<\/Label>\r\n             <\/StackPanel>\r\n         <\/TabItem.Header>\r\n         <Label>Dies ist die erste Seite.<\/Label>\r\n     <\/TabItem>\r\n     ...\r\n<\/TabControl><\/pre>\n
Wenn wir alle vier Registerreiter mit den passenden Icons ausstatten, sieht dies schließlich wie in Bild 7 aus.<\/p>\n
\"Registerreiter<\/p>\n
Bild 7: Registerreiter mit Icons<\/span><\/b><\/p>\n
Hier gibt es noch viel mehr Möglichkeiten – eigentlich können Sie alle möglichen Elemente zu einem Registerreiter beziehungsweise zu einem TabItem<\/b>-Element hinzufügen. Ob das sinnvoll ist, sei dahingestellt, aber die Anzeige mit Icons und Beschriftung sieht bereits recht professionell aus.<\/p>\n
Das TabControl mit Visual Basic programmieren<\/h2>\n
In den folgenden Abschnitten schauen wir uns verschiedene Möglichkeiten für den Zugriff auf das TabControl<\/b>-Element und seine Steuerung an. Dabei behandeln wir die folgenden Themen:<\/p>\n