NavigationThemeTransition NavigationThemeTransition NavigationThemeTransition NavigationThemeTransition Class


Provides page navigation animations.

public : sealed class NavigationThemeTransition : Transition
struct winrt::Windows::UI::Xaml::Media::Animation::NavigationThemeTransition : Transition
public sealed class NavigationThemeTransition : Transition
Public NotInheritable Class NavigationThemeTransition Inherits Transition
<NavigationThemeTransition .../>

Windows 10 requirements

Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)



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

If you have the XAML Controls Gallery app installed, click here to open the app and see Page Transitions in action.


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 ...>

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.


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()); 


NavigationThemeTransition() NavigationThemeTransition() NavigationThemeTransition() NavigationThemeTransition()

Initializes a new instance of the NavigationThemeTransition class.


DefaultNavigationTransitionInfo DefaultNavigationTransitionInfo DefaultNavigationTransitionInfo DefaultNavigationTransitionInfo

Gets or sets the default transition used when navigating between pages.

DefaultNavigationTransitionInfoProperty DefaultNavigationTransitionInfoProperty DefaultNavigationTransitionInfoProperty DefaultNavigationTransitionInfoProperty

Identifies the DefaultNavigationTransitionInfo dependency property.

Dispatcher Dispatcher Dispatcher Dispatcher

Gets the CoreDispatcher that this object is associated with. The CoreDispatcher represents a facility that can access the DependencyObject on the UI thread even if the code is initiated by a non-UI thread.

(Inherited from DependencyObject)


ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty)

Clears the local value of a dependency property.

(Inherited from DependencyObject)
GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty)

Returns any base value established for a dependency property, which would apply in cases where an animation is not active.

(Inherited from DependencyObject)
GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty)

Returns the current effective value of a dependency property from a DependencyObject.

(Inherited from DependencyObject)
ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty)

Returns the local value of a dependency property, if a local value is set.

(Inherited from DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback)

Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance.

(Inherited from DependencyObject)
SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object)

Sets the local value of a dependency property on a DependencyObject.

(Inherited from DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64)

Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback.

(Inherited from DependencyObject)

See also