Dinâmico

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 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 suporta deslizar com toque para alternar entre itens.
• Itens excedentes em um carrossel do Pivot, enquanto o NavigationView utiliza um menu suspenso de excedentes 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.

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 Pivot em Criar um controle 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>

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, exceto pela navegação 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 da Tabela Dinâmica

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 para o conteúdo da seção daquele 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 de aba navega até a página correspondente, embora a aba em si não se mova. 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 pivô navega até a página correspondente, e o rótulo de pivô ativo será movido para a primeira posição.
• Itens de pivô em um loop do carrossel da última até a primeira seção de pivô.

Tópicos relacionados

• Classe Pivot
• Barra de Seletores
• NavigationView
• Visualização de Abas
• Noções básicas de design de navegação