Pivô

O controle Pivot permite a passagem de toque entre um pequeno conjunto de seções de conteúdo.

Esse é o controle correto?

Para criar uma interface do usuário como Pivot ao usar a WinUI 3 e a SDK de aplicativos do Windows, use o controle SelectorBar.

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

Para alcançar os padrões comuns de navegação superior, 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 são listadas aqui:

• O Pivot tem suporte para entrada por toque para alternar entre itens.
• Itens de estouro em um carrossel do Pivot, enquanto o NavigationView usa um menu suspenso para que os usuários possam ver todos os itens.
• O controle Pivot manipula a navegação entre seções de conteúdo, enquanto o NavigationView permite mais controle sobre o comportamento da navegação.

UWP e WinUI 2

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

É recomendável usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles.

Usar o NavigationView em vez do Pivot

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

Esse XAML cria um NavigationView com 3 seções de conteúdo, como o exemplo de Pivot em Criar um controle dinâmico.

<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>

O NavigationView fornece mais controle sobre a personalização de navegação e requer o code-behind correspondente. Para acompanhar o XAML acima, use o seguinte code-behind:

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;
   }  
}

Esse código simula a experiência de navegação interna do controle Pivot, menos a experiência de entrada por toque entre seções de conteúdo. No entanto, como você pode ver, você também pode personalizar vários pontos, incluindo a transição animada, os parâmetros de navegação e os recursos de pilha.

Criar um controle pivot

Este XAML cria um controle Pivot básico com três 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 do Pivot

O Pivot é um ItemsControl e, por isso, pode conter uma coleção de itens de qualquer tipo. Qualquer item que você adicionar ao Pivot que não seja explicitamente um PivotItem será implicitamente encapsulado em um PivotItem. Como um Pivot é frequentemente usado para navegar entre as páginas de conteúdo, é comum preencher a coleção Items diretamente com elementos de XAML UI. Você também pode definir a propriedade ItemsSource para uma fonte de dados. Os itens vinculados a ItemsSource podem ser de qualquer tipo, mas se eles não forem explicitamente PivotItems, você deverá 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 do Pivot

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

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

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

Interação do Pivot

O controle apresenta estas interações de gesto de toque:

• Clicar em um cabeçalho de item pivot navega até o conteúdo da seção desse cabeçalho.
• Deslizar para a esquerda ou direita em um cabeçalho de item pivot navega até a seção adjacente.
• Deslizar para a esquerda ou direita no conteúdo da seção navega até a seção adjacente.

O controle vem em dois modos:

Estático

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

Carrossel

• Um carrossel de Pivots quando todos os cabeçalhos pivot não cabem no espaço permitido.
• Tocar em um rótulo de pivot navega até a página correspondente e o rótulo do pivot ativo será exibido na primeira posição.
• Itens Pivot em um carrossel fazem um loop da última para a primeira seção de pivot.

Tópicos relacionados

• Classe Pivot
• SelectorBar
• NavigationView
• TabView
• Noções básicas de design de navegação