Transições de página

  • Artigo

As transições de página navegam entre as páginas de um app, fornecendo comentários como o relacionamento entre as páginas. As transições de página ajudam os usuários a compreender se eles estão na parte superior de uma hierarquia de navegação, movendo entre as páginas irmãs ou navegando pela hierarquia da página.

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

Exemplos

WinUI 2 Gallery
Galeria WinUI

Se você tiver o aplicativo WinUI 2 Gallery 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 de página é a combinação de uma animação de deslizamento para cima 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 à parte superior de uma pilha de navegação, como navegar entre guias ou itens de navegação esquerda.

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

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

A animação de atualização de página é representada pelo 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 de página.

Drill

Use a análise detalhada quando os usuários navegarem mais profundamente em um app, por exemplo, quando estiverem exibindo mais informações após selecionar um item.

A sensação desejada é que o usuário tenha entrado mais profundamente no aplicativo.

animação de análise detalhada

A animação de análise detalhada é representada pela classe DrillInNavigationTransitionInfo.

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

Slide horizontal

Use o slide horizontal para mostrar que as páginas irmãos aparecem próximas umas das outras. O controle NavigationView usa automaticamente essa animação para navegação superior, mas se você estiver criando sua própria experiência de navegação horizontal, poderá implementar o slide horizontal com SlideNavigationTransitionInfo.

O sentimento desejado é 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 reproduzir 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());

A supressão da animação será útil se você estiver criando sua própria transição por meio das Animações conectadas ou animações de mostrar/ocultar implícitas.

Navegação regressiva

Para reproduzir uma transição específica ao navegar para trás, use Frame.GoBack(NavigationTransitionInfo).

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.