Compartilhar via

Transições de página

As transições de página navegam os usuários entre páginas em um aplicativo, fornecendo feedback sobre a relação entre as páginas. As transições de página ajudam os usuários a entender se estão na parte superior de uma hierarquia de navegação, movendo-se entre páginas irmãos 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, de atualização de página e drill, e são representadas por subclasses de NavigationTransitionInfo.

Abra o aplicativo da Galeria do WinUI 3 e veja Transições Implícitas em ação

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

Atualização de página

A atualização de página é uma combinação de uma animação de deslizamento para cima e uma animação de desvanecimento para o conteúdo de entrada. Use a atualização de página quando o usuário for levado para a parte superior de uma pilha de navegação, como navegar entre guias ou itens de navegação à esquerda.

O sentimento desejado é que o usuário começou de novo.

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

A animação de atualização de página é representada pela classe EntranceNavigationTransitionInfo .

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

Observação

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

Furadeira

Use a análise quando os usuários navegarem mais fundo em um aplicativo, como exibir mais informações depois de selecionar um item.

O sentimento desejado é que o usuário se sinta mais imerso no aplicativo.

animação de exercício

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

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

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

Suprimir a animação será útil se você estiver criando sua própria transição usando Animações Conectadas ou animações de exibição/ocultação implícitas.

Navegação para trás

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.

  • Last updated on