{"id":55000280,"date":"2021-08-01T00:00:00","date_gmt":"2021-12-31T14:21:16","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=280"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Das_WPFSteuerelement_CheckBox","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Das_WPFSteuerelement_CheckBox\/","title":{"rendered":"Das WPF-Steuerelement CheckBox"},"content":{"rendered":"

“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.<\/b><\/p>\n

Das CheckBox<\/b>-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.<\/p>\n

Das wir das CheckBox<\/b>-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 <\/b>(unter C#) oder Nothing <\/b>(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!<\/p>\n

CheckBox-Steuerelement anlegen<\/h2>\n

Das CheckBox<\/b>-Steuerelement legen Sie wie alle anderen Steuerelemente auch durch ein entsprechendes XAML-Element an, das logischerweise CheckBox <\/b>heißt und mit x:Name einen Namen erhält, hier chkBeispiel<\/b>:<\/p>\n

<Grid>\r\n     <CheckBox x:Name=\"chkBeispiel\"><\/CheckBox>\r\n<\/Grid><\/pre>\n
Ohne weitere Elemente oder Formatierungen erscheint diese allerdings einfach links oben im Fenster (siehe Bild 1).<\/p>\n
\"Einfache<\/p>\n
Bild 1: Einfache CheckBox<\/span><\/b><\/p>\n
Beschriftung hinzufügen<\/h2>\n
Hier fehlt zumindest eine Beschriftung, die wir per Label<\/b>-Element hinzufügen. Damit die beiden Elemente nebeneinander erscheinen, fassen wir diese in einem StackPanel<\/b>-Element mit horizontaler Ausrichtung zusammen:<\/p>\n
<StackPanel Orientation=\"Horizontal\">\r\n     <Label>Beispiel-Checkbox:<\/Label>\r\n     <CheckBox x:Name=\"chkBeispiel\"><\/CheckBox>\r\n<\/StackPanel><\/pre>\n
CheckBox-Elemente ausrichten<\/h2>\n
Damit erscheint die CheckBox <\/b>allerdings nicht korrekt ausgerichtet (siehe Bild 2). Damit das geschieht, erstellen wir erstens einen Satz von RowDefinition<\/b>-Elementen für das Grid<\/b>, von denen die Höhe der ersten Zeile automatisch an den Inhalt angepasst werden soll. Zweitens stellen für das CheckBox<\/b>-Element das Attribut VerticalAlignment <\/b>auf den Wert Center <\/b>ein:<\/p>\n
\"CheckBox<\/p>\n
Bild 2: CheckBox mit Label<\/span><\/b><\/p>\n
<Grid.RowDefinitions>\r\n     <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n     <RowDefinition Height=\"*\"><\/RowDefinition>\r\n<\/Grid.RowDefinitions>\r\n<StackPanel Orientation=\"Horizontal\">\r\n     <Label>Beispiel-Checkbox:<\/Label>\r\n     <CheckBox x:Name=\"chkBeispiel\" VerticalAlignment=\"Center\"><\/CheckBox>\r\n<\/StackPanel><\/pre>\n
Das Ergebnis entspricht schon eher unseren Wünschen (siehe Bild 3). <\/p>\n
\"Vertikal<\/p>\n
Bild 3: Vertikal ausgerichtete CheckBox mit Label<\/span><\/b><\/p>\n
Mehrere CheckBox-Elemente ausrichten<\/h2>\n
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<\/b>-Elements um zwei Spalten. Dafür werfen wir das StackPanel<\/b>-Element über Bord und teilen die Label<\/b>– und CheckBox<\/b>-Elemente auf die Zellen des Grids auf:<\/p>\n
<Grid.RowDefinitions>\r\n     <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n     <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n     <RowDefinition Height=\"*\"><\/RowDefinition>\r\n<\/Grid.RowDefinitions>\r\n<Grid.ColumnDefinitions>\r\n     <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n     <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n<\/Grid.ColumnDefinitions>\r\n<Label>Beispiel-Checkbox:<\/Label>\r\n<CheckBox x:Name=\"chkBeispiel\" Grid.Column=\"1\" VerticalAlignment=\"Center\"><\/CheckBox>\r\n<Label Grid.Row=\"1\">Zweite Checkbox:<\/Label>\r\n<CheckBox x:Name=\"chkZwei\" Grid.Row=\"1\" Grid.Column=\"1\" VerticalAlignment=\"Center\"><\/CheckBox><\/pre>\n
Damit erhalten wir dann die ordentlich ausgerichteten Label<\/b>– und CheckBox<\/b>-Elemente aus Bild 4.<\/p>\n
\"Mehrere<\/p>\n
Bild 4: Mehrere ausgerichtete CheckBox-Elemente<\/span><\/b><\/p>\n
CheckBox-Elemente links vom Label darstellen<\/h2>\n
Natürlich können Sie diese auch andersherum darstellen, also die CheckBox<\/b>-Elemente auf der linken Seite platzieren. Auch das ist durchaus üblich, zumindest, wenn nur CheckBox<\/b>-Elemente verwendet werden.<\/p>\n
Das hätte auch den Vorteil, dass die CheckBox<\/b>– und die Label<\/b>-Elemente auch bei Verwendung von StackPanel<\/b>-Elementen immer korrekt ausgerichtet sind:<\/p>\n
<StackPanel Orientation=\"Vertical\">\r\n     <StackPanel Orientation=\"Horizontal\">\r\n         <CheckBox x:Name=\"chkBeispiel\" VerticalAlignment=\"Center\"><\/CheckBox>\r\n         <Label>Beispiel-Checkbox<\/Label>\r\n     <\/StackPanel>\r\n     <StackPanel Orientation=\"Horizontal\">\r\n         <CheckBox x:Name=\"chkZwei\" VerticalAlignment=\"Center\"><\/CheckBox>\r\n         <Label>Zweite Checkbox<\/Label>\r\n     <\/StackPanel>\r\n<\/StackPanel><\/pre>\n
Das Ergebnis finden Sie in Bild 5.<\/p>\n
\"CheckBox-Elemente<\/p>\n
Bild 5: CheckBox-Elemente auf der linken Seite<\/span><\/b><\/p>\n
Das gelingt allerdings auch noch einfacher, denn wir können die Beschriftung in diesem Fall auch als Inhalt des CheckBox-Elements angeben. Der Code dazu sieht so aus:<\/p>\n
<StackPanel Orientation=\"Vertical\">\r\n     <CheckBox x:Name=\"chkBeispiel\">Beispiel-CheckBox<\/CheckBox>\r\n     <CheckBox x:Name=\"chkZwei\">Zweite Checkbox<\/CheckBox>\r\n<\/StackPanel><\/pre>\n
Verschiedene Zustände der CheckBox per XAML einstellen<\/h2>\n
Wie weiter oben erwähnt, kann das CheckBox<\/b>-Steuerelement drei verschiedene Status einnehmen. Diese legen Sie im XAML-Code mit dem Attribut IsChecked <\/b>fest. Die drei möglichen Werte lauten dort:<\/p>\n