{"id":55000281,"date":"2021-08-01T00:00:00","date_gmt":"2021-12-31T14:21:21","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=281"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Optionsgruppen_mit_GroupBox_und_RadioButtons","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Optionsgruppen_mit_GroupBox_und_RadioButtons\/","title":{"rendered":"Optionsgruppen mit GroupBox und RadioButtons"},"content":{"rendered":"

Wer von Access kommt, hat vermutlich hier und da Optionsgruppen genutzt. Ein solches Steuerelement bietet WPF nicht direkt an. Allerdings gibt es Elemente, mit dem wir Optionsgruppen nachbauen können. Dabei handelt es sich um das GroupBox- und RadioButton-Steuerelement. Wie Sie damit Optionsgruppen mit Optionen nachbilden, zeigen wir in diesem Artikel.<\/b><\/p>\n

Einfache Optionsgruppe mit dem GroupBox-Element<\/h2>\n

Wenn wir von Optionsgruppen reden, benötigen wir auch noch Optionsfelder. Diese bilden wir unter WPF mit dem RadioButton<\/b>-Element ab. In der Definition einer Optionsgruppe können wir nicht einfach die benötigten RadioButton<\/b>-Elemente unter dem GroupBox<\/b>-Element anordnen. Der Grund dafür ist, dass das GroupBox<\/b>-Element nur ein weiteres Element direkt aufnehmen kann – also beispielsweise ein StackPanel<\/b>-Element, um die Optionsfelder wie in Bild 1 nebeneinander oder untereinander anzuordnen.<\/p>\n

\"Einfache<\/p>\n

Bild 1: Einfache GroupBox-Beispiele<\/span><\/b><\/p>\n

Die GroupBox<\/b> mit horizontal angeordneten Elementen erhalten wir mit dem folgenden Code:<\/p>\n

<GroupBox Header=\"Ein GroupBox-Element\">\r\n     <StackPanel Orientation=\"Horizontal\">\r\n         <RadioButton>Herr<\/RadioButton>\r\n         <RadioButton>Frau<\/RadioButton>\r\n         <RadioButton>Divers<\/RadioButton>\r\n     <\/StackPanel>\r\n<\/GroupBox><\/pre>\n
Damit die Elemente den Abstand wie in der Abbildung angezeigt erhalten, haben wir noch das Attribut Margin <\/b>für alle Elemente des Typs RadioButton <\/b>angepasst – und gleich auch noch den inneren und äußeren Abstand des GroupBox<\/b>-Elements:<\/p>\n
<Window.Resources>\r\n     <Style TargetType=\"GroupBox\">\r\n         <Setter Property=\"Margin\" Value=\"5\"><\/Setter>\r\n         <Setter Property=\"Padding\" Value=\"5\"><\/Setter>\r\n     <\/Style>\r\n     <Style TargetType=\"RadioButton\">\r\n         <Setter Property=\"Margin\" Value=\"0,0,5,0\"><\/Setter>\r\n     <\/Style>\r\n<\/Window.Resources><\/pre>\n
Die Definition der GroupBox <\/b>mit vertikal angeordneten Elementen lautet wie folgt, wobei der Unterschied im Wert für das Attribut Orientation <\/b>des StackPanel<\/b>-Elements liegt:<\/p>\n
<GroupBox Header=\"Noch ein GroupBox-Element\" Grid.Row=\"1\">\r\n     <StackPanel Orientation=\"Vertical\">\r\n         <RadioButton>Herr<\/RadioButton>\r\n         <RadioButton>Frau<\/RadioButton>\r\n         <RadioButton>Divers<\/RadioButton>\r\n     <\/StackPanel>\r\n<\/GroupBox><\/pre>\n
Wie wir aus den Beispielen erkennen können, bietet das GroupBox<\/b>-Element primär einen Rahmen und die Möglichkeit, oben in diesem Rahmen eine Bezeichnung einzufügen – und zwar mit dem Attribut Header<\/b>.<\/p>\n
GroupBox mit CheckBox-Elementen<\/h2>\n
Alternativ zu den RadioButton<\/b>-Elementen können Sie auch CheckBox<\/b>-Elemente nutzen:<\/p>\n
<GroupBox Header=\"GroupBox mit CheckBox-Elementen\" Grid.Row=\"2\">\r\n     <StackPanel Orientation=\"Vertical\">\r\n         <CheckBox>Herr<\/CheckBox>\r\n         <CheckBox>Frau<\/CheckBox>\r\n         <CheckBox>Divers<\/CheckBox>\r\n     <\/StackPanel>\r\n<\/GroupBox><\/pre>\n
Diese erscheinen wie in Bild 3.<\/p>\n
\"GroupBox<\/p>\n
Bild 2: GroupBox mit CheckBox-Elementen<\/span><\/b><\/p>\n
Header der GroupBox gestalten<\/h2>\n
Das Header<\/b>-Element der GroupBox <\/b>können Sie im Gegensatz zu dem der Optionsgruppe aus Access beliebig gestalten. Dazu nehmen Sie das Attribut aus dem eigentlichen Element heraus und formulieren es als Property Element. Hier können Sie dann beispielsweise Attribute definieren, welche die Schriftart für den Inhalt des Headers festlegen. In folgendem Beispiel haben wir im Element GroupBox.Header <\/b>ein Label<\/b>-Element hinzugefügt und dessen Attribut FontWeight <\/b>auf Bold <\/b>eingestellt:<\/p>\n
<GroupBox Grid.Row=\"2\">\r\n     <GroupBox.Header>\r\n         <Label FontWeight=\"Bold\">GroupBox mit fetter Überschrift<\/Label>\r\n     <\/GroupBox.Header>\r\n     <StackPanel Orientation=\"Vertical\">\r\n         ...\r\n     <\/StackPanel>\r\n<\/GroupBox><\/pre>\n
Das Ergebnis sehen Sie in Bild 2.<\/p>\n
\"GroupBox<\/p>\n
Bild 3: GroupBox mit fetter Überschrift<\/span><\/b><\/p>\n
Und Sie können nicht nur die Schriftart der Überschrift der Optionsgruppe nach Belieben gestalten. Sie können dem Header<\/b>-Element auch noch beliebige andere Elemente unterordnen – so können Sie beispielsweise auch noch ein Bild hinzufügen. Das Bild hinterlegen wir in einem neuen Ordner im Projekt namens images<\/b>. Der Code zum Anzeigen des dort hinzugefügten Bildes sieht wie folgt aus:<\/p>\n
<GroupBox Grid.Row=\"2\">\r\n     <GroupBox.Header>\r\n         <StackPanel Orientation=\"Horizontal\">\r\n             <Image Source=\"images\/users_meeting.png\"><\/Image>\r\n             <Label FontWeight=\"Bold\">GroupBox mit fetter Überschrift<\/Label>\r\n         <\/StackPanel>\r\n     <\/GroupBox.Header>\r\n     <StackPanel Orientation=\"Vertical\">\r\n     ...\r\n     <\/StackPanel>\r\n<\/GroupBox><\/pre>\n
Das Property Element GroupBox.Header <\/b>kann ebenfalls nur ein Element in der ersten Ebene enthalten, daher fassen wir das Image<\/b>– und das Label<\/b>-Element in einem StackPanel<\/b>-Element mit horizontaler Orientierung zusammen. Das Header<\/b>-Element mit Bild und Text sehen Sie in Bild 4.<\/p>\n
\"GroupBox<\/p>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\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
\n\n\t\t\n\t\t