Compartir vía

Pivot

El control Pivot permite el deslizamiento táctil rápido entre un pequeño conjunto de secciones de contenido.

El foco predeterminado subraya el encabezado seleccionado

¿Es este el control adecuado?

Advertencia

No se recomienda el control Pivot para los patrones de diseño de Windows 11. Se recomienda encarecidamente usar una de estas alternativas en su lugar:

Para crear una interfaz de usuario similar a la de Pivot al usar WinUI y el SDK de aplicaciones de Windows, use el control SelectorBar.

Para crear una interfaz de usuario con pestañas, use un control TabView.

Para lograr patrones comunes de navegación superior, se recomienda utilizar NavigationView, que se adapta automáticamente a diferentes tamaños de pantalla y permite una mayor personalización.

A continuación se enumeran algunas diferencias clave entre NavigationView y Pivot:

  • Pivot admite el deslizamiento táctil para cambiar entre elementos.
  • Los elementos desbordados en un carrusel de Pivot, por otro lado, NavigationView utiliza un menú desplegable de desbordamiento para que los usuarios puedan ver todos los elementos.
  • Pivot maneja la navegación entre las secciones de contenido, mientras que NavigationView permite más control sobre el comportamiento de la navegación.

Usar NavigationView en lugar de Pivot

Si la interfaz de usuario de la aplicación usa el control Pivot, puede convertir Pivot en NavigationView siguiendo este ejemplo.

Este lenguaje XAML crea un control NavigationView con tres secciones de contenido, como en el ejemplo de Pivot en Crear un control Pivot.

<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 ofrece mayor control sobre la personalización de la navegación y requiere el correspondiente código subyacente. Para acompañar el lenguaje XAML anterior, utiliza el siguiente código subyacente:

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

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. Sin embargo, como puedes ver, también puedes personalizar varios aspectos, entre los que se incluyen la transición animada, los parámetros de navegación y las capacidades de la pila.

Creación de un control Pivot

Advertencia

No se recomienda el control Pivot para los patrones de diseño de Windows 11. Se recomienda encarecidamente usar una de estas alternativas en su lugar:

Este XAML crea un control Pivot básico con tres secciones de contenido.

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

Pivot es un ItemsControl, por lo que puede contener una colección de elementos de cualquier tipo. Cualquier elemento que agregues a Pivot que no sea explícitamente un PivotItem se encapsula implícitamente en un 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. También puedes establecer la propiedad ItemsSource en un origen de datos. 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.

Puedes usar la propiedad SelectedItem para obtener o establecer el elemento activo de Pivot. Usa la propiedad SelectedIndex para obtener o establecer el índice del elemento activo.

Encabezados de tabla dinámica

Puedes usar las propiedades LeftHeader y RightHeader para agregar otros controles al encabezado de Pivot.

Por ejemplo, puedes agregar un CommandBar en el RightHeader del Pivot.

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

Interacción de Pivot

El control presenta estas interacciones de gestos táctiles:

  • Al tocar un encabezado de Pivot, se navega al contenido de la sección de ese encabezado.
  • Al deslizar el dedo hacia la izquierda o derecha en un encabezado de elemento pivot, navegas a la sección adyacente.
  • Al deslizar hacia la izquierda o derecha el contenido de la sección se navega a la sección adyacente.

El control viene en dos modos:

Inmóvil

  • Los pivotes son fijos cuando todos los encabezados de pivote caben en el espacio permitido.
  • Al tocar una etiqueta de Pivot, se navega a la página correspondiente, aunque el propio control Pivot no se moverá. El pivote activo está resaltado.

Carrusel

  • Gira el carrusel cuando los encabezados de pivote no caben en el espacio permitido.
  • Al tocar una etiqueta de "pivot", se navega a la página correspondiente y la etiqueta de "pivot" activa se desplazará a la primera posición.
  • Dinamiza los elementos de un bucle de carrusel desde la última a la primera sección de Pivot.

Sugerencia

  • Evite usar más de 5 encabezados al usar el modo carrusel, ya que el bucle de más de 5 puede resultar confuso.
  • Los encabezados de Pivot no deben mostrarse en carrusel en un entorno de 10 pies. Establezca la propiedad IsHeaderItemsCarouselEnabled en false si la aplicación se ejecuta en Xbox.

UWP y WinUI para UWP

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.

Existen API para este control en el espacio de nombres Windows.UI.Xaml.Controls .

Te recomendamos usar la versión más reciente de WinUI para UWP para obtener los estilos y plantillas más actuales para todos los controles.

  • Last updated on