頁面轉換
使用者在應用程式裡的頁面間瀏覽,頁面轉換提供回饋做為頁面間的關係。 頁面轉換可協助使用者了解他們是否位於瀏覽階層的頂部、在同層級頁面之間移動,或更深地瀏覽至頁面階層。
為應用程式中的頁面之間的瀏覽提供了兩種不同的動畫:頁面重新整理和向下向下鑽研,並由 NavigationTransitionInfo 的子類別表示。
範例
WinUI 2 程式庫 | |
---|---|
如果您已安裝 WinUI 2 程式庫應用程式,請按一下此處以開啟應用程式並查看頁面轉換的運作情形。 |
頁面重新整理
頁面重新整理是傳入內容的向上滑動動畫和淡入動畫的組合。 當使用者被帶到瀏覽堆疊的頂部時 (例如在索引標籤或左側瀏覽項目之間瀏覽),請使用頁面重新整理。
營造使用者重新開始的感覺。
頁面重新整理動畫由 EntranceNavigationTransitionInfoClass 表示。
// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());
注意:Frame 會自動使用 NavigationThemeTransition,以動畫顯示兩個頁面之間的瀏覽。 預設情況下,動畫是頁面重新整理。
Drill
當使用者在應用程式中更深入地瀏覽時 (例如在選擇項目後顯示更多資訊),請使用向下向下鑽研。
營造使用者已深入應用程式的感覺。
向下鑽研動畫是由 DrillInNavigationTransitionInfo 類別表示。
// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());
水平滑動
使用水平投影片顯示同層級頁面彼此相鄰。 NavigationView 控制項會自動使用此動畫進行頂端瀏覽,但如果您正在建立自己的水平瀏覽體驗,則可以使用 SlideNavigationTransitionInfo 實現水平滑動。
營造使用者正在相鄰頁面之間瀏覽的感覺。
// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );
// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );
隱藏
為了避免在瀏覽期間播放任何動畫,請使用 SuppressNavigationTransitionInfo 取代其他 NavigationTransitionInfo 子類型。
// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());
如果您使用連接動畫或隱式顯示/隱藏動畫來建立自己的轉換,則抑制動畫會非常有用。
回溯瀏覽
您可以使用 Frame.GoBack(NavigationTransitionInfo)
在向後瀏覽時播放特定的轉換。
當您根據螢幕大小動態修改瀏覽行為時,這會很有用; 例如在回應式清單/詳細資訊場景中。