Weiterführende Themen: Erstellen von Schaltflächen mithilfe von Bitmapeffekten

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 Bitmapeffekt auf jeden Zustand anzuwenden.

So erstellen Sie Bitmapeffekte für eine Schaltfläche

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

   Tipp:
   Die Steuerelemente mit einfachem Stil stehen in der Objektbibliothek auf der Registerkarte Steuerelemente unter der Kategorie Simple Styles 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. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Schaltfläche, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, können Sie auf Kopie bearbeiten statt auf Vorlage bearbeiten klicken, um eine neue Vorlage zu erstellen und im Dokument zu speichern. Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

   Klicken Sie im Interaktionspanel oberhalb der Elementstruktur auf die Schaltfläche Zurück zum Anfang, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Element, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

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

4. Doppelklicken Sie auf das Grid-Element, um es zu aktivieren, sodass Sie untergeordnete Elemente hinzufügen können.

5. Zeichnen Sie ein Rectangle-Element 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-Element, zeigen Sie auf Sortieren, und klicken Sie dann auf In den Hintergrund, um es in einer Ebene hinter dem ContentPresenter-Element anzuordnen.

7. Runden Sie die die Kanten des Rectangle-Elements entweder mit dem Funktionsindikator ab, der angezeigt wird, wenn Sie den Mauszeiger ü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. Suchen Sie bei ausgewähltem Rectangle-Element die BitmapEffect-Eigenschaft (Bitmapeffekt). Diese befindet sich im Eigenschaftenpanel unter Darstellung im Abschnitt Erweitert. Klicken Sie auf den Dropdownpfeil, und klicken Sie dann auf Abschrägung. Belassen Sie den Wert für die BevelWidth-Eigenschaft auf 5, aber ändern Sie die anderen Eigenschaften für die Abschrägung, bis Sie den gewünschten Effekt erzielt haben.

9. Klicken Sie im Interaktionspanel unter Auslöser auf den IsMouseOver = True-Auslöser, um die Auslöseraufzeichnung zu aktivieren. Klicken Sie im Eigenschaftenpanel auf den Dropdownpfeil neben der BitmapEffect-Eigenschaft (Bitmapeffekt), klicken Sie auf Abschrägung, und ändern Sie dann die BevelWidth-Eigenschaft (Abschrägungsbreite) in 10.

   Eine neue Linie wird unter Eigenschaften wenn aktiv unter Auslöser 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 des Interaktionspanels anpassen, um unter Auslöser alle Auslöser und Aktionen anzuzeigen. Ändern Sie die Größe der Fenster mit der Maus.

10. Klicken Sie im Interaktionspanel unter Auslöser auf den IsPressed = True-Auslöser, um die Auslöseraufzeichnung zu aktivieren. Klicken Sie dann im Eigenschaftenpanel nochmals auf den Dropdownpfeil neben der BitmapEffect-Eigenschaft (Bitmapeffekt), klicken Sie auf Abschrägung, und ändern Sie dann die BevelWidth-Eigenschaft (Abschrägungsbreite) in 2.

    Eine neue Linie wird unter Eigenschaften wenn aktiv unter Auslöser angezeigt und gibt die Eigenschaftenänderung wieder, die beim Klicken mit der Maus auf die Schaltfläche erfolgt.

11. Klicken Sie im Interaktionspanel unter Auslöser auf Standard, um die Auslöseraufzeichnung zu deaktivieren.

12. Testen Sie die Anwendung (F5), um die Effekte zu sehen.

    Tipp:
    Bitmapeffekte werden nicht durch die Hardware beschleunigt. Daher sollten Sie einen expliziten Wert festlegen, anstatt zu versuchen, die Werte mit einem Ereignisauslöser und einer Animationszeitachse zu animieren.

Siehe auch

Konzepte

SimpleButton-Steuerelementvorlage

Hinzufügen oder Entfernen eines Auslösers

Auslöser (Übersicht)

Hinzufügen eines Bitmapeffekts zu einem Objekt