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 Rasterpanels, die die einzelnen Zustände der Schaltfläche darstellen, und schalten die Visibility-Eigenschaften (Sichtbarkeit) der jeweiligen Rasterpanel um.

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

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

   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. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Button-Objekt, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen 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 oder Bearbeiten einer Vorlage.

   Tipp:

   Klicken Sie im Panel Objekte und Zeitachsen oberhalb der Objektstruktur auf Zurück zum Anfang , 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. Fügen Sie dem Grid-Stammobjekt der Vorlage von der Symbolleiste drei Grid-Steuerelemente hinzu. Um das übergeordnete Grid-Objekt mit den neuen Grid-Objekten auszufüllen, markieren Sie diese, zeigen im Menü Objekt auf Größe automatisch anpassen und klicken dann auf Füllung.

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

7. Benennen Sie die neuen Grid-Objekte im Panel Objekte und Zeitachsen 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 machen, um das Auslöserverhalten einzurichten. Markieren Sie z. B. im Auslöserpanel Default, und klicken Sie bei gedrückter STRG-Taste auf die Grid-Objekte Pressed und MouseOver, um diese Objekte auszuwählen. Stellen Sie dann im Eigenschaftenpanel unter Darstellung die Visibility -Eigenschaft auf Hidden (Ausgeblendet) ein.

9. Klicken Sie im Auslöserpanel auf IsMouseOver = True, wählen Sie die Grid-Objekte Pressed und Default aus, und legen Sie dann im Eigenschaftenpanel unter Darstellung die Visibility-Eigenschaft auf Hidden (Ausgeblendet) fest. Wählen Sie das Grid-Objekt MouseOver aus, und legen Sie die Visibility-Eigenschaft auf Visible (Sichtbar) fest.

10. Wählen Sie schließlich bei ausgewählter IsPressed = True-Eigenschaft unter Auslöser die Grid-Objekte MouseOver und Default aus, und legen Sie dann im Eigenschaftenpanel in der Kategorie Darstellung die Visibility-Eigenschaft auf Hidden (Ausgeblendet) fest. Wählen Sie das Grid-Objekt Pressed aus, und legen Sie die Visibility-Eigenschaft auf Visible (Sichtbar) fest.

11. Sie können jetzt jedes Grid-Objekt so entwerfen, wie es im Auslöserpanel unter den verschiedenen Bedingungen angezeigt werden soll.

    Mit den Zeichenwerkzeugen und Animationszeitachsen können Sie für die Schaltfläche ein charakteristisches Verhalten erstellen.

    Weitere Informationen finden Sie unter Zeichnungsobjekte und Animieren von Objekten.

    Sie können im Panel Objekte und Zeitachsen neben den anderen Grid-Objekten auf Ausblenden/Einblenden klicken, 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