Animieren von Popupbenutzeroberflächen
Language: HTML | XAML

Animieren von Popupbenutzeroberflächen (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Verwenden Sie Popupanimationen, um Popup-UI-Elemente wie Kontextmenüs und Flyouts anzuzeigen und auszublenden. Popupelemente sind Container, die über dem Inhalt der App angezeigt werden und ausgeblendet werden, wenn Benutzer außerhalb des Popupelements tippen oder klicken. Diese Animationen dienen hauptsächlich der Verwendung in benutzerdefinierten Steuerelementen. Verwenden Sie die Elemente Popup, Flyout und MenuFlyout in Ihrer XAML, weisen diese bereits integrierte Bibliotheksanimationen auf, und es muss kein Verhalten hinzugefügt werden.

Folgende Animationen sind relevant für Popupverhalten: PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition.

Die Popupanimationen enthalten eine Umwandlung, das heißt eine vertikale Verschiebung von einer Anfangsposition an die endgültige Position, wenn das Popupelement ein- oder ausgeblendet wird. Distanz und Richtung der Umwandlung werden von der App angegeben. In den meisten Fällen sollte die Umwandlung 50 Pixel für eine Verschiebung nach oben betragen. Wenn das Popupelement jedoch unter dem Benutzeroberflächenelement angezeigt wird, das das Popup ausgelöst hat, sollte die Umwandlung 50 Pixel nach unten betragen. Diese Umwandlung nach unten wird beispielsweise bei einem Flyout verwendet, das von einer oberen Navigationseiste oder einem App-Header ausgelöst wurde. Hiermit soll für die Benutzer ein visueller Bezug zwischen dem Popupelement und dem auslösenden Element hergestellt werden.

Popupanimationen in standardmäßigem Windows-Runtime-Steuerelementverhalten

Der Standardcode für Popup, Flyout und MenuFlyout verwendet diese Animationen nicht. Diese Typen weisen eigene integrierte Animationen auf, die sich außerhalb von Vorlagen und Stilen befinden. Popup weist eine ChildTransitions-Eigenschaft auf, die als null beginnt. Hier können Sie ggf. ein PopupThemeTransition-Element hinzufügen. Der Grund hierfür kann die Anpassung von FromHorizontalOffset oder FromVerticalOffset sein.

Weitere Ressourcen

Das XAML-Beispiel für Charakteranimationen zeigt die Verwendung von PopInThemeAnimation- und PopOutThemeAnimation-Elementen, die in einem Storyboard definiert sind explizit aufgerufen werden. (Dies ist Szenario 1 im Beispiel.)

Unter Richtlinien und Prüfliste für Animationen für Popup-Benutzeroberflächenanimationen finden Sie bewährte Methoden für den Entwurf mit diesen Animationen.

Verwandte Themen

Animieren der Benutzeroberfläche
Animieren von randbasierten Benutzeroberflächen
Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen
XAML-Beispiel für Charakteranimationen
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

Anzeigen:
© 2016 Microsoft