Formatierungstipps für "Button"-Steuerelemente

Artikel
10/11/2017

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(de-de,Expression.40).png

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

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(de-de,Expression.40).png

Zustände des "Button"-Steuerelements

Sie können die möglichen Zustände des Button -Steuerelements im Zuständepanel anzeigen, während Sie die Button -Steuerelementvorlage bearbeiten. Das Button -Steuerelement (Schaltflächensteuerelement) kann einen der vier folgenden Zustände in der Statusgruppe CommonStates (Allgemeine Zustände) annehmen:

Zustandsname	Beschreibung
Normal	Darstellung des Button -Steuerelements, wenn es keine Interaktion mit dem Steuerelement gibt
MouseOver	Darstellung des Button -Steuerelements, wenn der Mauszeiger über ein Steuerelement bewegt wird
Pressed	Darstellung des Button -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 Button -Steuerelements, wenn für die IsEnabled -Eigenschaft False festgelegt ist

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

Zustandsname	Beschreibung
Unfocused	Darstellung des Button -Steuerelements, wenn es nicht den Tastaturfokus hat
Focused	Darstellung des Button -Steuerelements, wenn es den Tastaturfokus hat. 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 Button -Steuerelement befindet.

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 jeweils nur ein Zustand in einer Zustandsgruppe angezeigt werden. Ein Zustand aus einer Gruppe kann jedoch gleichzeitig mit einem Zustand aus einer anderen Gruppe angezeigt werden.

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 jeweils nur ein Zustand in einer Zustandsgruppe angezeigt werden. Ein Zustand aus einer Gruppe kann jedoch gleichzeitig mit einem Zustand aus 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 den Aufzeichnungsmodusindikator Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(de-de,Expression.40).png , oder wählen im Zuständepanel die Option Base (Basis) aus.

Weitere Informationen finden Sie unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Vorlagenbindung

Folgende Eigenschaften stehen zur Bindung an eine Vorlage zur Verfügung: Background (Hintergrund), BorderBrush (Rahmen des Steuerelements mit dem Fokus), Foreground (Vordergrund), BorderThickness (Rahmenstärke) oder Padding (Auffüllen). Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Text in ein Schaltflächensteuerelement

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

Normal

Schaltfläche im Status „Normal“

MouseOver

Schaltfläche im Status „MouseOver“

Pressed (Gedrückt)

Schaltfläche im Status „Gedrückt“

Disabled (Deaktiviert)

Schaltfläche im Status „Deaktiviert“

Focused (Mit Fokus)

Schaltfläche mit Fokus

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

Das folgende Verfahren verwendet den in Schritt 2 des folgenden Verfahrens aufgeführten XAML-Code, der dem Normal -Zustand in den oben abgebildeten Grafiken entspricht.

Tipp:
Klicken Sie auf Geteilte Ansicht, um die Änderungen sowohl in der Designansicht als auch in der Codeansicht zu sehen, während Sie die Schritte dieses Verfahrens ausführen.

Öffnen Sie ein neues Microsoft Silverlight-Projekt. Suchen Sie in der Codeansicht den folgenden Code und löschen Sie den schließenden Schrägstrich (/).
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

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

<Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

Fügen Sie dem Code,den Sie gerade eingefügt haben, ein schließendes Grid -Tag hinzu (</Grid>).
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 Button (Schaltfläche) 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 Button -Steuerelement ersetzt wurde. Außerdem wurde das Button -Steuerelement von Microsoft Expression Blend zu einer Vorlage für einen neuen Button -Stil konvertiert und diese Vorlage auf das Button -Objekt angewendet.

Der TextBlock des Designaufbaus in der Comp weist einen hellgrauen Vordergrund auf. Der neue Button -Stil verfügt ebenfalls über einen hellen grauen Vordergrund. OK stellt den Textinhalt der oben beschriebenen Schaltfläche sowie des dazugehörigen Button -Steuerelements dar. Der TextBlock im vorangehenden Code wurde durch ein ContentPresenter -Element mit denselben Eigenschaften wie der ursprüngliche TextBlock ersetzt.
Zum Hinzufügen von Zuständen zum Button -Steuerelement gehen Sie folgendermaßen vor:
1. Klicken Sie im Panel Objekte und Zeitachsen auf Rectangle (Rechteck).
2. Klicken Sie im Zuständepanel auf MouseOver.
3. Legen Sie im Eigenschaftenpanel für die Fill- und Stroke-Eigenschaft (Füllen und Strich) den #FF808080 fest.
4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.
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).
Um den Schaltflächentext nach hinten zu versetzen („gedrückt“ darzustellen), wenn die Schaltfläche gedrückt wird, gehen Sie folgendermaßen vor:
1. Klicken Sie im Zuständepanel auf Pressed (Gedrückt).
2. Klicken Sie im Panel Objekte und Zeitachsen auf ContentPresenter.
3. Legen Sie im Eigenschaftenpanel auf der Registerkarte Translation in der Kategorie Transformation für X und Y den Wert 1 fest.
4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.
Klicken Sie im Zuständepanel auf Normal, klicken Sie auf Übergang hinzufügen, und klicken Sie anschließend auf den Übergang Normal to MouseOver. Geben Sie im Feld Übergangsdauer den Wert 0,2 ein, und klicken Sie auf Base (Basis).
Die Comp weist ein blaues Rechteck um die Schaltfläche auf, wenn diese sich im Zustand Focused (Mit Fokus) befindet. Zum Erstellen des Rechtecks fügen Sie ein neues Rectangle -Objekt mit ausgewähltem Zustand Focused 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 Bereich Werkzeuge, um das neue Rectangle -Objekt zu erstellen.
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 das Rechteck sichtbar zu machen. 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 (Ausfüllen) Festgelegt auf No brush (Kein Pinsel).
- Strichfarbe Festgelegt auf # FF00C0FF.
- RadiusX Festgelegt auf 2.
- RadiusY Festgelegt auf 2.
- Margin (Rand) Left (Links) festgelegt auf 1, Right (Rechts) festgelegt auf 1, Top (oben) festgelegt auf 1 und Bottom (Unten) festgelegt auf 1.
Wenn Sie das Rechteck interaktiver gestalten möchten, wenn sich die Schaltfläche im Zustand Focused (Mit Fokus) befindet, können optional Sie eine Animation mit konstantem Zustand erstellen. Gehen Sie dazu vor wie folgt. Andernfalls fahren Sie mit Schritt 12 fort.
1. Aktivieren Sie im Zuständepanel den Zustand Focused (Mit Fokus).
2. Klicken Sie im Panel Objekte und Zeitachsen auf die Schaltfläche Zeitachse anzeigen.
3. Ziehen Sie den Keyframe an die 2-Sekunden-Marke, und bewegen Sie die Position zu 2.2 Sekunden.
4. Wählen Sie im Zuständepanelrectangle1**** aus.
5. Legen Sie anschließend im Eigenschaftenpanel auf der Registerkarte Darstellung für die Opacity-Eigenschaft (Deckkraft) den Wert 0 fest.
6. Ziehen Sie die Abspielposition im Panel Objekte und Zeitachsen zurück auf 0 Sekunden, und wählen Sie anschließend rectangle1 aus. Legen Sie im Eigenschaftenpanel auf der Registerkarte Skalieren für X und Y den Wert 5 fest.
7. Klicken Sie im Panel Objekte und Zeitachsen auf den Keyframe bei 2. Legen Sie im Eigenschaftenpanel in der Kategorie Beschleunigung für die EasingFunction-Eigenschaft den Wert Quartic Out fest.
8. Klicken Sie im Panel Objekte und Zeitachsen direkt unter der Registerkarte auf den Zustandsnamen (in diesem Fall Focused (Mit Fokus)). Legen Sie im Eigenschaftenpanel auf der Registerkarte Allgemeine Eigenschaften für RepeatBehavior (Wiederholungsverhalten) den Wert Forever (Kontinuierlich) fest.
Erstellen Sie das Projekt (STRG + UMSCHALT + B), und testen Sie es, indem Sie die F5-TASTE drücken.

So konvertieren Sie Objekte in ein Button-Steuerelement

Die folgenden Abbildungen zeigen die Comp (den designerischen Aufbau) einer von einem Designer entworfenen Schaltfläche mit den Zuständen Normal (Normal), MouseOver , Pressed (Gedrückt), Disabled (Deaktiviert) und Focused (Mit Fokus):

Normal

Schaltflächengrafik im Status „Normal“

MouseOver

Schaltflächengrafik im Status „MouseOver“

Pressed (Gedrückt)

Schaltflächengrafik im Status „Gedrückt“

Disabled (Deaktiviert)

Schaltflächengrafik im Status „Deaktiviert“

Focused (Mit Fokus)

Schaltflächengrafik mit Fokus

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

Das folgende Verfahren verwendet den in Schritt 2 des folgenden Verfahrens aufgeführten XAML-Code, der dem Normal -Zustand in den oben abgebildeten Grafiken entspricht.

Tipp:
Klicken Sie auf Geteilte Ansicht, um die Änderungen sowohl in der Designansicht als auch in der Codeansicht zu sehen, während Sie die Schritte dieses Verfahrens ausführen.

Öffnen Sie ein neues Microsoft Silverlight-Projekt. Suchen Sie in der Codeansicht den folgenden Code und löschen Sie den schließenden Schrägstrich (/).
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

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

<Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

Fügen Sie dem Code,den Sie gerade eingefügt haben, ein schließendes Grid -Tag hinzu (</Grid>).
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 Button (Schaltfläche) 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 Button -Steuerelement ersetzt wurde. Außerdem wurde das Button -Steuerelement von Expression Blend zu einer Vorlage für einen neuen Button -Stil konvertiert und diese Vorlage auf das Button -Objekt angewendet.
Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Inhalt, und klicken Sie anschließend auf Ausschneiden.
Setzen Sie den Bereich auf UserControl (Benutzersteuerelement) zurück, klicken Sie mit der rechten Maustaste auf UserControl, und klicken Sie dann auf Einfügen.
Zum Hinzufügen von Zuständen zum Button -Steuerelement gehen Sie folgendermaßen vor:
1. Klicken Sie im Panel Objekte und Zeitachsen auf Rectangle (Rechteck).
2. Klicken Sie im Zuständepanel auf MouseOver.
3. Legen Sie im Eigenschaftenpanel für die Fill- und Stroke-Eigenschaft (Füllen und Strich) den #FF808080 fest.
4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.
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).
Um den Schaltflächentext nach hinten zu versetzen („gedrückt“ darzustellen), wenn die Schaltfläche gedrückt wird, gehen Sie folgendermaßen vor:
1. Klicken Sie im Zuständepanel auf Pressed (Gedrückt).
2. Klicken Sie im Panel Objekte und Zeitachsen auf ContentPresenter.
3. Legen Sie im Eigenschaftenpanel auf der Registerkarte Translation in der Kategorie Transformation für X und Y den Wert 1 fest.
4. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.
Klicken Sie im Zuständepanel auf Normal, klicken Sie auf Übergang hinzufügen, und klicken Sie anschließend auf den Übergang Normal to MouseOver.
Geben Sie im Feld Übergangsdauer den Wert 0,2 ein, und klicken Sie auf Base (Basis).

Die Comp weist ein blaues Rechteck um die Schaltfläche auf, wenn diese sich im Zustand Focused (Mit Fokus) befindet. Zum Erstellen des Rechtecks fügen Sie ein neues Rectangle -Objekt mit ausgewähltem Zustand Focused 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.
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 das Rechteck sichtbar zu machen. 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 (Ausfüllen) Festgelegt auf No brush (Kein Pinsel).
- Strichfarbe Festgelegt auf # FF00C0FF.
- Margin (Rand) Left (Links) festgelegt auf 1, Right (Rechts) festgelegt auf 1, Top (oben) festgelegt auf 1 und Bottom (Unten) festgelegt auf 1.
Wenn Sie das Rechteck interaktiver gestalten möchten, wenn sich die Schaltfläche im Zustand Focused (Mit Fokus) befindet, können optional Sie eine Animation mit konstantem Zustand erstellen. Gehen Sie dazu vor wie folgt. Andernfalls fahren Sie mit Schritt 14 fort.
1. Aktivieren Sie im Zuständepanel den Zustand Focused (Mit Fokus).
2. Klicken Sie im Panel Objekte und Zeitachsen auf die Schaltfläche Zeitachse anzeigen.
3. Ziehen Sie den Keyframe an die 2-Sekunden-Marke, und bewegen Sie die Position zu 2.2 Sekunden.
4. Wählen Sie im Zuständepanelrectangle1**** aus, und legen Sie anschließend im Eigenschaftenpanel auf der Registerkarte Darstellung für Opacity (Deckkraft) den Wert 0 fest.
5. Ziehen Sie die Abspielposition im Panel Objekte und Zeitachsen zurück auf 0 Sekunden, und wählen Sie anschließend rectangle1 aus. Legen Sie im Eigenschaftenpanel auf der Registerkarte Skalieren für X und Y den Wert 5 fest.
6. Klicken Sie im Panel Objekte und Zeitachsen auf den Keyframe bei 2. Legen Sie im Eigenschaftenpanel in der Kategorie Beschleunigung für die EasingFunction-Eigenschaft den Wert Quartic Out fest.
7. Klicken Sie im Panel Objekte und Zeitachsen direkt unter der Registerkarte auf den Zustandsnamen (in diesem Fall Focused (Mit Fokus)).
8. Legen Sie im Eigenschaftenpanel auf der Registerkarte Allgemeine Eigenschaften für RepeatBehavior (Wiederholungsverhalten) den Wert Forever (Kontinuierlich) fest.
Erstellen Sie das Projekt (STRG + UMSCHALT + B), und testen Sie es, indem Sie F5 drücken.

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

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight- Button -Steuerelements finden Sie in der Silverlight Control Gallery Ee341364.xtlink_newWindow(de-de,Expression.40).png in MSDN (möglicherweise in englischer Sprache).