Language: HTML | XAML

Animieren von randbasierten Benutzeroberflächen (XAML)

Applies to Windows only

Verwenden Sie Animationen für randbasierte Benutzeroberflächen zum Anzeigen oder Ausblenden von Benutzeroberflächen, die vom Bildschirmrand ausgehen. Diese Benutzeroberflächenelemente können von Benutzern oder von der App angezeigt werden. Verwenden Sie EdgeUIThemeTransition oder kleinere Rand-UI, z. B. App-Leisten oder Befehlsleisten. Verwenden Sie PaneThemeTransition für größere UI, z. B. Bereiche oder Panels, die eingeblendet werden. Diese Animationen sind hauptsächlich für die Verwendung in benutzerdefinierten Steuerelementen vorgesehen. Vorhandene Steuerelemente, wie AppBar und CommandBar, weisen integrierte Bibliotheksanimationen für Rand-UI auf, und das Animationsverhalten wird durch einfaches Integrieren dieser Steuerelemente in die Benutzeroberfläche erzielt.

Die Benutzeroberflächenelemente können die Anwendung überlagern oder Teil der Hauptoberfläche der App sein. Wenn das Benutzeroberflächenelement Teil der Hauptoberfläche der App ist, müssen Sie möglicherweise die Größe der restlichen App ändern, um Platz für das neue Benutzeroberflächenelement zu schaffen, wenn dieses angezeigt wird.

Einfaches Diagramm eines randbasierten Elements

Es gibt zwei Arten von randbasierten Elementen mit jeweils eigenen Sätzen von Animations-APIs: Randbenutzeroberflächen und Bereichsbenutzeroberflächen.

  • Verwenden Sie Rand-UI-Animationen mit kleinerer Rand-UI, wenn Sie ein benutzerdefiniertes Steuerelement animieren möchten, dessen Verhalten AppBar oder CommandBar entspricht. Es empfiehlt sich auch die Definition eines Benutzeroberflächenbereichs für Fehler und Warnungen, die sich aus Aktionen der App ergeben. Beachten Sie in diesem Fall jedenfalls die Richtlinien für Flyouts. Rand-UI ist möglicherweise nicht für Ihr Szenario geeignet.
  • Verwenden Sie Bereichs-Benutzeroberflächenanimationen für größere Rand-UI, die einen größeren Teil des Appfensters abdeckt. Ein Beispiel für die Bereichsgröße in diesem Fall ist die Bildschirmtastatur.

Abbildung, die den Größenunterschied zwischen einer Randbenutzeroberfläche und einer Panelbenutzeroberfläche zeigt

Randbasierte Animationen in standardmäßigem Windows-Runtime-Steuerelementverhalten

Die XAML-Steuerelemente verwenden randbasierte Animationen nicht explizit in den Steuerelementvorlagen. Aber sie weisen integriertes animiertes Verhalten auf. Am besten integrieren Sie Rand-UI, indem Sie ein AppBar-Element (oder CommandBar) über die Eigenschaften Page.BottomAppBar und Page.TopAppBar hinzufügen. Die Eigenschaften wenden automatisch alle entsprechenden Übergänge und Interaktionsverhalten für Sie an. Weitere Informationen finden Sie unter Hinzufügen von App-Leisten.

Flyouts (Flyout, MenuFlyout, SettingsFlyout) weisen ebenfalls integrierte Animationen auf. Allerdings handelt es sich hierbei nicht wirklich um randbasierte UI, da sie dem Kontext der Anzeige zugeordnet werden müssen, nicht dem App-Fensterrand. Möglicherweise verwenden Sie Flyouts für UI, die von einem AppBar-Element aufgerufen wird. Allerdings ist dies eine andere Situation als reine Rand-UI. Weitere Informationen finden Sie unter Hinzufügen von Flyouts und Menüs und Animieren von Popupbenutzeroberflächen.

Weitere Ressourcen

Das Popupbeispiel zeigt die Verwendung von PaneThemeTransition für Popup.ChildTransitions.

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

Verwandte Themen

Animieren der Benutzeroberfläche
Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen
Hinzufügen von App-Leisten
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

Anzeigen:
© 2014 Microsoft