Share via

頁面轉換

  • 發行項

使用者在應用程式裡的頁面間瀏覽，頁面轉換提供回饋做為頁面間的關係。 頁面轉換可協助使用者了解他們是否位於瀏覽階層的頂部、在同層級頁面之間移動，或更深地瀏覽至頁面階層。

為應用程式中的頁面之間的瀏覽提供了兩種不同的動畫：頁面重新整理和向下向下鑽研，並由 NavigationTransitionInfo 的子類別表示。

範例

WinUI 2 Gallery
WinUI Gallery

如果您已安裝 WinUI 2 程式庫應用程式，請按一下此處以開啟應用程式並查看頁面轉換的運作情形。

頁面重新整理

頁面重新整理是傳入內容的向上滑動動畫和淡入動畫的組合。 當使用者被帶到瀏覽堆疊的頂部時 (例如在索引標籤或左側瀏覽項目之間瀏覽)，請使用頁面重新整理。

營造使用者重新開始的感覺。

page refresh animation

頁面重新整理動畫由 EntranceNavigationTransitionInfoClass 表示。

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

注意：Frame 會自動使用 NavigationThemeTransition，以動畫顯示兩個頁面之間的瀏覽。 預設情況下，動畫是頁面重新整理。

深入探詢

當使用者在應用程式中更深入地瀏覽時 (例如在選擇項目後顯示更多資訊)，請使用向下向下鑽研。

營造使用者已深入應用程式的感覺。

drill animation

向下鑽研動畫是由 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) 在向後瀏覽時播放特定的轉換。

當您根據螢幕大小動態修改瀏覽行為時，這會很有用; 例如在回應式清單/詳細資訊場景中。