Dela via

Pivot

Pivotkontrollen möjliggör touch-svepning mellan en liten uppsättning innehållsavsnitt.

Standardfokus understryks i markerat huvud

Är det här rätt kontroll?

Varning

Pivotkontrollen rekommenderas inte för Windows 11-designmönster. Vi rekommenderar starkt att du använder något av följande alternativ i stället:

Om du vill skapa ett pivotliknande användargränssnitt när du använder WinUI 3 och Windows App SDK använder du kontrollen SelectorBar .

Om du vill skapa ett användargränssnitt med flikar använder du en TabView-kontroll .

För att uppnå vanliga övre navigeringsmönster rekommenderar vi att du använder NavigationView, som automatiskt anpassas till olika skärmstorlekar och möjliggör större anpassning.

Här visas några viktiga skillnader mellan NavigationView och Pivot:

  • Pivot har stöd för pekswiping för att växla mellan objekt.
  • Spill över objekt i en pivotkarusell, medan NavigationView använder ett menylisteöverflöde så att användarna kan se alla objekt.
  • Pivot hanterar navigering mellan innehållsavsnitt, medan NavigationView ger mer kontroll över navigeringsbeteendet.

Använda NavigationView i stället för pivotering

Om appens användargränssnitt använder pivoteringskontrollen kan du konvertera Pivot till NavigationView efter det här exemplet.

Den här XAML-filen skapar en Navigeringsvy med tre innehållsavsnitt, till exempel Pivot i Skapa en pivotkontroll.

<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 ger mer kontroll över navigeringsanpassning och kräver motsvarande kod bakom. För att använda tillsammans med ovanstående XAML, använd följande bakomliggande kod:

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

Den här koden efterliknar pivotkontrollens inbyggda navigeringsupplevelse, minus pekswiping-upplevelsen mellan innehållsavsnitt. Men som du ser kan du också anpassa flera punkter, inklusive den animerade övergången, navigeringsparametrar och stackfunktioner.

Skapa en pivotkontroll

Varning

Pivotkontrollen rekommenderas inte för Windows 11-designmönster. Vi rekommenderar starkt att du använder något av följande alternativ i stället:

Den här XAML-filen skapar en grundläggande pivotkontroll med tre innehållsavsnitt.

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

Pivotobjekt

Pivot är en ItemsControl, så den kan innehålla en samling objekt av vilken typ som helst. Alla objekt som du lägger till i pivoten som inte uttryckligen är en PivotItem är implicit omslutna i en pivotitem. Eftersom en Pivot ofta används för att navigera mellan sidor med innehåll är det vanligt att fylla på Objekt-samlingen direkt med XAML UI-element. Eller så kan du ange egenskapen ItemsSource till en datakälla. Objekt som är bundna i ItemsSource kan vara av vilken typ som helst, men om de inte uttryckligen är pivotobjekt måste du definiera ett ItemTemplate och HeaderTemplate för att ange hur objekten ska visas.

Du kan använda egenskapen SelectedItem för att hämta eller ange pivotens aktiva objekt. Använd egenskapen SelectedIndex för att hämta eller ange indexet för det aktiva objektet.

Pivotrubriker

Du kan använda egenskaperna LeftHeader och RightHeader för att lägga till andra kontroller i pivotrubriken.

Du kan till exempel lägga till en CommandBar i Pivotens RightHeader.

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

Pivotinteraktion

Kontrollen innehåller dessa interaktioner med pekgester:

  • Om du trycker på ett pivotobjekt navigerar du till rubrikens avsnittsinnehåll.
  • Om du sveper åt vänster eller höger i ett pivotobjekt navigerar du till det intilliggande avsnittet.
  • Om du sveper åt vänster eller höger i avsnittsinnehållet navigerar du till det intilliggande avsnittet.

Kontrollen finns i två lägen:

Stationär

  • Pivoter är stationära när alla pivotrubriker passar inom det tillåtna utrymmet.
  • Om du trycker på en pivotetikett navigerar du till motsvarande sida, men själva pivoten flyttas inte. Den aktiva pivoten är markerad.

Karusell

  • Roterar karusellen när alla pivotrubriker inte passar inom det tillåtna utrymmet.
  • Om du trycker på en pivotetikett navigerar du till motsvarande sida, och den aktiva pivotetiketten hamnar i den första positionen.
  • Pivotera objekt i en karuselloop från det sista till det första pivotavsnittet.

Tips/Råd

  • Undvik att använda fler än 5 rubriker när du använder karusellläge, eftersom det kan bli förvirrande att loopa mer än 5.
  • Pivotrubriker bör inte scrolla i en 10-fotsmiljö. Ange egenskapen IsHeaderItemsCarouselEnabled till false om appen ska köras på Xbox.

UWP och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

API:er för den här kontrollen finns i namnområdet Windows.UI.Xaml.Controls .

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller.

  • Last updated on