Lies in den Artikel rein und unten bekommst Du ein unschlagbares Angebot!
“Ja oder Nein – das ist hier die Frage!” Oder doch vielleicht Wenn es um ein Steuerelement für Ja oder Nein, Wahr oder Falsch, 0 oder -1 geht, ist das Kontrollkästchen die erste Wahl. Oder, wie es in WPF heißt: CheckBox. Mit dem CheckBox-Steuerelement lassen sich üblicherweise zwei Zustände abbilden, die entweder durch einen Haken oder eben durch ein leeres Kästchen dargestellt werden. Ganz nebenbei bemerkt, kann man Kontrollkästchen auch noch für einen dritten Zustand verwenden, nämlich Null oder Nothing – je nach Programmiersprache. Dieser Artikel zeigt, was Sie mit dem CheckBox-Steuerelement von WPF anstellen können.
Das CheckBox-Steuerelement ist, was die Möglichkeiten für den Inhalt angeht, eines der einfacheren Steuerelemente von WPF – zumindest unter den Steuerelementen, die Sie an Daten binden können. Warum wir dieses erst im fünften Jahr dieses Magazins untersuchen, kann nur daran liegen, dass es so einfach scheint – dabei gibt es durchaus Eigenschaften, die nicht offensichtlich sind und die wir in diesem Artikel genauer untersuchen wollen.
Das wir das CheckBox-Steuerelement nun unter die Lupe nehmen, liegt daran, dass wir in einem anderen Artikel eine wichtige Eigenschaft benötigten, nämlich den dreifachen Zustand: Ist dieser aktiviert, kann das Steuerelement nicht nur die Werte Wahr und Falsch abbilden, sondern auch noch einen dritten Wert, der “nicht Wahr und nicht Falsch” oder auch Null (unter C#) oder Nothing (unter Visual Basic) lautet. Diesen benötigten wir in einer Suche, wo wir Kunden danach filtern wollten, ob sie einen Newsletter abonniert haben oder nicht. Und natürlich sollte die Suche auch ermöglichen, alle Kunden anzuzeigen, also mit und ohne Newsletterabonnement. Genau dazu brauchten wir den dritten Zustand des Kontrollkästchens. Doch eins nach dem anderen!
CheckBox-Steuerelement anlegen
Das CheckBox-Steuerelement legen Sie wie alle anderen Steuerelemente auch durch ein entsprechendes XAML-Element an, das logischerweise CheckBox heißt und mit x:Name einen Namen erhält, hier chkBeispiel:
<Grid>
<CheckBox x:Name="chkBeispiel"></CheckBox>
</Grid>
Ohne weitere Elemente oder Formatierungen erscheint diese allerdings einfach links oben im Fenster (siehe Bild 1).
Bild 1: Einfache CheckBox
Beschriftung hinzufügen
Hier fehlt zumindest eine Beschriftung, die wir per Label-Element hinzufügen. Damit die beiden Elemente nebeneinander erscheinen, fassen wir diese in einem StackPanel-Element mit horizontaler Ausrichtung zusammen:
<StackPanel Orientation="Horizontal">
<Label>Beispiel-Checkbox:</Label>
<CheckBox x:Name="chkBeispiel"></CheckBox>
</StackPanel>
CheckBox-Elemente ausrichten
Damit erscheint die CheckBox allerdings nicht korrekt ausgerichtet (siehe Bild 2). Damit das geschieht, erstellen wir erstens einen Satz von RowDefinition-Elementen für das Grid, von denen die Höhe der ersten Zeile automatisch an den Inhalt angepasst werden soll. Zweitens stellen für das CheckBox-Element das Attribut VerticalAlignment auf den Wert Center ein:
Bild 2: CheckBox mit Label
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label>Beispiel-Checkbox:</Label>
<CheckBox x:Name="chkBeispiel" VerticalAlignment="Center"></CheckBox>
</StackPanel>
Das Ergebnis entspricht schon eher unseren Wünschen (siehe Bild 3).
Bild 3: Vertikal ausgerichtete CheckBox mit Label
Mehrere CheckBox-Elemente ausrichten
Wollen Sie jedoch mehrere Kontrollkästchen untereinander darstellen, wobei die Beschriftungen links und die Kontrollkästchen bündig dargestellt werden, benötigen wir eine Erweiterung des Grid-Elements um zwei Spalten. Dafür werfen wir das StackPanel-Element über Bord und teilen die Label– und CheckBox-Elemente auf die Zellen des Grids auf:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label>Beispiel-Checkbox:</Label>
<CheckBox x:Name="chkBeispiel" Grid.Column="1" VerticalAlignment="Center"></CheckBox>
<Label Grid.Row="1">Zweite Checkbox:</Label>
<CheckBox x:Name="chkZwei" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center"></CheckBox>
Damit erhalten wir dann die ordentlich ausgerichteten Label– und CheckBox-Elemente aus Bild 4.
Bild 4: Mehrere ausgerichtete CheckBox-Elemente
CheckBox-Elemente links vom Label darstellen