Partilhar via

Pivô

O controle Pivot permite passar o dedo por toque entre um pequeno conjunto de seções de conteúdo.

O foco padrão sublinha o cabeçalho selecionado

Será este o controlo correto?

Advertência

O controle Pivot não é recomendado para padrões de design do Windows 11. Recomendamos vivamente a utilização de uma destas alternativas:

Para criar uma interface do utilizador semelhante a Pivot ao usar o WinUI 3 e o Windows App SDK, use o controlo SelectorBar.

Para criar uma interface do usuário com guias, use um controle de TabView.

Para alcançar padrões de navegação superiores comuns, recomendamos o uso do NavigationView, que se adapta automaticamente a diferentes tamanhos de tela e permite uma maior personalização.

Algumas diferenças importantes entre o NavigationView e o Pivot estão listadas aqui:

  • O Pivot suporta navegar através do toque para alternar entre itens.
  • Itens excedentes num carrossel Pivot, ao passo que o NavigationView usa um menu suspenso para excedentes para que os utilizadores possam ver todos os itens.
  • O Pivot lida com a navegação entre as seções de conteúdo, enquanto o NavigationView permite mais controle sobre o comportamento de navegação.

Usar NavigationView em vez de Pivot

Se a interface do usuário do seu aplicativo usa o controle Pivot, você pode converter Pivot em NavigationView seguindo este exemplo.

Este XAML cria um NavigationView com 3 secções de conteúdo, como no exemplo de um controlo Pivot em Criar um controlo de pivot.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView oferece um maior controlo sobre a personalização da navegação e requer um code-behind correspondente. Para acompanhar o XAML acima, utilize o seguinte código subjacente:

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

Este código imita a experiência de navegação oferecida pelo controlo Pivot, exceto pela funcionalidade de deslizar entre as seções de conteúdo por toque. No entanto, como pode ver, também pode personalizar vários pontos, incluindo a transição animada, os parâmetros de navegação e as capacidades de empilhamento.

Criar um controle de pivô

Advertência

O controle Pivot não é recomendado para padrões de design do Windows 11. Recomendamos vivamente a utilização de uma destas alternativas:

Este XAML cria um controle Pivot básico com 3 seções de conteúdo.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Itens de pivô

Pivot é um ItemsControl, portanto, pode conter uma coleção de itens de qualquer tipo. Qualquer item adicionado ao Pivot que não seja explicitamente um PivotItem é implicitamente encapsulado em um PivotItem. Como um Pivot é frequentemente usado para navegar entre páginas de conteúdo, é comum preencher diretamente a coleção Itens com elementos da interface do usuário XAML. Ou, você pode definir a propriedade ItemsSource como uma fonte de dados. Os itens vinculados no ItemsSource podem ser de qualquer tipo, mas se não forem explicitamente PivotItems, você deve definir um ItemTemplate e HeaderTemplate para especificar como os itens são exibidos.

Você pode usar a propriedade SelectedItem para obter ou definir o item ativo do Pivot. Use a propriedade SelectedIndex para obter ou definir o índice do item ativo.

Cabeçalhos dinâmicos

Você pode usar as propriedades LeftHeader e RightHeader para adicionar outros controlos ao cabeçalho Pivot.

Por exemplo, você pode adicionar um CommandBar no RightHeader do pivô.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Interação de pivô

O controlo apresenta estas interações por gestos de toque:

  • Tocar num cabeçalho de item pivot navega para o conteúdo da seção desse cabeçalho.
  • Passar o dedo para a esquerda ou para a direita no cabeçalho de um item de pivô navega até a seção adjacente.
  • Passar o dedo para a esquerda ou para a direita no conteúdo da seção navega para a seção adjacente.

O controle vem em dois modos:

Estacionário

  • Os pivôs ficam estacionários quando todos os cabeçalhos de pivô cabem dentro do espaço permitido.
  • Tocar em um rótulo de pivô navega até a página correspondente, embora o pivô em si não se mova. O pivô ativo é realçado.

Carrossel

  • Carrossel de pivôs quando todos os cabeçalhos de pivô não cabem dentro do espaço permitido.
  • Tocar num rótulo de pivô navega até a página correspondente, e o rótulo de pivô ativo será movido para a primeira posição.
  • Pivotar itens em um loop de carrossel da última para a primeira seção de pivô.

Sugestão

  • Evite usar mais de 5 cabeçalhos ao utilizar o modo carrossel, como repetir mais de 5 pode causar confusão.
  • Os cabeçalhos pivô não devem usar a funcionalidade de carrossel num ambiente de 10 pés. Defina a propriedade IsHeaderItemsCarouselEnabled como false se seu aplicativo será executado no Xbox.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles.

  • Last updated on