Delen via

Pivot

Met het draaibesturingselement kunt u met aanraakbewegingen schakelen tussen een kleine set inhoudssecties.

De standaardfocus onderstreept de geselecteerde koptekst

Is dit de juiste controle?

Waarschuwing

Het Pivot-besturingselement wordt niet aanbevolen voor Windows 11-ontwerppatronen. We raden u ten zeerste aan een van deze alternatieven te gebruiken:

Als u een draaitabelachtige gebruikersinterface wilt maken wanneer u WinUI 3 en de Windows App SDK gebruikt, gebruikt u het besturingselement SelectorBar .

Als u een gebruikersinterface met tabbladen wilt maken, gebruikt u een TabView- controle-element.

Als u algemene navigatiepatronen wilt bereiken, raden we u aan NavigationView-te gebruiken, die automatisch wordt aangepast aan verschillende schermgrootten en grotere aanpassingen mogelijk maakt.

Enkele belangrijke verschillen tussen de Navigatieweergave en Pivot worden hier vermeld:

  • Pivot biedt ondersteuning voor aanraakbewegingen om tussen items te schakelen.
  • Overlopende items in een Pivot-carrousel, terwijl NavigationView gebruikmaakt van een menu-dropdown overloop, zodat gebruikers alle items kunnen zien.
  • Pivot verwerkt navigatie tussen inhoudssecties, terwijl NavigationView meer controle biedt over het navigatiegedrag.

Navigatieweergave gebruiken in plaats van Pivot

Als de gebruikersinterface van uw app gebruikmaakt van het Pivot-besturingselement, kunt u Pivot converteren naar NavigationView volgens dit voorbeeld.

Met deze XAML maakt u een Navigatieweergave met drie secties met inhoud, zoals het voorbeeld van Pivot in Een draaibesturingselement maken.

<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 biedt meer controle over het aanpassen van navigatie en vereist bijbehorende code-behindbestanden. Gebruik de volgende achterliggende code om de bovenstaande XAML te begeleiden:

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

Met deze code wordt de ingebouwde navigatie-ervaring van het Pivot-besturingselement nagebootst, minus de aanraakbeweging tussen inhoudssecties. Zoals u kunt zien, kunt u echter ook verschillende punten aanpassen, waaronder de overgang met animatie, navigatieparameters en stapelmogelijkheden.

Een pivot-bedieningselement maken

Waarschuwing

Het Pivot-besturingselement wordt niet aanbevolen voor Windows 11-ontwerppatronen. We raden u ten zeerste aan een van deze alternatieven te gebruiken:

Met deze XAML maakt u een eenvoudig Pivot-besturingselement met drie secties met inhoud.

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

Draaitabelitems

Pivot is een ItemsControl, zodat deze een verzameling items van elk type kan bevatten. Elk item dat u toevoegt aan de Pivot, dat niet expliciet een PivotItem is, wordt impliciet omsloten door een PivotItem. Omdat een Pivot vaak wordt gebruikt om tussen pagina's met inhoud te navigeren, is het gebruikelijk om de Items-verzameling rechtstreeks te vullen met XAML UI-elementen. U kunt ook de eigenschap ItemsSource instellen op een gegevensbron. Items die in de ItemsBron zijn gebonden, kunnen van elk type zijn, maar als ze niet expliciet PivotItems zijn, moet u een ItemTemplate- en HeaderTemplate- definiëren om op te geven hoe de items worden weergegeven.

U kunt de eigenschap SelectedItem gebruiken om het actieve item van de Pivot op te halen of in te stellen. Gebruik de eigenschap SelectedIndex om de index van het actieve item op te halen of in te stellen.

Draaitabelkoppen

U kunt de eigenschappen LeftHeader en RightHeader gebruiken om andere besturingselementen toe te voegen aan de draaikop.

U kunt bijvoorbeeld een CommandBar toevoegen in de RightHeader van de Pivot.

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

Draaitabelinteractie

Het bedieningselement bevat deze aanraakgebaren:

  • Als u op een kop van een draaitabelitem tikt, gaat u naar de sectie-inhoud van die koptekst.
  • Door naar links of rechts te swipen op de kop van een pivot-item, navigeer je naar de aangrenzende sectie.
  • Als u naar links of rechts van de sectie-inhoud swipet, gaat u naar de aangrenzende sectie.

Het besturingselement heeft twee modi:

stationaire

  • Draaipunten zijn stationair wanneer alle draaikoppen binnen de toegestane ruimte passen.
  • Als u op een pivot-label tikt, navigeert u naar de bijbehorende pagina, maar de pivot zelf beweegt niet. Het actieve draaipunt is gemarkeerd.

Carrousel

  • Draai carrousel wanneer alle draaikoppen niet binnen de toegestane ruimte passen.
  • Als u op een draailabel tikt, gaat u naar de bijbehorende pagina en wordt het actieve draailabel op de eerste positie geplaatst.
  • Draaiitems in een carrousellus van laatste tot eerste draaisectie.

Aanbeveling

  • Vermijd het gebruik van meer dan 5 headers bij het gebruik van de carrouselmodus, omdat het herhalen van meer dan 5 verwarrend kan worden.
  • Kopteksten mogen niet roteren in een omgeving van 10ft. Stel de eigenschap IsHeaderItemsCarouselEnabled in op false als uw app op Xbox wordt uitgevoerd.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen.

  • Last updated on