Pivotieren

  • Artikel

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:

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

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.
  • Überlaufelemente in einem Pivot-Karussell, während NavigationView ein Dropdown-Menü als Überlauf verwendet, damit die Benutzer alle Elemente sehen können.
  • Pivot verarbeitet die Navigation zwischen Inhaltsabschnitten, während NavigationView stärkere Kontrolle über das Navigationsverhalten ermöglicht.

UWP und WinUI 2

Wichtig

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 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente.

Verwenden von NavigationView anstelle von PowerPivot

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 Inhaltabschnitten, wie das Beispiel-Pivot 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 stärkere Kontrolle über Anpassungen der Navigation und erfordert entsprechenden CodeBehind. 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 zum Pivot-Steuerelement hinzugefügte Element, das nicht ausdrücklich ein 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 des Pivot-Steuerelements 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

  • Pivotiert Karussell, wenn alle Pivot-Kopfzeilen nicht in den zulässigen Bereich 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, wenn Sie den Karussellmodus verwenden, da eine Schleife mit 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.