PivotPivot

El control Pivot permite el deslizamiento táctil rápido entre un pequeño conjunto de secciones de contenido.The Pivot control enables touch-swiping between a small set of content sections.

El foco predeterminado subraya el encabezado seleccionado

Obtención de la biblioteca de la interfaz de usuario de WindowsGet the Windows UI Library

Logotipo de WinUI

La biblioteca de interfaz de usuario de Windows 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Para obtener más información, consulta Radio de redondeo.For more info, see Corner radius. WinUI es un paquete NuGet que contiene nuevas características de interfaz de usuario y controles para aplicaciones de Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows).For more info, including installation instructions, see Windows UI Library.

API de plataforma: Clase Pivot, Clase NavigationViewPlatform APIs: Pivot class, NavigationView class

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación XAML Controls Gallery, haz clic aquí para abrir la aplicación y ver PivotControl en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

El control Pivot, al igual que NavigationView, subraya el elemento seleccionado.The Pivot control, just like NavigationView, underlines the selected item.

El foco predeterminado subraya el encabezado seleccionado

¿Es este el control adecuado?Is this the right control?

Para lograr patrones comunes de navegación superior y de pestañas, se recomienda utilizar NavigationView, que se adapta automáticamente a diferentes tamaños de pantalla y permite una mayor personalización.To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

Sin embargo, si la navegación requiere el deslizamiento táctil rápido, se recomienda usar Pivot.However, if your navigation requires touch-swiping, we recommend using Pivot.

Otras diferencias importantes entre los controles NavigationView y Pivot son el comportamiento de desbordamiento predeterminado y la API de navegación:The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • Pivot muestra los elementos de desbordamiento en vistas de carrusel, mientras que NavigationView utiliza un menú desplegable de desbordamiento para que los usuarios puedan ver todos los elementos.Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Pivot controla la navegación entre las secciones de contenido, mientras que el control NavigationView permite más control sobre el comportamiento de navegación.Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Usar el control NavigationView en lugar de PivotUse NavigationView instead of Pivot

Si la interfaz de usuario de la aplicación usa el control Pivot, puedes convertir Pivot en NavigationView con el código siguiente.If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

Este lenguaje XAML crea un control NavigationView con tres secciones de contenido, como en el ejemplo de Pivot en Crear un control Pivot.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 ofrece mayor control sobre la personalización de la navegación y requiere el correspondiente código subyacente.NavigationView provides more control over navigation customization and requires corresponding code-behind. Para acompañar el lenguaje XAML anterior, utiliza el siguiente código subyacente: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;
    }  
}

Este código simula la experiencia de navegación integrada del control Pivot, menos la experiencia de deslizamiento táctil rápido entre secciones de contenido.This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. Sin embargo, como puedes ver, también puedes personalizar varios aspectos, entre los que se incluyen el comportamiento de transición animada, los parámetros de navegación y las funcionalidades de la pila.However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

Crear un control dinámicoCreate a pivot control

Este código crea un control Pivot básico con tres secciones de contenido.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>

Elementos de tabla dinámicaPivot items

Pivot es un ItemsControl, por lo que puede contener una colección de elementos de cualquier tipo.Pivot is an ItemsControl, so it can contain a collection of items of any type. Cualquier elemento que agregues a Pivot que no sea explícitamente un PivotItem se encapsula implícitamente en un PivotItem.Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. Dado que Pivot suele utilizarse para navegar entre páginas de contenido, es habitual rellenar la colección Items directamente con los elementos de la interfaz de usuario de XAML.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. También puedes establecer la propiedad ItemsSource en un origen de datos.Or, you can set the ItemsSource property to a data source. Los elementos enlazados en ItemsSource pueden ser de cualquier tipo, pero si no son explícitamente PivotItems, debes definir las propiedades ItemTemplate y HeaderTemplate para especificar cómo se muestran los elementos.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.

Puedes usar la propiedad SelectedItem para obtener o establecer el elemento activo de Pivot.You can use the SelectedItem property to get or set the Pivot's active item. Usa la propiedad SelectedIndex para obtener o establecer el índice del elemento activo.Use the SelectedIndex property to get or set the index of the active item.

Encabezados dinámicosPivot headers

Puedes usar las propiedades LeftHeader y RightHeader para agregar otros controles al encabezado de Pivot.You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

Por ejemplo, puedes agregar una clase CommandBar en la propiedad RightHeader de Pivot.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>

Interacción dinámicaPivot interaction

El control ofrece estas interacciones de gestos táctiles:The control features these touch gesture interactions:

  • Tocar un encabezado de elemento de control dinámico permite navegar al contenido de la sección de dicho encabezado.Tapping on a pivot item header navigates to that header's section content.
  • Pasar el dedo a la izquierda o la derecha en un encabezado de elemento de control dinámico permite navegar a la sección adyacente.Swiping left or right on a pivot item header navigates to the adjacent section.
  • Pasar el dedo a la izquierda o la derecha en el contenido de una sección permite navegar a la sección adyacente.Swiping left or right on section content navigates to the adjacent section.

El control tiene dos modos:The control comes in two modes:

InmóvilStationary

  • Los controles dinámicos están inmóviles cuando todos los encabezados de control dinámico caben en el espacio permitido.Pivots are stationary when all pivot headers fit within the allowed space.
  • Al tocar una etiqueta de control dinámico, se navega a la página correspondiente, aunque el propio control dinámico no se moverá.Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. El control dinámico activo se destacará.The active pivot is highlighted.

CarruselCarousel

  • Los controles dinámicos giran cuando no caben todos los encabezados de control dinámico dentro del espacio permitido.Pivots carousel when all pivot headers don't fit within the allowed space.
  • Al tocar una etiqueta de control dinámico se navega a la página correspondiente y, después, la etiqueta de control dinámico activa gira a la primera posición.Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • Elementos de control dinámico en un bucle de carrusel de la última a la primera sección de control dinámico.Pivot items in a carousel loop from last to first pivot section.

Nota: Los encabezados de tabla dinámica no deben mostrarse en carrusel en un entorno de 10 pies.Note Pivot headers should not carousel in a 10ft environment. Establece la propiedad IsHeaderItemsCarouselEnabled en false si la aplicación se ejecuta en Xbox.Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

RecomendacionesRecommendations

  • Evita usar más de 5 encabezados cuando uses el modo de carrusel (ida y vuelta), ya que un bucle de más de 5 puede resultar confuso.Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

Obtención del código de ejemploGet the sample code