Skip to content

Latest commit

 

History

History
98 lines (63 loc) · 6.39 KB

navigationthemetransition.md

File metadata and controls

98 lines (63 loc) · 6.39 KB
Raw
-api-id -api-type
T:Microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition
winrt class

Microsoft.UI.Xaml.Media.Animation.NavigationThemeTransition

-description

Provides page navigation animations.

-xaml-syntax

<NavigationThemeTransition .../>

-remarks

With Windows 10, version 1803, a Frame uses NavigationThemeTransition to animate navigation between Pages by default.

You can use NavigationThemeTransition to add animated transitions when your app navigates between different pieces of content in a Frame. You can add NavigationThemeTransition to the Transitions collection of the Page that is being navigated to, or the ContentTransitions collection for the navigation Frame. In general, we recommend that you use the frame's ContentTransitions property to ensure that transitions occur for all navigation pages.

This example shows NavigationThemeTransition added to the ContentTransitions collection of a Frame.

<Frame ...>
    <Frame.ContentTransitions>
        <TransitionCollection>
            <NavigationThemeTransition/> 
        </TransitionCollection> 
    </Frame.ContentTransitions> 
    ...
</Frame> 

var frame = new Frame(); 
frame.ContentTransitions = new TransitionCollection(); 
frame.ContentTransitions.Add(new NavigationThemeTransition());

In Windows 10, two different animations are provided for navigation between pages in an app. The navigation animations are represented by subclasses of NavigationTransitionInfo.

  • Page Refresh: Page refresh is the default animation for page navigation. It is a combination of a slide up animation and a fade in animation for the incoming content. You should use page refresh when you use top level navigation like a navigation menu.

The page refresh animation is represented by the EntranceNavigationTransitionInfo class. You can use the EntranceNavigationTransitionInfo.IsTargetElement attached property to apply the page refresh motion to a subset of the page; for example, all content excluding the commanding UI of the page.

  • Drill In: You should use the drill in animation when a user interacts with UI on a page that represents a link to another page. For example, in a page that represents a list of albums, when a user clicks on an album item, there should be a drill in transition to the album page.

The drill in animation is represented by the DrillInNavigationTransitionInfo class.

By default, NavigationThemeTransition plays a page refresh animation. However, you can override this behavior by setting the DefaultNavigationTransitionInfo property of NavigationThemeTransition. The NavigationTransitionInfo value of this property is used for all navigation by default.

You can specify the animation to use for a particular navigation by using the overload of Frame.Navigate that takes 3 parameters.

In this example, when a user "drills in" from an album list to a page representing a particular album, a music browsing app requests a drill in animation.

void AlbumsListView_ItemClick(object sender, ItemClickEventArgs e) 
{
    // Get albumId from clicked item... 
    Frame.Navigate(typeof(AlbumPage), albumId, new DrillInNavigationTransitionInfo());
}

In addition, you can use the Frame.GoBack(NavigationTransitionInfo) to play a specific transition when navigating back in the Frame back stack. This can be useful when you modify navigation behavior dynamically based on screen size; for example, in a responsive master/detail scenario. For more examples, see the XAML master/detail sample.

SuppressNavigationTransitionInfo

You can use SuppressNavigationTransitionInfo in the place of other NavigationTransitionInfo subtypes when you want to avoid playing any animation during navigation.

// Navigate to your first page without a transition 
Frame.Navigate(typeof(MainPage), null, new SuppressNavigationTransitionInfo());

-examples

Tip

For more info, design guidance, and code examples, see Page transitions.

[!div class="nextstepaction"] Open the WinUI 3 Gallery app and see PageTransitions in action

The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

-see-also

Transition, EntranceNavigationTransitionInfo, DrillInNavigationTransitionInfo, SuppressNavigationTransitionInfo, Frame.Navigate, Frame.GoBack(NavigationTransitionInfo), XAML Master/detail sample