Formatierungstipps für das "CheckBox"-Steuerelement

Verwenden Sie die integrierte CheckBox -Steuerelementvorlage, um eine benutzerdefinierte CheckBox -Vorlage (Schiebeleistenvorlage) zu erstellen. Standardmäßig sieht ein CheckBox -Steuerelement wie folgt aus:

Status des "CheckBox"-Steuerelements

Standardmäßig kann das CheckBox -Steuerelement einen der folgenden vier Zustände in der Statusgruppe CommonStates (Allgemeine Zustände) annehmen, die Sie bei der Bearbeitung einer CheckBox -Vorlage im Zuständepanel ansehen können:

Zustandsname	Beschreibung
Normal	Darstellung des CheckBox -Steuerelements, wenn es keine Interaktion mit dem Steuerelement gibt.
MouseOver	Darstellung des CheckBox -Steuerelements, wenn der Mauszeiger über ein Steuerelement bewegt wird.
Pressed	Darstellung des CheckBox -Steuerelements, wenn der Benutzer auf das Steuerelement klickt, oder wenn das Steuerelement den Fokus hat und der Benutzer die EINGABE- oder LEERTASTE drückt.
Disabled	Darstellung des CheckBox -Steuerelements, wenn für die IsEnabled -Eigenschaft False festgelegt ist.

Das CheckBox -Steuerelement kann außerdem einen der beiden folgenden Zustände der FocusStates-Statusgruppe aufweisen:

Zustandsname	Beschreibung
Unfocused	Darstellung des CheckBox -Steuerelements, wenn es nicht den Tastaturfokus hat.
Focused	Darstellung des CheckBox -Steuerelements, wenn sich ein Tastaturfokus darauf befindet. Benutzer könnten z.B. die TAB-TASTE drücken, um die Objekte in Ihrer Anwendung solange zu durchlaufen, bis sich der Tastaturfokus auf dem CheckBox -Steuerelement befindet.

Das CheckBox -Steuerelement kann außerdem einen der beiden folgenden Zustände der ValidationStates-Statusgruppe aufweisen:

Zustandsname	Beschreibung
Valid	Darstellung des CheckBox -Steuerelements, wenn das Steuerelement gültig ist.
InvalidUnfocused	Darstellung des CheckBox -Steuerelements, wenn das Steuerelement ungültig ist und nicht den Fokus hat.
InvalidFocused	Darstellung des CheckBox -Steuerelements, wenn das Steuerelement ungültig ist und den Fokus hat.

Das CheckBox -Steuerelement kann außerdem einen der drei folgenden Zustände der CheckStates-Statusgruppe aufweisen:

Zustandsname	Beschreibung
Unchecked	Darstellung des CheckBox -Steuerelements, wenn für die IsChecked -Eigenschaft False festgelegt ist.
Checked	Darstellung des CheckBox -Steuerelements, wenn für die IsChecked -Eigenschaft True festgelegt ist.
Indeterminate	Darstellung des CheckBox -Steuerelements, wenn für die IsThreeState -Eigenschaft True und für die IsChecked-Eigenschaft Null festgelegt ist.

Standardmäßig sehen die Steuerelemente im aktivierten Zustand ( CheckBox ) wie folgt aus:

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. Es kann nur ein Zustand einer Statusgruppe gleichzeitig angezeigt werden, aber ein Zustand einer Gruppe kann zurselben Zeit wie ein Zustand einer anderen Gruppe angezeigt werden.

Wenn Sie einen Zustand auswählen, wird die Zustandsaufzeichnung aktiviert, sodass alle vorgenommenen Änderungen für diesen Zustand aufgezeichnet werden. Um die Zustandsaufzeichnung zu deaktivieren, klicken Sie auf der Zeichenfläche auf die Aufzeichnungschaltfläche , oder wählen Sie im Zuständepanel die Option Base (Basis) aus. Wenn Sie die Darstellung eines Steuerelements ändern möchten, während zwei separate Zustände aktiv sind, können Sie eine Vorschau eines Zustands in einer Statusgruppe fixieren, während Sie einen anderen Status in einer anderen Statusgruppe ändern.

Vorlagenbindung

Sie können die Vorlagenbindung mit folgenden Eigenschaften verwenden: Background , BorderBrush , Foreground , BorderThickness oder Padding . Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Objekte in ein "CheckBox"-Steuerelement

Die folgenden Abbildungen zeigen den designerischen Aufbau („Comp“) eines Kontrollkästchens mit den Zuständen Normal (Normal), MouseOver , Pressed (Gedrückt), Disabled (Deaktiviert) und Focused (Mit Fokus):

Normal

MouseOver

Pressed (Gedrückt)

Disabled (Deaktiviert)

Focused (Mit Fokus)

Hinweis:
Dabei ist darauf hinzuweisen, dass es sich bei diesen Kontrollkästchen noch nicht um CheckBox -Steuerelemente handelt, sondern um grafische Vorlagen, die sich in CheckBox -Steuerelemente konvertieren lassen.

In diesem Beispiel wird der in Schritt 4 des folgenden Verfahrens aufgeführte XAML-Code verwendet, der dem Normal -Zustand in den oben abgebildeten Grafiken entspricht.

1. Öffnen Sie ein neues Microsoft Silverlight-Projekt. Klicken Sie in der Kategorie Pinsel auf Pinsel für Volltonfarbe. Geben Sie im Editor in das Feld Hexwert den Wert #FF808080 ein.

2. Doppelklicken Sie im Werkzeugpanel auf Grid , um einen neuen Container auf der Zeichenfläche zu erstellen. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout rechts neben Breite auf Erweiterte Optionen, und klicken Sie dann auf Zurücksetzen. Wiederholen Sie diesen Schritt für die Option Höhe.

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

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

4. Kopieren Sie den folgenden Code in das neue Projekt – nach dem Code, den Sie in Schritt 3 gefunden haben.

   <Grid>
      <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
         Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
         C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
         C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
         C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
         C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
         C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
         C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
         C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
         C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
         C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
         HorizontalAlignment="Left" Margin="2,2,0,2"/>
      <TextBlock 
         Foreground="White" Text="Lorem" Margin="15,0,0,0" 
         VerticalAlignment="Center"/>
   </Grid>
   

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

6. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Grid (Raster), und klicken Sie anschließend auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf CheckBox (Kontrollkästchen) und anschließend auf OK.

   In der Codeansicht sehen Sie, dass der zuvor von Ihnen eingefügte Code durch den Code für ein neues CheckBox -Steuerelement ersetzt wurde. Außerdem wurde das CheckBox -Steuerelement von Expression Blend zu einer Vorlage für einen neuen CheckBox -Stil konvertiert und diese Vorlage auf das CheckBox -Objekt angewendet.

   Der TextBlock des Designaufbaus in der Comp weist einen weißen Vordergrund auf. Der TextBlock in der Comp enthält auch den Text Lorem . Außerdem wurde der TextBlock im vorangehenden Code durch einen ContentPresenter mit denselben Eigenschaften wie der ursprüngliche TextBlock ersetzt.

7. Führen Sie die folgenden Schritte aus, um dem Button -Steuerelement einen MouseOver -Zustand hinzuzufügen:

   1. Klicken Sie im Panel Objekte und Zeitachsen auf Rectangle (Rechteck).

   2. Klicken Sie im Zuständepanel auf MouseOver.

   3. Wählen Sie im Eigenschaftenpanel die Option Fill aus, und legen Sie für die Alpha-Eigenschaft den Wert 25 fest.

      Beachten Sie, dass Rectangle zu rectangle umbenannt wurde.

   4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

8. Wenn Sie dieselben Eigenschaften auf den Pressed -Zustand (Gedrückt) im Zuständepanel anwenden möchten, klicken Sie mit der rechten Maustaste auf MouseOver, klicken Sie anschließend auf Zustand kopieren in, und klicken Sie dann auf Pressed (Gedrückt).

9. Führen Sie folgende Schritte aus, um die CheckBox -Vorlage zu versetzen („gedrückt“ darzustellen), wenn sich das Kontrollkästchen im Pressed -Zustand (Gedrückt) befindet:

   1. Klicken Sie im Zuständepanel auf Pressed (Gedrückt).

   2. Klicken Sie im Panel Objekte und Zeitachsen auf Grid.

   3. Legen Sie im Eigenschaftenpanel auf der Registerkarte Translation in der Kategorie Transformation für X und Y den Wert 1 fest.

      Beachten Sie, dass im Panel Objekte und Zeitachsen der Eintrag Grid durch grid (Raster) ersetzt wurde.

   4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

10. Wählen Sie im Zuständepanel die Eigenschaft Disabled (Deaktiviert) aus. Wählen Sie im Panel Objekte und Zeitachsen den Eintrag grid aus. Legen Sie im Eigenschaftenpanel für die Opacity-Eigenschaft (Deckkraft) den Wert 50 fest. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

11. Führen Sie folgende Schritte aus, um dem CheckBox -Steuerelement Interaktivität hinzuzufügen:

    1. Klicken Sie im Zuständepanel auf Normal, klicken Sie auf Übergang hinzufügen, und klicken Sie anschließend auf den Übergang Normal to MouseOver.

    2. Geben Sie im Feld Übergangsdauer den Wert 0,2 ein.

    3. Klicken Sie auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

    Wenn Sie nun den Mauszeiger über das CheckBox -Steuerelement bewegen, nimmt der Übergang vom Normal -Zustand in den MouseOver -Zustand 0,2 Sekunden in Anspruch. Alle anderen Übergänge werden sofort durchgeführt.

12. Klicken Sie im Panel Objekte und Zeitachsen auf check (Aktiviert). Legen Sie im Eigenschaftenpanel in der Kategorie Darstellung für Opacity (Deckkraft) den Wert 0 fest. Klicken Sie anschließend im Zuständepanel auf Checked (Aktiviert), und legen Sie im Eigenschaftenpanel für Opacity (Deckkraft) den Wert 100 fest. Klicken Sie auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

13. Die Comp enthält ein hellblaues, abgerundetes Rechteck im Focused -Zustand (Mit Fokus),welches im XAML-Code im Normal -Zustand nicht vorhanden ist.

    Zum Erstellen des Rechtecks fügen Sie mit ausgewähltem Focused-Zustand ein neues Rectangle -Objekt hinzu. Dieser Vorgang wird „zustandsgebundenes Zeichnen“ genannt, da das neue Objekt nur in dem Zustand sichtbar ist, in welchem Sie das Objekt gezeichnet haben.

    Um das Rechteck im Focused -Zustand zu zeichnen, klicken Sie im Zuständepanel auf Focused (Mit Fokus) und doppelklicken anschließend auf das Rechteckwerkzeug im Werkzeugpanel, um das neue Rectangle -Objekt zu erstellen.

14. Der nächste Schritt besteht darin, die Eigenschaften des neuen Rechtecks festzulegen. Die Eigenschaften müssen in Base geändert werden, nicht im Focused -Zustand. Das Rechteck ist jedoch zurzeit transparent, und ist im Base -Zustand nicht sichtbar. Klicken Sie auf den Aufzeichnungsmodusindikator , um die Sichtbarkeit des Rechtecks beizubehalten. Beachten Sie, dass das neue Rechteck (rectangle1) immer noch im Panel Objekte und Zeitachsen ausgewählt ist.

    Legen Sie im Eigenschaftenpanel die folgenden Eigenschaften für rectangle1 fest:

    • Fill (Füllen)   Klicken Sie in der Kategorie Pinsel auf Kein Pinsel.

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

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

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

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

      • Left (Links): -2

      • Right (Rechts): -2

      • Top (Oben)    0

      • Bottom (Unten)    0

15. Klicken Sie auf Bereich auf "<Bereichsname>" zurücksetzen . Drücken Sie die Tasten STRG+C, während CheckBox im Panel Objekte und Zeitachsen ausgewählt ist, um das Element zu kopieren. Drücken Sie vier Mal die Tasten STRG+V, um vier weitere CheckBox-Steuerelemente in den Container einzufügen. Verwenden Sie das Auswahlwerkzeug , um die Kontrollkästchen in einer Spalte anzuordnen. Löschen Sie im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften den Inhalt des Felds IsEnabled, während eines der CheckBox -Objekte im Panel Objekte und Zeitachsen ausgewählt ist.

16. Erstellen Sie das Projekt (STRG + UMSCHALT + B), und testen Sie es, indem Sie F5 drücken.

Weitere Informationen zum Anwenden Ihrer neuen CheckBox -Vorlage auf andere CheckBox -Objekte finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Microsoft Silverlight- CheckBox -Steuerelements finden Sie in der Silverlight Control Gallery  in MSDN (möglicherweise in englischer Sprache).

Siehe auch

Konzepte

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

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.