Partilhar via

Transições de página

  • Artigo

As transições de página navegam os usuários entre as páginas em um aplicativo, fornecendo feedback como a relação entre as páginas. As transições de página ajudam os usuários a entender se estão no topo de uma hierarquia de navegação, movendo-se entre páginas irmãs ou navegando mais profundamente na hierarquia de páginas.

Duas animações diferentes são fornecidas para navegação entre páginas em um aplicativo, Atualização de página e Drill, e são representadas por subclasses de NavigationTransitionInfo.

Exemplos

Galeria WinUI 2
Galeria WinUI

Se você tiver o aplicativo Galeria do WinUI 2 instalado, clique aqui para abrir o aplicativo e ver Transições de Página em ação.

Atualização de página

A atualização da página é uma combinação de uma animação de slide up e uma animação de fade in para o conteúdo de entrada. Use a atualização de página quando o usuário for levado para o topo de uma pilha de navegação, como navegar entre guias ou itens de navegação à esquerda.

A sensação desejada é que o usuário recomeçou.

animação de atualização de página

A animação de atualização da página é representada pela EntranceNavigationTransitionInfoClass.

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

Observação: Um quadro usa automaticamente NavigationThemeTransition para animar a navegação entre duas páginas. Por padrão, a animação é a atualização da página.

Drill

Use o drill quando os usuários navegarem mais profundamente em um aplicativo, como exibir mais informações depois de selecionar um item.

A sensação desejada é que o usuário tenha se aprofundado no aplicativo.

Animação de broca

A animação de drill é representada pela classe DrillInNavigationTransitionInfo.

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

Corrediça horizontal

Use o slide horizontal para mostrar que as páginas irmãs aparecem uma ao lado da outra. O controle NavigationView usa automaticamente essa animação para a navegação superior, mas se você estiver criando sua própria experiência de navegação horizontal, poderá implementar o slide horizontal com SlideNavigationTransitionInfo.

A sensação desejada é que o usuário está navegando entre páginas que estão próximas umas das outras.

// 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 } );

Suprimir

Para evitar a reprodução de qualquer animação durante a navegação, use SuppressNavigationTransitionInfo no lugar de outros subtipos NavigationTransitionInfo.

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

Suprimir a animação é útil se você estiver criando sua própria transição usando animações conectadas ou animações implícitas de mostrar/ocultar.

Navegação regressiva

Você pode usar Frame.GoBack(NavigationTransitionInfo) para reproduzir uma transição específica ao navegar para trás.

Isso pode ser útil quando você modifica o comportamento de navegação dinamicamente com base no tamanho da tela; por exemplo, em um cenário de lista/detalhes responsivos.