NavigationThemeTransition Class

Definition

Namespace:

Windows.UI.Xaml.Media.Animation

Provides page navigation animations.

public ref class NavigationThemeTransition sealed : Transition

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="DefaultNavigationTransitionInfo")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class NavigationThemeTransition final : Transition

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="DefaultNavigationTransitionInfo")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class NavigationThemeTransition : Transition

Public NotInheritable Class NavigationThemeTransition
Inherits Transition

<NavigationThemeTransition .../>

Inheritance

Object Platform::Object IInspectable DependencyObject Transition NavigationThemeTransition

Attributes

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows requirements

Device family	Windows 10 (introduced in 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (introduced in v1.0)

Examples

Tip

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

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

• Get the WinUI 2 Gallery app (Microsoft Store)
• Get the source code (GitHub)

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

Constructors

NavigationThemeTransition()

Initializes a new instance of the NavigationThemeTransition class.

Properties

DefaultNavigationTransitionInfo	Gets or sets the default transition used when navigating between pages.
DefaultNavigationTransitionInfoProperty	Identifies the DefaultNavigationTransitionInfo dependency property.
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)

Methods

ClearValue(DependencyProperty)	Clears the local value of a dependency property. (Inherited from DependencyObject)
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)	Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject)
ReadLocalValue(DependencyProperty)	Returns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject)
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)	Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback. (Inherited from DependencyObject)

See also

• Transition
• EntranceNavigationTransitionInfo
• DrillInNavigationTransitionInfo
• SuppressNavigationTransitionInfo
• Navigate(TypeName, Object, NavigationTransitionInfo)
• GoBack(NavigationTransitionInfo)
• XAML Master/detail sample