PivotPivot

Il controllo Pivot consente lo scorrimento tramite tocco tra un set ridotto di sezioni di contenuto.The Pivot control enables touch-swiping between a small set of content sections.

Lo stato attivo predefinito sottolinea l'intestazione selezionata

Ottenere la libreria dell'interfaccia utente di WindowsGet the Windows UI Library

Logo WinUI

La libreria dell'interfaccia utente di Windows 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Per altre informazioni, vedere Raggio dell'angolo.For more info, see Corner radius. WinUI è un pacchetto NuGet che contiene nuovi controlli e funzionalità dell'interfaccia utente per le app di Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows.For more info, including installation instructions, see Windows UI Library.

API della piattaforma: classe Pivot, classe NavigationViewPlatform APIs: Pivot class, NavigationView class

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app XAML Controls Gallery, fai clic qui per aprirla e vedere il controllo Pivot in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

Il controllo Pivot, proprio come NavigationView, sottolinea l'elemento selezionato.The Pivot control, just like NavigationView, underlines the selected item.

Lo stato attivo predefinito sottolinea l'intestazione selezionata

È il controllo giusto?Is this the right control?

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.To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

Tuttavia, se lo spostamento richiede lo scorrimento tramite tocco, è preferibile usare Pivot.However, if your navigation requires touch-swiping, we recommend using Pivot.

Le altre differenze principali tra i controlli NavigationView e Pivot sono il comportamento di overflow predefinito e l'API di spostamento:The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • Il controllo Pivot scorre gli elementi di overflow, mentre NavigationView usa un overflow di menu a discesa in modo che gli utenti possano visualizzare tutti gli elementi.Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Il controllo Pivot gestisce lo spostamento tra sezioni di contenuto, mentre NavigationView consente un maggior controllo sul comportamento di spostamento.Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Usare NavigationView al posto di PivotUse NavigationView instead of Pivot

Se l'interfaccia utente della tua app usa il controllo Pivot, puoi convertire Pivot in NavigationView con il codice seguente.If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

Questo codice XAML crea un controllo NavigationView con tre sezioni di contenuto, come il controllo Pivot di esempio in Creare un controllo pivot.This XAML creates a NavigationView with 3 sections of content, like the example Pivot in Create a pivot control.

<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>
</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.NavigationView provides more control over navigation customization and requires corresponding code-behind. Per accompagnare il codice XAML sopra riportato, usa il code-behind seguente:To accompany the above XAML, use the following code-behind:

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

    navOptions.IsNavigationStackEnabled = False;

    switch (item.Name)
    {
        case "Section1Content":
            ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
            break;

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

        case "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.This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. Tuttavia, come puoi notare, puoi anche personalizzare diversi punti, tra cui la transizione animata, i parametri di spostamento e le funzionalità dello stack.However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

Creare un controllo pivotCreate a pivot control

Questo codice crea un controllo Pivot di base con tre sezioni di contenuto.This code creates a basic Pivot control with 3 sections of content.

<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 del controllo pivotPivot items

Pivot è un oggetto ItemsControl e quindi può contenere una raccolta di elementi di qualsiasi tipo.Pivot is an ItemsControl, so it can contain a collection of items of any type. Tutti gli elementi aggiunti al pivot che non sono esplicitamente PivotItem vengono inseriti in modo implicito in un PivotItem.Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. Poiché un pivot viene spesso usato per spostarsi tra le pagine di contenuto, è una pratica comune popolare la raccolta Items direttamente con elementi dell'interfaccia utente XAML.Because a Pivot is often used to navigate between pages of content, it's common to populate the Items collection directly with XAML UI elements. In alternativa, puoi impostare la proprietà ItemsSource su un'origine dati.Or, you can set the ItemsSource property to a data source. Gli elementi associati in ItemsSource possono essere di qualsiasi tipo, ma se non sono esplicitamente PivotItem, devi definire ItemTemplate e HeaderTemplate per specificare come devono essere visualizzati gli elementi.Items bound in the ItemsSource can be of any type, but if they aren't explicitly PivotItems, you must define an ItemTemplate and HeaderTemplate to specify how the items are displayed.

Puoi usare la proprietà SelectedItem per recuperare e impostare l'elemento selezionato.You can use the SelectedItem property to get or set the Pivot's active item. usa la proprietà SelectedItem per recuperare o impostare l'indice dell'elemento attivo.Use the SelectedIndex property to get or set the index of the active item.

Intestazioni di pivotPivot headers

Puoi usare le proprietà LeftHeader e RightHeader per aggiungere altri controlli all'intestazione di un pivot.You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

Puoi ad esempio aggiungere un oggetto CommandBar nella proprietà RightHeader del controllo Pivot.For example, you can add a CommandBar in the Pivot's RightHeader.

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

Interazione con i pivotPivot interaction

Il controllo supporta queste interazioni tramite movimento di tocco:The control features these touch gesture interactions:

  • Il tocco di un'intestazione di un elemento pivot consente di spostarsi al contenuto della sezione corrispondente.Tapping on a pivot item header navigates to that header's section content.
  • Lo scorrimento rapido verso sinistra o destra su un'intestazione di un elemento pivot consente di spostarsi alla sezione adiacente.Swiping left or right on a pivot item header navigates to the adjacent section.
  • Lo scorrimento rapido verso sinistra o destra sul contenuto di una sezione consente di spostarsi alla sezione adiacente.Swiping left or right on section content navigates to the adjacent section.

Il controllo è disponibile in due modalità:The control comes in two modes:

StazionariaStationary

  • I controlli pivot sono stazionari quando tutte le intestazioni rientrano nello spazio consentito.Pivots are stationary when all pivot headers fit within the allowed space.
  • Toccando l'etichetta del pivot si passa alla pagina corrispondente, anche se l'elemento pivot stesso non si sposta.Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. L'elemento pivot attivo viene evidenziato.The active pivot is highlighted.

ScorrevoleCarousel

  • I controlli pivot scorrono quando tutte le intestazioni non rientrano nello spazio consentito.Pivots carousel when all pivot headers don't fit within the allowed space.
  • Toccando un'etichetta del pivot si passa alla pagina corrispondente e l'etichetta dell'elemento pivot attivo scorre in prima posizione.Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • Gli elementi pivot scorrono in ciclo dall'ultima alla prima sezione pivot.Pivot items in a carousel loop from last to first pivot section.

Nota Le intestazioni di pivot non dovrebbero scorrere in un ambiente a una distanza di 3 metri.Note Pivot headers should not carousel in a 10ft environment. Se l'app viene eseguita su Xbox, imposta la proprietà IsHeaderItemsCarouselEnabled su false.Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

RaccomandazioniRecommendations

  • Evita di usare più di 5 intestazioni quando usi la modalità scorrevole (ciclica), perché un numero superiore potrebbe disorientare.Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

Scaricare il codice di esempioGet the sample code