Idioma: HTML | XAML

Animando interface do usuário de borda (XAML)

Applies to Windows only

Use animações de interface do usuário de borda para mostrar ou ocultar a interface do usuário que tem origem na borda da tela. Ou o usuário ou o aplicativo pode inserir essa interface do usuário na exibição. Use EdgeUIThemeTransition ou interfaces do usuário de borda menores, como barras de aplicativo ou barras de comando. Use PaneThemeTransition para interfaces do usuário maiores, como painéis ou painéis que deslizam. Essas animações geralmente são usadas em controles personalizados; os controles existentes, como AppBar e CommandBar já têm animações de biblioteca para interfaces do usuário de borda inseridas e para obter o comportamento animado, bastará incluir esses controles na interface do usuário.

A interface do usuário pode sobrepor o aplicativo ou fazer parte da superfície principal do aplicativo. Se a interface do usuário fizer parte da superfície principal do aplicativo, talvez seja necessário redimensionar o restante do aplicativo para liberar espaço para a nova interface do usuário quando ela aparecer.

Diagrama básico de um elemento de borda

Há dois tipos de elementos de borda, sendo que cada um tem o próprio conjunto de APIs de animação: a interface do usuário de borda e a interface do usuário de painel.

  • Use a animação de interface do usuário de borda com interfaces do usuário de borda menores, se a sua intenção for animar um controle personalizado com comportamento semelhante à AppBar, CommandBar ou parecido. Você também poderá definir uma superfície/área da interface do usuário para erros e avisos que vêm das ações do seu aplicativo. Se você estiver abordando esse cenário, não se esqueça de ler as Diretrizes para submenus; as interface do usuário de borda podem não ser apropriadas para o seu cenário.
  • Use a animação de interface do usuário de painel com uma interface de usuário de borda maior e que ocupe mais espaço na janela do aplicativo. Um exemplo do tamanho do painel que estamos mencionando aqui seria o teclado virtual.

Ilustração que mostra a diferença de tamanho entre uma interface do usuário de borda e uma interface do usuário de painel

Animações baseadas em borda no comportamento de controle do Windows Runtime padrão

Os controles XAML não usam explicitamente as animações baseadas em borda nos modelos de controle. Mas eles possuem um comportamento animado inserido. A forma recomendada para incluir interfaces do usuário de borda é AppBar (ou CommandBar) por meio das propriedades Page.BottomAppBar e Page.TopAppBar, que aplicarão automaticamente todas as transições e comportamento de interação para você. Para obter mais informações, consulte Adicionando barras de aplicativos.

Se você estiver usando submenus (Flyout, MenuFlyout, SettingsFlyout), eles também terão animações inseridas. Mas eles não são realmente uma interface do usuário de borda porque precisam estar associados ao contexto que os fez serem exibidos, e não à borda da janela do aplicativo. Você pode usar submenus em uma interface do usuário invocada de uma AppBar, mas isso ainda é uma situação diferente da interface do usuário de borda pura. Para saber mais, veja Adicionando submenus e menus e Animando a interface do usuário pop-up.

Outros recursos

O Exemplo de pop-up mostra o uso de PaneThemeTransition para Popup.ChildTransitions.

Veja Diretrizes e lista de verificação para animações de interface do usuário de borda para obter as práticas recomendadas de design no uso dessas animações.

Tópicos relacionados

Animando sua interface do usuário
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
Adicionando barras de aplicativos
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

Mostrar:
© 2015 Microsoft