Idioma: HTML | XAML

Inicio rápido: agregar controles FlipView (XAML)

Usa un control FlipView para mostrar una colección de elementos por los que el usuario puede pasar secuencialmente en tu aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic.

Requisitos previos

Damos por hecho que sabes agregar controles a una aplicación básica de Windows en tiempo de ejecución con C++, C# o Visual Basic. Para obtener instrucciones sobre cómo agregar un control, consulta Inicio rápido: agregar controles y controlar eventos.

¿Qué es una FlipView?

FlipView es un control que te permite desplazarte rápidamente en secuencias por una colección de elementos, uno por uno. Es estupendo para mostrar una galería de imágenes. FlipView deriva de la clase ItemsControl, como los controles ListView y GridView, por lo que comparte muchas de sus características. Puedes rellenar un control FlipView agregando elementos en línea o enlazando a un origen de datos.

Control FlipView

Agregar elementos a la colección Items

Puedes agregar elementos a la colección de Items usando 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 se definen fácilmente en XAML, o si generas los elementos en el código en tiempo de ejecución. Este es un control FlipView con elementos definidos en línea mediante XAML.


<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <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 = ref new FlipView();
flipView1->Items->Append("Item 1");
flipView1->Items->Append("Item 2");
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


Cuando agregas elementos a un control FlipView, 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 lenguaje de marcado de aplicaciones extensible (XAML), se agregan automáticamente a la colección de Items.

Establecimiento del origen de los elementos

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

Nota  Puedes rellenar un control FlipView agregando elementos a su colección Items o estableciendo su propiedad ItemsSource, pero no puedes usar ambos métodos al mismo tiempo. Si estableces la propiedad ItemsSource y agregas un elemento en XAML, el elemento agregado se omite. Si estableciste la propiedad ItemsSource y agregas un elemento a la colección de Items en código, se inicia una excepción.

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


// Data source.
Platform::Collections::Vector<String^>^ itemsList = 
    ref new Platform::Collections::Vector<String^>();
itemsList->Append("Item 1");
itemsList->Append("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView^ flipView1 = ref new FlipView();
flipView1->ItemsSource = itemsList;
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


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

Aquí, ItemsSource está enlazado a un CollectionViewSource denominado itemsViewSource.


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



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


Especificación del aspecto de los elementos

De manera predeterminada, un elemento de datos se muestra en el control FlipView como la representación de cadena del objeto de datos al que está enlazado. Por lo general, quieres mostrar una presentación más enriquecida de los datos. Para especificar con exactitud cómo se mostrarán los elementos del control FlipView, crea una DataTemplate. El XAML de la 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 DataTemplate se asigna a la propiedad ItemTemplate del control FlipView.

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


    <FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <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 del diseño definido por la plantilla de datos.

Plantilla de datos del control FlipView

Establecimiento de la orientación de la FlipView

De manera predeterminada, el control FlipView se desliza horizontalmente. Para que se deslice verticalmente, usa un StackPanel con orientación vertical como ItemsPanel del control FlipView.

Este ejemplo muestra cómo especificar un StackPanel con orientación vertical como 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" Source="{Binding Image}" Stretch="UniformToFill"/>
                  <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" 
                                 Foreground="#CCFFFFFF" Padding="15,20"/>
                  </Border>
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>

  </FlipView>


Esta es la apariencia del control FlipView con orientación vertical.

Control FlipView con orientación vertical

Resumen y siguientes pasos

Has aprendido cómo crear un control FlipView para mostrar una colección de datos.

Para obtener más información, descarga la muestra de FlipView XAML.

Temas relacionados

FlipView
Directrices para controles FlipView
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++

 

 

Mostrar:
© 2015 Microsoft