Dinamización

  • Artículo

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 dinámico 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 Pivot cuando se usa WinUI 3 y el SDK de Aplicaciones para 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.
  • 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 controla la navegación entre las secciones de contenido, mientras que el control NavigationView permite más control sobre el comportamiento de navegación.

UWP y WinUI 2

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. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

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

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles.

Usar el control 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 el comportamiento de transición animada, los parámetros de navegación y las funcionalidades de la pila.

Creación de un control Pivot

Advertencia

No se recomienda el control dinámico 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 Pivot

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

Por ejemplo, puedes agregar una clase CommandBar en la propiedad RightHeader de 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 desplaza al contenido de sección de ese encabezado.
  • Al deslizar hacia la izquierda o derecha en un encabezado de Pivot se navega 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 controles Pivot son fijos cuando todos los encabezados de Pivot 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 control de Pivot activo está resaltado.

Carrusel

  • Dinamiza el carrusel cuando todos los encabezados de Pivot no caben en el espacio permitido.
  • Al tocar una etiqueta de Pivot se navega a la página correspondiente y se creará un carrusel de la etiqueta de Pivot activa en 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.