TabControl: Das Registersteuerelement von WPF

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.

Das leere TabControl-Element

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

<Grid>
     <TabControl Margin="5"></TabControl>
</Grid> 

Wir müssen diesem schon per Margin-Attribut einen Abstand zum Fensterrahmen hinzufügen, damit wir erkennen können, dass es überhaupt vorhanden ist (siehe Bild 1).

Ein leeres TabControl-Element

Bild 1: Ein leeres TabControl-Element

Ein TabItem-Element hinzufügen

Erst wenn wir dem TabControl-Element ein TabItem-Element unterordnen, erkennen wir, dass es sich bei dem angezeigten Rahmen um ein TabControl-Element handelt:

<TabControl Margin="5">
     <TabItem Header="Seite 1"></TabItem>
</TabControl>

Dem TabItem-Element weisen wir über das Header-Attribut den Text für den Registerreiter zu (siehe Bild 2).

Ein TabControl-Element mit einem TabItem-Element

Bild 2: Ein TabControl-Element mit einem TabItem-Element

Auf die gleiche Weise legen Sie weitere Registerreiter an, die wie in Bild 3 erscheinen:

Mehrere TabItem-Elemente

Bild 3: Mehrere TabItem-Elemente

<TabControl Margin="5">
     <TabItem Header="Seite 1"></TabItem>
     <TabItem Header="Seite 2"></TabItem>
     <TabItem Header="Seite 3"></TabItem>
     <TabItem Header="Seite 4"></TabItem>
</TabControl>

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-Elemente im XAML-Code.

Steuerelemente zu einem TabItem-Element hinzufügen

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-Element zunächst ein Label-Steuerelement mit einer passenden Beschriftung hinzu:

<TabItem Header="Seite 1">
     <Label>Dies ist die erste Seite.</Label>
</TabItem>
<TabItem Header="Seite 2">
     <Label>Dies ist die zweite Seite.</Label>
</TabItem>
<TabItem Header="Seite 3">
     <Label>Dies ist die dritte Seite.</Label>
</TabItem>
<TabItem Header="Seite 4">
     <Label>Dies ist die vierte Seite.</Label>
</TabItem>

Ein Klick auf die zweite Registerseite zeigt wie erwartet das zu dieser Seite hinzugefügte Label-Steuerelement an (siehe Bild 4).

TabItem-Element mit Steuerelement

Bild 4: TabItem-Element mit Steuerelement

Nur ein Element je TabItem-Element

Dass es möglich ist, einfach Steuerelemente im TabItem-Element zu platzieren, liegt daran, dass das TabItem-Steuerelement vom ContentControl-Element abstammt. Das bedeutet gleichzeitig, dass Sie in jedem TabItem-Element aber auch nur ein einziges Steuerelement unterbringen dürfen. Wenn Sie wie in Bild 5 noch ein TextBox-Steuerelement hinzufügen möchten, erhalten Sie dementsprechend direkt eine Fehlermeldung. Das ist allerdings kein Problem, denn auch einem Window-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, StackPanel und so weiter

Das TabItem-Element kann nur ein Unterelement aufnehmen.

Bild 5: Das TabItem-Element kann nur ein Unterelement aufnehmen.

Registerreiter anpassen

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!

Registerreiter mit Icons

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 an. In diesen ziehen Sie die gewünschten Bilddateien, sodass der Projektmappen-Explorer anschließend wie in Bild 6 aussieht.

Images für die Registerreiter

Bild 6: Images für die Registerreiter

Danach passen Sie den Code des TabItem-Elements an, indem Sie das Header-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 zum TabItem-Element hinzufügen. Wie schon beim TabItem-Element gesehen, können Sie auch dem Property-Element TabItem.Header nur ein einziges Element unterordnen. Allerdings kann es sich hierbei auch beispielsweise um ein StackPanel-Element handeln, mit dem wir das Icon und die Beschriftung nebeneinander anordnen können. Dafür ist die Einstellung des Attributs Orientation des StackPanel-Elements auf den Wert Horizontal notwendig.

Die Definition für den ersten Registerreiter sieht dann wie folgt aus:

<TabControl Margin="5">
     <TabItem>
         <TabItem.Header>
             <StackPanel Orientation="Horizontal">
                 <Image Source="Images\keyboard_key_1.png"></Image>
                 <Label>Seite 1</Label>
             </StackPanel>
         </TabItem.Header>
         <Label>Dies ist die erste Seite.</Label>
     </TabItem>
     ...
</TabControl>

Wenn wir alle vier Registerreiter mit den passenden Icons ausstatten, sieht dies schließlich wie in Bild 7 aus.

Registerreiter mit Icons

Bild 7: Registerreiter mit Icons

Hier gibt es noch viel mehr Möglichkeiten – eigentlich können Sie alle möglichen Elemente zu einem Registerreiter beziehungsweise zu einem TabItem-Element hinzufügen. Ob das sinnvoll ist, sei dahingestellt, aber die Anzeige mit Icons und Beschriftung sieht bereits recht professionell aus.

Das TabControl mit Visual Basic programmieren

In den folgenden Abschnitten schauen wir uns verschiedene Möglichkeiten für den Zugriff auf das TabControl-Element und seine Steuerung an. Dabei behandeln wir die folgenden Themen:

  • Ermitteln des Index der aktuellen Seite des TabControl-Elements
  • Eine bestimmte Seite im TabControl-Element einstellen
  • Weitere Informationen über das selektierte TabItem-Element ermitteln
  • Ereignis beim Wechsel des TabItem-Elements
  • Kein TabItem-Element markieren
  • TabItem-Elemente per Code hinzufügen
  • TabItem-Elemente per Code entfernen

Für diese Beispiele haben wir das Fenster ein wenig umstrukturiert. Wir haben dem Grid zwei RowDefinition-Elemente hinzugefügt, von denen das obere nun das TabControl-Element aufnimmt und das untere ein StackPanel-Element, dem wir im weiteren Verlauf einige Schaltflächen hinzufügen. Für das TabControl-Element haben wir außerdem den Namen tab eingestellt:

<TabControl x:Name="tab" Grid.Row="0">

Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!
Hier geht es zur Bestellung des Jahresabonnements des Magazins DATENBANKENTWICKLER:
Zur Bestellung ...
Danach greifen Sie sofort auf alle rund 200 Artikel unseres Angebots zu - auch auf diesen hier!
Oder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:

Schreibe einen Kommentar