Formatierungstipps für das "RadioButton"-Steuerelement

Verwenden Sie die integrierten RadioButton -Steuerelementvorlagen, um eine benutzerdefinierte RadioButton -Vorlage zu erstellen. Standardmäßig sieht ein RadioButton -Steuerelement wie folgt aus:

Status des RadioButton-Steuerelements

Standardmäßig kann das RadioButton -Steuerelement in der CommonStates-Statusgruppe einen der vier folgenden Status annehmen. Die Statusgruppe können Sie im Zuständepanel anzeigen, während Sie eine RadioButton -Vorlage ändern:

Zustandsname	Beschreibung
Normal	Das Aussehen des RadioButton -Steuerelements, wenn keine Interaktion mit dem Steuerelement stattfindet.
MouseOver	Das Aussehen des RadioButton -Steuerelements, wenn der Benutzer den Mauszeiger darüber bewegt.
Pressed	Das Aussehen des RadioButton -Steuerelements, wenn der Benutzer darauf klickt oder wenn das Steuerelement Fokus hat und der Benutzer die EINGABE- oder LEERTASTE drückt.
Disabled	Das Aussehen des RadioButton -Steuerelements, wenn die IsEnabled -Eigenschaft auf False gesetzt ist.

Das RadioButton -Steuerelement kann einen der beiden folgenden Status der Statusgruppe FocusStates aufweisen:

Zustandsname	Beschreibung
Unfocused	Das Aussehen des RadioButton -Steuerelements ohne Tastaturfokus.
Focused (Mit Fokus)	Das Aussehen des RadioButton -Steuerelements mit Tastaturfokus. Beispiel: Ein Benutzer drückt die TAB-TASTE, um die Objekte in der Anwendung zu durchlaufen, bis sich ein Tastaturfokus auf dem RadioButton -Steuerelement befindet.

Das RadioButton -Steuerelement kann einen der folgenden drei Status der CheckStates-Statusgruppe aufweisen:

Zustandsname	Beschreibung
Unchecked	Das Aussehen des RadioButton -Steuerelements, wenn die IsChecked-Eigenschaft auf False gesetzt ist.
Checked	Das Aussehen des RadioButton -Steuerelements, wenn die IsChecked-Eigenschaft auf True gesetzt ist.
Indeterminate	Das Aussehen des RadioButton -Steuerelements, wenn die IsThreeState-Eigenschaft auf True gesetzt ist.

Das RadioButton -Steuerelement kann einen der folgenden drei Status der ValidationStates-Statusgruppe aufweisen:

Zustandsname	Beschreibung
Valid	Das Aussehen eines gültigen RadioButton -Steuerelements.
InvalidUnfocused	Das Aussehen eines ungültigen RadioButton -Steuerelements ohne Tastaturfokus.
InvalidFocused	Das Aussehen eines ungültigen RadioButton -Steuerelements mit Tastaturfokus.

Tipp:

Eine Statusgruppe enthält die visuellen Status, die Teil derselben logischen Kategorie sind und die nicht gleichzeitig angezeigt werden können. Beispiel: Die Gruppe CommonStates beinhaltet Zustände, die sich auf die Benutzerinteraktion mit einem Eingabegerät wie der Maus beziehen. Nur ein Status in einer Statusgruppe kann zur gleichen Zeit angezeigt werden, aber ein Status aus einer Gruppe kann zusammen mit einem Status in einer anderen Statusgruppe angezeigt werden.

Wenn Sie einen Status auswählen, wird die Statusaufzeichnung aktiviert, und alle vorgenommen Änderungen werden für diesen Status aufgezeichnet. Um die Statusaufzeichnung zu deaktivieren, klicken Sie auf die Aufzeichnungsschaltfläche , oder wählen Sie im Zuständepanel die Option Basis. Um das Aussehen des Steuerelements zu ändern, wenn zwei getrennte Status aktiv sind, können Sie eine Voransicht eines Status in eine Statusgruppe einpassen, während Sie einen Status in einer anderen Statusgruppe bearbeiten.

Vorlagenbindung

Sie können die Eigenschaften Background , BorderBrush , Foreground , BorderThickness und Padding an die Vorlage binden. Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Objekte in ein RadioButton-Steuerelement

Die folgenden Abbildungen stellen ein Probelayout (Comp) für ein RadioButton-Steuerelement dar, das die Zustände Normal , MouseOver , Pressed , Disabled und Focused enthält:

Normal

MouseOver

Pressed (Gedrückt)

Disabled (Deaktiviert)

Focused (Mit Fokus)

Hinweis:
Beachten Sie, dass die vorangehenden Abbildungen noch keine RadioButton -Steuerelemente darstellen, sondern Vorlagen, die in RadioButton -Steuerelemente konvertiert werden können.

In diesem Beispiel wird XAML-Code in Schritt 4 für das folgende Verfahren verwendet.

1. Öffnen Sie ein neues Microsoft Silverlight-Projekt. Klicken Sie in der Kategorie Pinsel auf Pinsel mit Volltonfarbe. Geben Sie im Textfeld Hexwert des Editors den Wert #FF808080 ein.

2. Doppelklicken Sie im Werkzeugpanel auf ****Grid **** (Raster), um auf der Zeichenfläche einen neuen Container zu erstellen. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Width (Breite) auf Erweiterte Optionen und anschließend auf Zurücksetzen. Wiederholen Sie den Vorgang für Height (Höhe).

3. Suchen Sie in der Codeansicht folgenden Code, und löschen Sie dann den schließenden Schrägstrich (/).

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

4. Kopieren Sie den folgenden Code, und fügen Sie ihn in ein neues Projekt ein, und zwar hinter dem Code, den Sie in Schritt 3 gesucht haben.

   <Grid>
      <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
      <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
   </Grid>
   

5. Fügen Sie ein schließendes Grid -Tag (</Grid>) hinter dem Code ein, den Sie gerade eingefügt haben.

6. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Grid-Objekt (Raster), und klicken Sie dann auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf den Steuerelementtyp RadioButton und anschließend auf OK.

   Beachten Sie, dass der Code in der Codeansicht, den Sie im vorangegangenen Schritt eingefügt haben, durch den Code für ein neues RadioButton-Objekt ersetzt wurde. Das Grid -Objekt wurde zudem von Expression Blend in eine Vorlage für einen neuen RadioButton -Stil konvertiert, und diese Vorlage wurde auf das Grid -Objekt angewendet.

   Das TextBlock -Objekt hatte im ursprünglichen Grid-Objekt einen weißen Vordergrund, sodass die neue RadioButton -Formatvorlage ebenfalls einen weißen Vordergrund aufweist. Der Text des TextBlock -Objekts war Lorem , dieser Text wird nun zur Content -Eigenschaft des neuen RadioButton -Steuerelements. In der Vorlage wurde das TextBlock -Objekt durch ein ContentPresenter -Objekt ersetzt, dass über die gleichen Layouteigenschaften wie das TextBlock -Objekt verfügt.

7. Führen Sie folgende Schritte aus, um einem RadioButton einen MouseOver-Zustand hinzuzufügen:

   1. Klicken Sie im Panel Objekte und Zeitachsen auf Ellipse.

   2. Klicken Sie im Zuständepanel auf MouseOver.

   3. Klicken Sie im Eigenschaftenpanel in der Kategorie Pinsel auf Fill, und legen Sie in der Kategorie Editor für Alpha den Wert 25 fest.

   4. Kehren Sie zum Zuständepanel zurück, und klicken Sie auf Basis, um den Aufzeichnungsmodus zu beenden.

   Hinweis:
   Sie können den Aufzeichnungsmodus auch beenden, indem Sie auf Anzeige für Aufzeichnungsmodus  in der linken oberen Ecke des Dokumentfensters klicken.

8. Klicken Sie mit der rechten Maustaste im Zuständepanel auf MouseOver, klicken Sie auf Zustand kopieren in, und klicken Sie dann auf Pressed.

9. Wählen Sie zunächst im Zuständepanel den Zustand Pressed und anschließend im Panel Objekte und Zeitachsen das Grid-Objekt (Raster) aus, um den Versatz zu erstellen. Legen Sie im Eigenschaftenpanel in der Kategorie Transformation für X und Y den Wert 1 fest. Klicken Sie auf Basis, um den Aufzeichnungsmodus zu beenden. Beachten Sie, dass das Grid-Objekt (Raster) nun in grid umbenannt wurde.

10. Klicken Sie im Zuständepanel auf Disabled (Deaktiviert). Legen Sie in der Kategorie Darstellung des Eigenschaftenpanels für Opacity (Deckkraft) den Wert 50 fest. Klicken Sie auf Basis, um den Aufzeichnungsmodus zu beenden.

11. Klicken Sie im Zuständepanel auf Normal. Klicken Sie auf Übergang hinzufügen und anschließend auf Normal to MouseOver. Legen Sie für die Übergangsdauer den Wert 2 fest. Klicken Sie auf Basis, um den Aufzeichnungsmodus zu beenden.

12. Klicken Sie im Panel Objekte und Zeitachsen auf das Aufzählungszeichen. Legen Sie in der Kategorie Darstellung des Eigenschaftenpanels für Opacity (Deckkraft) den Wert 0 fest.

13. Klicken Sie im Zuständepanel auf Checked. Legen Sie in der Kategorie Darstellung des Eigenschaftenpanels für Opacity (Deckkraft) den Wert 100 fest. Klicken Sie auf Basis, um den Aufzeichnungsmodus zu beenden.

14. Im Probelayout wird die Schaltfläche von einem blauen Rechteck umschlossen, wenn sich das RadioButton-Objekt im Zustand Focused (Mit Fokus) befindet. Fügen Sie bei ausgewähltem Zustand Focused (Mit Fokus) ein neues Rectangle-Objekt hinzu, um das Rechteck zu erstellen. Dieser Vorgang wird als Zustandgebundenes Zeichnen bezeichnet, d. h., das neue Objekt ist nur in dem Zustand sichtbar, in dem es gezeichnet wurde. Klicken Sie im Zuständepanel auf Focused (Mit Fokus), und doppelklicken Sie dann im Werkzeugpanel auf das Rechteckwerkzeug, um das neue Rectangle-Objekt im Zustand Focused zu erstellen.

15. Die nächste Schritt besteht darin, die Eigenschaften des neuen Rechtecks festzulegen. Die Eigenschaften müssen im Zustand Basis, nicht im Zustand Focused (Mit Fokus) geändert werden. Das Rechteck ist jedoch derzeit transparent und im Zustand Basis nicht sichtbar. Klicken Sie auf die Aufzeichnungsschaltfläche , um die Sichtbarkeit des Rechtecks beizubehalten. Beachten Sie, dass das neue Rechteck (rectangle-Objekt) im Panel Objekte und Zeitachsen noch ausgewählt ist. Legen Sie im Eigenschaftenpanel für das rectangle-Objekt folgende Eigenschaften fest:

    • Füllung   Klicken Sie in der Kategorie Pinsel auf Kein Pinsel.

    • Strich   Klicken Sie in der Kategorie Pinsel auf Pinsel mit Volltonfarbe. Legen Sie unter Editor für die Farbe den Wert #FF00C0FF fest.

    • RadiusX   Legen Sie in der Kategorie Darstellung für RadiusX den Wert 2 fest.

    • RadiusX   Legen Sie in der Kategorie Darstellung für RadiusY den Wert 2 fest.

    • Margin   Legen Sie in der Kategorie Layout für Margin (Seitenrand) Folgendes fest:

      • Links    -2

      • Rechts    -2

      • Oben    0

      • Unten    0

16. Klicken Sie auf Bereich auf "<Bereichsname>" zurücksetzen . Wählen Sie im Panel Objekte und Zeitachsen das RadioButton-Steuerelement aus, und drücken Sie die Tastenkombination STRG+C, um das Steuerelement zu kopieren. Drücken Sie viermal STRG+V, um vier weitere RadioButton-Steuerelemente in den Container einzufügen. Verwenden Sie das Auswahlwerkzeug , um die Kontrollkästchen in einer Spalte anzuordnen. Wählen Sie im Panel Objekte und Zeitachsen eines der RadioButton -Objekte aus, und deaktivieren Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften das Kontrollkästchen IsEnabled.

17. Erstellen Sie Ihr Projekt (STRG+UMSCHALT+B), und testen Sie es dann durch Drücken auf F5.

Weitere Informationen zur Anwendung neuer RadioButton -Vorlagen auf andere RadioButton -Objekte finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight  RadioButton -Steuerelements finden Sie in der Silverlight Control Gallery  (Silverlight Steuerelemente und Dialogfelder) in MSDN.

Siehe auch

Aufgaben

Übernehmen von Objekteigenschaften für die Vorlage

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente
Formatieren eines Steuerelements, das Vorlagen unterstützt

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.