Condividi tramite

Pivot

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

Il focus predefinito sottolinea l'intestazione selezionata

Questo è il controllo giusto?

Avvertimento

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 e Windows App SDK, usare il controllo SelectorBar .

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

Per ottenere i modelli di navigazione superiori 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 eccedenza in un carosello Pivot, mentre NavigationView utilizza un menu a tendina per l'overflow che consente agli utenti di visualizzare tutti gli elementi.
  • Il controllo Pivot gestisce la navigazione tra le sezioni di contenuto, mentre NavigationView consente un maggior controllo sul comportamento di navigazione.

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 maggiore controllo sulla personalizzazione della navigazione e richiede il codice dietro 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

Avvertimento

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 il titolo di un elemento pivot, si accede al contenuto della sezione corrispondente.
  • Lo scorrimento rapido verso sinistra o destra su un'intestazione di pivot passa alla sezione adiacente.
  • Scorrere verso sinistra o destra nel contenuto della sezione naviga alla sezione adiacente.

Il controllo è disponibile in due modalità:

Stazionaria

  • Gli elementi pivot rimangono 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.

Carosello

  • Attiva la rotazione del carosello 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à mostrata per prima.
  • Elementi pivot in un ciclo a carosello dalla sezione pivot finale a quella iniziale.

Suggerimento

  • Evitare di utilizzare più di 5 intestazioni quando si usa la modalità *carousel*, perché ripetere più di 5 volte può risultare confuso.
  • Le intestazioni di pivot non dovrebbero scorrere in un ambiente da 10 piedi. Se l'app viene eseguita su Xbox, impostare la proprietà IsHeaderItemsCarouselEnabled su false.

UWP e WinUI per la piattaforma UWP

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 .

Ti consigliamo di usare la versione più recente di WinUI per la piattaforma UWP per ottenere gli stili e i modelli più recenti per tutti i controlli.

  • Last updated on