Weiterführende Themen: Erstellen von Schaltflächenstilen mithilfe von Effekten

Sie können nicht nur Eigenschaftsauslöser verwenden, um die Darstellung einer Schaltfläche je nach Benutzerinteraktion zu ändern. Sie haben in Microsoft Expression Blend auch die Möglichkeit, einen Effekt auf jeden Zustand anzuwenden.

So erstellen Sie Effekten für eine Schaltfläche

1. Zeichnen Sie ein SimpleButton -Objekt auf der Zeichenfläche in Expression Blend.

   Tipp:
   Die einfachen Stilsteuerelemente stehen im Objektepanel in der Kategorie Stile unter Einfache Stile zur Verfügung. Nachdem Sie ein Steuerelement für einen einfachen Stil in der Liste ausgewählt haben, können Sie es auf der Zeichenfläche zeichnen.

2. Rechtsklicken Sie auf die Schaltfläche im Panel Objekte und Zeitachsen, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, klicken Sie auf Kopie bearbeiten anstatt auf Aktuellen bearbeiten. Es wird eine neue Vorlage erstellt, die Sie im Dokument speichern können.

   Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

   Klicken Sie im Panel Objekte und Zeitachsen oberhalb der Objektstruktur auf die Schaltfläche Bereich auf "<Bereichsname>" zurücksetzen, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Objekt, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten, um für eine vorhandene Vorlage zum Vorlagenbearbeitungsmodus zurückzukehren.

3. Löschen Sie im Bearbeitungsbereich der Steuerelementvorlage das untergeordnete Border -Objekt des Grid -Objekts.

4. Klicken Sie auf das Grid -Objekt, um es zu aktivieren, sodass Sie untergeordnete Objekte hinzufügen können.

5. Zeichnen Sie ein Rectangle -Objekt in das Raster und legen Sie im Eigenschaftenpanel unter Pinsel für die Fill -Eigenschaft (Füllung) die Farbe Gelb fest.

6. Klicken Sie mit der rechten Maustaste auf das Rectangle -Objekt, zeigen Sie auf Sortieren, und klicken Sie dann auf In den Hintergrund, um das Objekt in einer Ebene hinter dem ContentPresenter -Objekt anzuordnen.

7. Runden Sie die Kanten des Rectangle -Objekts entweder mit dem Funktionsindikator ab, der angezeigt wird, wenn Sie den Zeiger über einen der beiden Steuerpunkte außerhalb der oberen linken Ecke des Rechtecks bewegen, oder verwenden Sie im Eigenschaftenpanel unter Darstellung die Eigenschaften RadiusX und RadiusY .

8. Ziehen Sie das DropShadowEffect -Objekt von der Kategorie Effekte des Objektepanels auf das Rectangle -Objekt.

   Dem Rectangle -Objekt wird ein Schlagschatten als untergeordnetes Objekt hinzugefügt.

9. Wählen Sie im Objekt- und Zeitachsenpanel das DropShadowEffect -Objekt aus, und passen Sie die Eigenschaften des Effekts im Eigenschaftenpanel an. Legen Sie die ShadowDepth -Eigenschaft auf den Wert 20 fest.

10. Klicken Sie im Auslöserpanel auf den IsMouseOver = True -Auslöser, um die Auslöseraufzeichnung auszulösen. Legen Sie im Eigenschaftenpanel für die ShadowDepth -Eigenschaft den Wert 25 fest.

    Eine neue Linie wird unter Eigenschaften wenn aktiv im Auslöserpanel angezeigt und gibt die Eigenschaftenänderung wieder, die beim Bewegen der Maus über die Schaltfläche erfolgt.

    Tipp:
    Möglicherweise müssen Sie die Fenster im Auslöserpanel anpassen, um alle Auslöser und Aktionen anzuzeigen. Ändern Sie die Größe der Fenster mit der Maus.

11. Klicken Sie im Auslöserpanel auf den IsPressed = True -Auslöser, um die Auslöseraufzeichnung auszulösen. Legen Sie im Eigenschaftenpanel für die ShadowDepth -Eigenschaft den Wert 10 .

    Eine neue Linie wird unter Eigenschaften wenn aktiv im Auslöserpanel angezeigt und gibt die Eigenschaftenänderung wieder, wenn in der ausgeführten Anwendung auf die Schaltfläche geklickt wird.

12. Klicken Sie im Auslöserpanel auf Standard, um die Auslöseraufzeichnung zu deaktivieren.

13. Testen Sie die Anwendung (F5), um die Effekte in Aktion zu sehen.

Siehe auch

Aufgaben

Hinzufügen oder Entfernen eines Auslösers aus einem WPF-Steuerelement

Konzepte

SimpleButton
Verwendung von Auslösern, um das Verhalten eines WPF-Steuerelements festzulegen
Anwenden von Effekten

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.