Pivot

  • Articolo

Il controllo Pivot consente lo scorrimento tramite tocco tra un set ridotto di sezioni di contenuto.

Lo stato attivo predefinito sottolinea l'intestazione selezionata

È il controllo giusto?

Avviso

Il controllo Pivot non è consigliato per i modelli di progettazione di Windows 11. Piuttosto, è consigliabile usare una delle seguenti alternative:

Per creare un'interfaccia utente simile a pivot quando si usa WinUI 3 e il SDK per app di Windows, usare il controllo SelectorBar.

Per creare un'interfaccia utente a schede, usare un controllo TabView.

Per ottenere i modelli di schede e di spostamento più comuni, è consigliabile usare NavigationView, che si adatta automaticamente alle diverse dimensioni dello schermo e consente una maggiore personalizzazione.

Di seguito sono elencate alcune differenze principali tra NavigationView e Pivot:

  • Pivot supporta lo scorrimento rapido tramite tocco per passare da un elemento all'altro.
  • Elementi in overflow in un carosello Pivot, mentre NavigationView utilizza un overflow del menu a discesa in modo che gli utenti possano visualizzare tutti gli elementi.
  • Il controllo Pivot gestisce lo spostamento tra sezioni di contenuto, mentre NavigationView consente un maggior controllo sul comportamento di spostamento.

Piattaforma UWP e WinUI 2

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

Le API per questo controllo esistono nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli.

Usare NavigationView al posto di Pivot

Se l'interfaccia utente dell'app usa il controllo Pivot, è possibile convertire Pivot in NavigationView seguendo questo esempio.

Questo codice XAML crea un controllo NavigationView con tre sezioni di contenuto, come il controllo Pivot di esempio in Creare un controllo 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 offre un maggior controllo sulla personalizzazione dello spostamento e richiede il code-behind corrispondente. Per accompagnare il codice XAML sopra riportato, usa il code-behind seguente:

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

Questo codice simula l'esperienza di spostamento predefinita del controllo Pivot, ad eccezione dell'esperienza di scorrimento tramite tocco tra le sezioni di contenuto. Tuttavia, come puoi notare, puoi anche personalizzare diversi punti, tra cui la transizione animata, i parametri di spostamento e le funzionalità dello stack.

Creare un controllo pivot

Avviso

Il controllo Pivot non è consigliato per i modelli di progettazione di Windows 11. Piuttosto, è consigliabile usare una delle seguenti alternative:

Questo XAML crea un controllo Pivot di base con tre sezioni di contenuto.

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

Elementi Pivot

Pivot è itemsControl, quindi, può contenere una raccolta di elementi di qualsiasi tipo. Qualsiasi elemento aggiunto al Pivot che non è esplicitamente un oggetto PivotItem viene incluso in modo implicito in un oggetto PivotItem. Poiché un Pivot viene spesso usato per spostarsi tra pagine di contenuto, è comune popolare la raccolta Elementi direttamente con gli elementi dell'interfaccia utente XAML. In alternativa, è possibile impostare la proprietà ItemsSource su un'origine dati. Gli elementi associati in ItemsSource possono essere di qualsiasi tipo, ma se non sono elementi PivotItems in modo esplicito, è necessario definire itemTemplate e HeaderTemplate per specificare la modalità di visualizzazione degli elementi.

È possibile utilizzare la proprietà SelectedItem per ottenere o impostare l'elemento attivo del pivot. Utilizzare la proprietà SelectedIndex per ottenere o impostare l'indice dell'elemento attivo.

Intestazioni pivot

È possibile utilizzare le proprietà LeftHeader e RightHeader per aggiungere altri controlli all'intestazione Pivot.

Puoi ad esempio aggiungere un oggetto CommandBar nella proprietà RightHeader del controllo Pivot.

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

Interazione pivot

Il controllo include queste interazioni tramite tocco:

  • Toccando un'intestazione di elemento pivot, si passa al contenuto della sezione dell'intestazione.
  • Lo scorrimento rapido verso sinistra o destra in un'intestazione di elemento pivot passa alla sezione adiacente.
  • Lo scorrimento rapido verso sinistra o destra nel contenuto della sezione passa alla sezione adiacente.

Il controllo è disponibile in due modalità:

Stazionaria

  • I pivot sono fissi quando tutte le intestazioni pivot rientrano nello spazio consentito.
  • Toccando un'etichetta pivot si passa alla pagina corrispondente, anche se il pivot stesso non verrà spostato. Il pivot attivo è evidenziato.

Scorrevole

  • Pivots carousel quando tutte le intestazioni pivot non rientrano nello spazio consentito.
  • Toccando un'etichetta pivot si passa alla pagina corrispondente e l'etichetta pivot attiva verrà sequenziato nella prima posizione.
  • Elementi pivot in un ciclo carousel dall'ultima alla prima sezione pivot.

Suggerimento

  • Evitare di usare più di 5 intestazioni quando si usa la modalità carousel, poiché il ciclo di più di 5 può creare confusione.
  • Le intestazioni di pivot non dovrebbero scorrere in un ambiente a una distanza di 3 metri. Se l'app viene eseguita su Xbox, impostare la proprietà IsHeaderItemsCarouselEnabled su false.