Freigeben über

Drehpunkt

Das Pivot-Steuerelement ermöglicht Touch-Wischen zwischen einem kleinen Satz von Inhaltsabschnitten.

Standardfokus unterstreicht ausgewählte Überschrift

Ist dies das richtige Steuerelement?

Warnung

Das Pivot-Steuerelement wird für Windows 11 Entwurfsmuster nicht empfohlen. Wir empfehlen dringend, stattdessen eine der folgenden Alternativen zu verwenden:

Verwenden Sie das SelectorBar-Steuerelement , um eine Pivot-ähnliche Benutzeroberfläche zu erstellen, wenn Sie WinUI und das Windows App SDK verwenden.

Um eine Benutzeroberfläche mit Registerkarten zu erstellen, verwenden Sie ein TabView-Steuerelement.

Um gängige Top-Navigationsmuster zu erreichen, empfehlen wir die Verwendung von NavigationView, das sich automatisch an unterschiedliche Bildschirmgrößen anpasst und eine größere Anpassungsfähigkeit ermöglicht.

Einige wichtige Unterschiede zwischen NavigationView und Pivot sind hier aufgeführt:

  • Pivot unterstützt das Wischen durch Berührung, um zwischen Elementen zu wechseln.
  • Überlaufobjekte in einem Pivot-Karussell, während NavigationView ein Dropdown-Menü-Überlauf verwendet, damit Benutzer alle Objekte sehen können.
  • Pivot verarbeitet die Navigation zwischen Inhaltsabschnitten, während NavigationView stärkere Kontrolle über das Navigationsverhalten ermöglicht.

Verwenden Sie NavigationView anstelle von Pivot

Wenn die Benutzeroberfläche Ihrer Anwendung das Pivot-Steuerelement verwendet, können Sie Pivot in NavigationView konvertieren, indem Sie diesem Beispiel folgen.

Dieses XAML erstellt eine NavigationView mit 3 Inhaltsabschnitten, ähnlich dem Pivot-Beispiel in Erstellen eines Pivot-Steuerelements.

<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 bietet mehr Kontrolle bei der Anpassung der Navigation und erfordert den entsprechenden Code-Behind. Verwenden Sie den folgenden CodeBehind zusammen mit dem oben stehenden XAML:

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

Dieser Code imitiert die integrierte Navigationsumgebung des Pivot-Steuerelements ohne die Touch-Wischen-Erfahrung zwischen Inhaltsabschnitten. Wie Sie sehen können, könnten Sie aber auch mehrere Aspekte anpassen, einschließlich des animierten Übergangs, der Navigationsparameter und der Stapelfunktionen.

Ein Pivot-Control erstellen

Warnung

Das Pivot-Steuerelement wird für Windows 11 Entwurfsmuster nicht empfohlen. Wir empfehlen dringend, stattdessen eine der folgenden Alternativen zu verwenden:

Dieses XAML erstellt ein einfaches Pivot-Steuerelement mit 3 Inhaltsabschnitten.

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

Pivot-Elemente

Pivot ist ein ItemsControl, daher kann es eine Sammlung von Elementen jeden Typs enthalten. Jedes Element, das Sie zum Pivot-Steuerelement hinzufügen und das kein ausdrückliches PivotItem-Element ist, wird implizit in ein PivotItem eingeschlossen. Da ein Pivot-Element häufig zum Navigieren zwischen Inhaltsseiten verwendet wird, ist es üblich, die Sammlung von Elementen direkt mit XAML-UI-Elementen zu füllen. Alternativ können Sie die Eigenschaft ItemsSource auf eine Datenquelle festlegen. In der ItemsSource gebundene Elemente können beliebigen Typs sein, wenn es sich jedoch nicht explizit um PivotItems handelt, müssen Sie eine ItemTemplate- und eine HeaderTemplate-Eigenschaft definieren, um festzulegen, wie die Elemente angezeigt werden sollen.

Mit der Eigenschaft SelectedItem können Sie das aktive Element der Pivot-Steuerung abrufen oder festlegen. Mit der Eigenschaft SelectedIndex können Sie den Index des aktiven Elements abrufen oder festlegen.

Pivot-Kopfzeilen

Sie können die Eigenschaften LeftHeader und RightHeader verwenden, um weitere Steuerelemente zum Pivotheader hinzuzufügen.

Sie können dem RightHeader des Pivot-Steuerelements z. B. eine CommandBar hinzufügen.

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

Pivot-Interaktion

Die Steuerung bietet diese Touch-Gesten-Interaktionen:

  • Wenn Sie auf eine Pivot-Elementüberschrift tippen, navigieren Sie zum Inhalt des betreffenden Abschnitts.
  • Wenn Sie in der Kopfzeile eines Pivot-Elements nach links oder rechts streichen, navigieren Sie zum angrenzenden Abschnitt.
  • Wenn Sie auf dem Inhalt eines Abschnitts nach links oder rechts streichen, navigieren Sie zum benachbarten Abschnitt.

Die Steuerung erfolgt in zwei Modi:

Stationär

  • Pivots sind stationär, wenn alle Pivot-Köpfe in den zulässigen Bereich passen.
  • Wenn Sie auf eine Pivot-Beschriftung tippen, navigieren Sie zu der entsprechenden Seite, obwohl sich der Pivot selbst nicht bewegt. Der aktive Drehpunkt wird hervorgehoben.

Karussell

  • Dreht das Karussell, wenn alle Pivotköpfe nicht in den verfügbaren Platz passen.
  • Durch Tippen auf eine Pivot-Beschriftung wird die entsprechende Seite aufgerufen, und die aktive Pivot-Beschriftung wird an die erste Position verschoben.
  • Pivot-Elemente in einer Karussellschleife vom letzten zum ersten Pivot-Abschnitt.

Tipp

  • Vermeiden Sie die Verwendung von mehr als 5 Überschriften im Karussellmodus, da das Durchlaufen von mehr als 5 Überschriften unübersichtlich werden kann.
  • Pivot-Header sollten in einer 10ft Umgebung nicht kreiseln. Setzen Sie die Eigenschaft IsHeaderItemsCarouselEnabled auf false, wenn Ihre App auf der Xbox läuft.

UWP und WinUI für UWP

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI für UWP , um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen.

  • Last updated on