Inversión de la vista

Usa la vista invertida para explorar una a una las imágenes u otros elementos de una colección, como las fotos de un álbum o los elementos de una página con los detalles de un producto. Si usas dispositivos táctiles, puedes desplazarte por la colección deslizando el dedo por los elementos. En cambio, si usas un mouse, aparecerán botones de navegación al pasar el mouse por encima. En el caso del teclado, te puedes desplazar por la colección con las teclas de dirección.

¿Es este el control adecuado?

La vista invertida es ideal para examinar imágenes de colecciones pequeñas o medianas (de hasta 25 elementos, más o menos). Algunos ejemplos de estas colecciones son elementos de la página de detalles de un producto o las fotos de un álbum de fotos. Aunque no recomendamos la vista para alternar para colecciones más grandes, es un control habitual para ver imágenes individuales en un álbum de fotos.

Recomendaciones

• Las vistas invertidas funcionan mejor en colecciones de hasta 25 elementos aproximadamente.
• Evita el uso de un control de vista para alternar para colecciones más grandes, ya que el movimiento repetitivo de desplazamiento entre los elementos puede ser tedioso. Una excepción serían los álbumes de fotos, que a menudo tienen cientos o miles de imágenes. Los álbumes de fotos casi siempre cambian a una vista para alternar una vez que se ha seleccionado una foto en el diseño de la vista de cuadrícula. Para otras colecciones grandes, considera la posibilidad de usar una vista de lista o de cuadrícula.

Lista de comprobación Globalización y localización

• Consideraciones bidireccionales: use la creación de reflejo estándar para los lenguajes RTL. Los controles para ir atrás y adelante deben basarse en la dirección del idioma, por lo que para los idiomas de derecha a izquierda, el botón derecho debe navegar hacia atrás y el botón izquierdo debe navegar hacia delante.

Ejemplos

Un diseño típico de la vista para alternar es la navegación horizontal, comenzando por el extremo izquierdo y desplazándose hacia la derecha. Este diseño funciona bien tanto en la orientación vertical como horizontal en todos los dispositivos:

Asimismo, también puedes examinar verticalmente una vista invertida:

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.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

• API de UWP:Clase FlipView, propiedad ItemsSource, propiedad ItemTemplate
• Abra la aplicación WinUI 2 Gallery y vea FlipView en acción. La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear una vista invertida nueva

• API importantes: Clase FlipView, propiedad ItemsSource, propiedad ItemTemplate

Abra la aplicación WinUI 3 Gallery y vea FlipView en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

La clase FlipView forma parte de ItemsControl, de modo que puede contener una colección de elementos de cualquier tipo. Para rellenar la vista, agrega elementos a la colección Items o establece la propiedad ItemsSource en un origen de datos.

De manera predeterminada, un elemento de datos se muestra en la vista invertida como una representación de cadena del objeto de datos al que está enlazado. Para especificar exactamente cómo se muestran los elementos en la vista invertida, puedes crear una clase DataTemplate para definir el diseño de los controles que se usan para mostrar un elemento individual. Los controles del diseño se pueden enlazar a las propiedades de un objeto de datos o tener contenido definido en línea. A continuación, asigna la clase DataTemplate a la propiedad ItemTemplate de la clase FlipView.

Agregar elementos a la colección Items

Puedes agregar elementos a la colección Items mediante lenguaje XAML o código. Normalmente, los elementos se agregan de esta forma si tienes un pequeño número de elementos que no cambian y que se definen fácilmente en XAML, o si generas los elementos en el código en tiempo de ejecución. Esta es una vista invertida con elementos definidos en línea.

<FlipView x:Name="flipView1">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

Cuando agregas elementos a una vista invertida, se colocan automáticamente en un contenedor FlipViewItem. Para cambiar la manera en que se muestra un elemento, puedes configurar la propiedad ItemContainerStyle para aplicar un estilo al contenedor de elementos.

Cuando defines los elementos en XAML, se agregan automáticamente a la colección Items.

Establecer el origen de los elementos

Por lo general, se usa una vista invertida para mostrar los datos de un origen como una base de datos o Internet. Para rellenar una vista invertida desde un origen de datos, debes establecer la propiedad ItemsSource en una colección de elementos de datos.

Aquí, la propiedad ItemsSource de la vista invertida está establecida en el código, directamente en la instancia de una colección.

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

También puedes enlazar la propiedad ItemsSource a una colección en XAML. Para obtener más información, consulta el tema Enlace de datos con XAML.

En este ejemplo, ItemsSource está enlazado a una clase CollectionViewSource denominada itemsViewSource.

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

...

<FlipView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

Precaución

Puede rellenar una vista invertida agregando elementos a su colección Items o estableciendo su propiedad ItemsSource, pero recuerde que no puede usar ambos métodos al mismo tiempo. Si estableces la propiedad ItemsSource y agregas un elemento en XAML, el elemento agregado se omite. Si estableces la propiedad ItemsSource y decides agregar un elemento a la colección Items en código, se inicia una excepción.

Especificar el aspecto de los elementos

De manera predeterminada, un elemento de datos se muestra en la vista invertida como una representación de cadena del objeto de datos al que está enlazado. Por lo general, preferirás mostrar una presentación más completa de los datos. Para especificar con exactitud cómo se mostrarán los elementos en la vista invertida, debes crear una clase DataTemplate. El lenguaje XAML de la clase DataTemplate define el diseño y la apariencia de los controles usados para mostrar un elemento individual. Los controles del diseño se pueden enlazar a las propiedades de un objeto de datos o tener contenido definido en línea. La clase DataTemplate se asigna a la propiedad ItemTemplate del control FlipView.

En este ejemplo, la clase ItemTemplate de un control FlipView se define en línea. Asimismo, se agrega una superposición a la imagen para mostrar el nombre de la imagen.

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Esta es la apariencia del diseño definido por la plantilla de datos.

Establecer la orientación de la vista invertida

De manera predeterminada, la vista invertida se voltea de forma horizontal. Para voltearla de forma vertical, usa un panel StackPanel que tenga orientación vertical, al igual que la propiedad ItemsPanel de la vista invertida.

Este ejemplo muestra cómo usar un panel StackPanel con orientación vertical como la propiedad ItemsPanel de un control FlipView.

<FlipView x:Name="flipViewVertical" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
    
    <!-- Use a vertical stack panel for vertical flipping. -->
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Width="480" Height="270" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" 
                               FontFamily="Segoe UI" FontSize="26.667" 
                               Foreground="#CCFFFFFF" Padding="15,20"/>
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Esta es la apariencia de la vista invertida con orientación vertical.

Agregar un indicador de contexto

Use un indicador de contexto (como pipsPager o una tira de película) con una vista invertida para ayudar a proporcionar a los usuarios un punto de referencia dentro del contenido.

En la imagen siguiente se muestra un PipsPager usado con una pequeña galería de fotos (se recomienda centrar PipsPager debajo de la galería).

Este fragmento de código muestra cómo enlazar un PipsPager con un FlipView.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

Para colecciones más grandes (10 o más elementos), se recomienda encarecidamente usar un indicador contextual, como una tira de miniaturas de película. A diferencia de pipsPager que usa puntos simples o glifos, cada miniatura de la tira de película muestra una versión más pequeña y seleccionable de la imagen correspondiente.

Para obtener un ejemplo completo que muestra cómo agregar un indicador de contexto a flipView, consulta Ejemplo de FlipView de XAML.

Obtención del código de ejemplo

• Ejemplo de la Galería de WinUI : consulta todos los controles XAML en un formato interactivo.

Artículos relacionados

• Directrices sobre listas
• PipsPager
• Clase FlipView