Weiterführende Themen: Erstellen einer Rolloverschaltfläche

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(de-de,Expression.40).png

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

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

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

    tip noteTipp:

    Die einfachen Stilsteuerelemente stehen im Objektepanel Cc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(de-de,Expression.40).png 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 mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das Button -Objekt, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuelle 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.

    tip noteTipp:

    Klicken Sie im Panel Objekte und Zeitachsen oberhalb der Objektstruktur auf die Schaltfläche Bereich auf "<Bereichsname>" zurücksetzenCc294737.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.40).png, 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 von der Symbolliste aus drei Grid -Steuerelemente hinzu Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(de-de,Expression.40).png. 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 Fill .

  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 Rasterobjekte 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 Rasterobjekt 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 Rasterobjekte Pressed und MouseOver , um diese Objekte auszuwählen. Legen Sie anschließend im Eigenschaftenpanel unter Darstellung für die Visibility -Eigenschaft Hidden fest.

  9. Klicken Sie im ****AuslöserpanelIsMouseOver = True , wählen Sie die Pressed - und Default -Rasterobjekte und anschließend im Eigenschaftenpanel die Option Darstellung aus. Legen Sie dann für die Visibility -Eigenschaft Hidden fest. Wählen Sie das MouseOver -Rasterobjekt, und legen Sie für die Visibility -Eigenschaft Visible fest.

  10. Klicken Sie schließlich im ****AuslöserpanelIsPressed = True , wählen Sie die MouseOver - und Default -Rasterobjekte und anschließend im Eigenschaftenpanel die Option Darstellung aus. Legen Sie dann für die Visibility -Eigenschaft Hidden fest. Wählen Sie das Pressed -Rasterobjekt, und legen Sie für die Visibility -Eigenschaft Visible fest.

  11. Sie können jetzt jedes Raster-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 Rasterobjekten auf Ausblenden/EinblendenCc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(de-de,Expression.40).png klicken, um ein Rasterobjekt zu entwerfen, ohne dass die anderen Objekte sichtbar sind.

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

Siehe auch

Konzepte

SimpleButton

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.

  • Last updated on