Weiterführende Themen: Erstellen einer Rolloverschaltfläche

Ein Rollovereffekt kann in einer Schaltflächenvorlage erstellt werden, indem die Darstellung der Schaltfläche je nach Benutzerinteraktion geändert wird. Neben dem Auslösen von Animationszeitachsen oder Eigenschaftsänderungen können Sie das folgende Verfahren verwenden, um einen Rollovereffekt zu erzeugen. Sie erstellen mehrere Gitternetzpanels, die die einzelnen Zustände der Schaltfläche darstellen, und schalten die Visibility-Eigenschaften (Sichtbarkeit) der jeweiligen Gitternetzpanel um.

So erstellen Sie einen Rollovereffekt für eine Schaltfläche

1. Zeichnen Sie ein SimpleButton-Element auf die Zeichenfläche in Microsoft Expression Blend.

   Tipp:
   Die einfachen Stilsteuerelemente stehen in der Objektbibliothek  auf der Registerkarte Steuerelemente unter der Kategorie Einfacher Stil 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 oberhalb der Elementstruktur im Interaktionspanel 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. Fügen Sie drei Grid-Steuerelemente aus der Werkzeugpalette in das Raster der Vorlage ein. Sie können die Steuerelemente schnell hinzufügen, indem Sie in der Werkzeugpalette auf das entsprechende Symbol doppelklicken, dann unter Objekte und Zeitachsen mit der rechten Maustaste auf die einzelnen Grid-Steuerelemente klicken, auf Automatische Anpassung zeigen und schließlich auf Füllung klicken.

6. Klicken Sie mit der rechten Maustaste auf das ContentPresenter-Element, zeigen Sie auf Sortieren, und klicken Sie dann auf In den Vordergrund, um das ContentPresenter-Element im Vordergrund vor den neuen Grid-Objekten anzuordnen.

7. Benennen Sie unter Objekte und Zeitachsen die neuen Grid-Objekte in Default, Pressed bzw. MouseOver um, indem Sie mit der rechten Maustaste auf jedes Objekt klicken und dann auf Umbenennen klicken.

8. Sie müssen lediglich ein Grid-Objekt pro Auslöser sichtbar zu machen, um das Auslöserverhalten einzurichten. Klicken Sie beispielsweise bei gedrückter STRG-TASTE auf die Grid-Objekte Pressed und MouseOver, um die Objekte auszuwählen (im Interaktionspanel muss unter Auslöser die Standardeinstellung ausgewählt sein). Stellen Sie dann im Eigenschaftenpanel unter Darstellung die Visibility -Eigenschaft (Sichtbarkeit) auf Ausgeblendet ein.

9. Klicken Sie im Interaktionspanel unter Auslöser auf IsMouseOver = True, wählen Sie die Grid-Objekte Pressed und Default aus, und legen Sie dann im Eigenschaftenpanel unter Darstellung die Visibility-Eigenschaft (Sichtbarkeit) auf Ausgeblendet fest.

10. Wählen Sie schließlich bei ausgewählter IsPressed = True-Eigenschaft unter Auslöser die Grid-Objekte mit den Namen MouseOver und Default aus, und legen Sie dann in der Kategorie Darstellung im Eigenschaftenpanel die Visibility-Eigenschaft auf Hidden fest.

11. Sie können jetzt jedes Grid-Objekt so entwerfen, dass es unter den verschiedenen Bedingungen nach Wunsch angezeigt wird. Sie können eines der Zeichenwerkzeuge oder eine der Animationszeitachsen verwenden, um für Ihre Schaltfläche ein charakteristisches Verhalten zu erstellen. Klicken Sie unter Objekte und Zeitachsen auf die für die anderen Grid-Objekte gültige Schaltfläche Ausblenden/Einblenden, um ein Grid-Objekt zu entwerfen, ohne dass die anderen Objekte sichtbar sind.

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

Siehe auch

Konzepte

SimpleButton-Steuerelementvorlage