Transições de página

Transições de página orientam os utilizadores entre páginas numa aplicação, 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 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 num aplicativo, de atualização de página e Drill, que são representadas por subclasses de NavigationTransitionInfo.

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

Atualização da página

A atualização de página é uma combinação de uma animação deslizante e um fade in animation para o conteúdo recebido. Use a atualização de página quando o utilizador for direcionado para o topo de uma pilha de navegação, como ao navegar entre guias ou itens da navegação à esquerda.

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

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

Furadeira

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

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

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ãs aparecem próximas umas das outras. O controle de 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.

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 reproduzir qualquer animação durante a navegação, use SuppressNavigationTransitionInfo em vez de outros subtipos de 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 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/detalhe responsivo.

Tópicos relacionados

• Navegar entre duas páginas
• Movimento no Windows