PivotPivot

Das Pivot-Steuerelement ermöglicht Touch-Wischen zwischen einem kleinen Satz von Inhaltsabschnitten.The Pivot control enables touch-swiping between a small set of content sections.

Standardfokus als Unterstrich des ausgewählten Headers

Abrufen der Windows-UI-BibliothekGet the Windows UI Library

WinUI-Logo

Die Bibliothek „Windows UI“ enthält ab Version 2.2 eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Weitere Informationen finden Sie unter Eckradius.For more info, see Corner radius. WinUI ist ein NuGet-Paket, das neue Steuerelemente und Benutzeroberflächenfeatures für Windows-Apps enthält.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek).For more info, including installation instructions, see Windows UI Library.

Plattform-APIs: Pivot-Klasse, NavigationView-KlassePlatform APIs: Pivot class, NavigationView class

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn du die App XAML-Steuerelementekatalog installiert hast, klicke hier, um die App zu öffnen und Pivot-Steuerlement in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

Das Pivot-Steuerelement, ebenso wie NavigationView, unterstreicht das ausgewählte Element.The Pivot control, just like NavigationView, underlines the selected item.

Standardfokus als Unterstrich des ausgewählten Headers

Ist dies das richtige Steuerelement?Is this the right control?

Um gängige Muster für obere Navigation und Registerkarten zu erhalten, wird empfohlen, NavigationView zu verwenden, das sich automatisch an verschiedene Bildschirmgrößen anpasst und größere Anpassungsmöglichkeiten bietet.To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

Wenn Ihre Navigation jedoch Touch-Wischen erfordert, empfehlen wir die Verwendung von Pivot.However, if your navigation requires touch-swiping, we recommend using Pivot.

Die anderen Hauptunterschiede zwischen dem NavigationView- und dem Pivot-Steuerelement sind das Standardverhalten bei Überlauf und die Navigations-API:The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • Pivot verwendet für überlaufende Elemente ein Karussell, während NavigationView für Überlauf ein Menüdropdown verwendet, sodass Benutzer alle Elemente sehen können.Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Pivot verarbeitet die Navigation zwischen Inhaltsabschnitten, während NavigationView stärkere Kontrolle über das Navigationsverhalten ermöglicht.Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Verwenden von NavigationView anstelle von PowerPivotUse NavigationView instead of Pivot

Wenn die Benutzeroberfläche Ihrer App das Pivot-Steuerelement verwendet, können Sie mit dem folgenden Code Pivot in NavigationView konvertieren.If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

Dieses XAML erstellt eine NavigationView mit 3 Inhaltabschnitten, wie das Beispiel-Pivot in Erstellen eines Pivot-Steuerelements.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 bietet stärkere Kontrolle über Anpassungen der Navigation und erfordert entsprechenden CodeBehind.NavigationView provides more control over navigation customization and requires corresponding code-behind. Verwenden Sie den folgenden CodeBehind zusammen mit dem oben stehenden XAML: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;
    }  
}

Dieser Code imitiert die integrierte Navigationsumgebung des Pivot-Steuerelements ohne die Touch-Wischen-Erfahrung zwischen Inhaltsabschnitten.This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. Wie Sie sehen können, könnten Sie aber auch mehrere Aspekte anpassen, einschließlich des animierten Übergangs, der Navigationsparameter und der Stapelfunktionen.However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

Erstellen eines Pivot-SteuerelementsCreate a pivot control

Dieser Code erzeugt ein grundlegendes Pivot-Steuerelement mit 3 Inhaltsabschnitten.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>

Pivot-ElementePivot items

Pivot ist ein ItemsControl, daher kann es eine Sammlung von Elementen jeden Typs enthalten.Pivot is an ItemsControl, so it can contain a collection of items of any type. Jedes zum Pivot-Steuerelement hinzugefügte Element, das nicht ausdrücklich ein PivotItem-Element ist, wird implizit in ein PivotItem eingeschlossen.Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. 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.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. Alternativ können Sie die Eigenschaft ItemsSource auf eine Datenquelle festlegen.Or, you can set the ItemsSource property to a data source. 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.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.

Mit der Eigenschaft SelectedItem können Sie das aktive Element des Pivot-Steuerelements abrufen oder festlegen.You can use the SelectedItem property to get or set the Pivot's active item. Mit der Eigenschaft SelectedIndex können Sie den Index des aktiven Elements abrufen oder festlegen.Use the SelectedIndex property to get or set the index of the active item.

PivotheaderPivot headers

Sie können die Eigenschaften LeftHeader und RightHeader verwenden, um weitere Steuerelemente zum Pivotheader hinzuzufügen.You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

Sie können dem RightHeader des Pivot-Steuerelements z. B. eine CommandBar hinzufügen.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>

Pivot-InteraktionPivot interaction

Das Steuerelement erkennt die folgenden Touchgesteninteraktionen:The control features these touch gesture interactions:

  • Durch Tippen auf den Header eines Pivotelements wird zum Abschnittsinhalt dieses Headers navigiert.Tapping on a pivot item header navigates to that header's section content.
  • Durch Wischen nach links oder rechts auf dem Header eines Pivotelements wird zum benachbarten Abschnitt navigiert.Swiping left or right on a pivot item header navigates to the adjacent section.
  • Durch Wischen nach links oder rechts auf einem Abschnittsinhalt wird zum benachbarten Abschnitt navigiert.Swiping left or right on section content navigates to the adjacent section.

Das Steuerelement ist in zwei Modi verfügbar:The control comes in two modes:

StationärStationary

  • Pivots werden nicht verschoben, wenn alle Pivotheader in den zulässigen Bereich passen.Pivots are stationary when all pivot headers fit within the allowed space.
  • Durch Tippen auf eine Pivotbeschriftung wird zur entsprechenden Seite navigiert. Das Pivot selbst wird jedoch nicht verschoben.Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. Das aktive Pivot wird hervorgehoben.The active pivot is highlighted.

KarussellCarousel

  • Falls nicht alle Pivotheader in den verfügbaren Bereich passen, werden Pivots in einer Karussellansicht dargestellt.Pivots carousel when all pivot headers don't fit within the allowed space.
  • Durch Tippen auf eine Pivotbeschriftung wird die entsprechende Seite aufgerufen, und die aktive Pivotbeschriftung rückt an die erste Position.Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • Pivotelemente in einer Karussellschleife wechseln vom letzten zum ersten Pivotabschnitt.Pivot items in a carousel loop from last to first pivot section.

Hinweis Pivotheader sollten in einer 10-Fuß-Umgebung nicht in einer Karussellansicht dargestellt werden.Note Pivot headers should not carousel in a 10ft environment. Legen Sie die IsHeaderItemsCarouselEnabled-Eigenschaft auf false fest, wenn Ihre App auf der Xbox ausgeführt wird.Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

EmpfehlungenRecommendations

  • Vermeiden Sie mehr als 5 Header bei Verwendung des Karussell-Modus (Roundtrip), da mehr als Schleifen verwirrend sein können.Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

Beispielcode herunterladenGet the sample code