Langage: HTML | XAML

Démarrage rapide : ajout de contrôles FlipView (XAML)

Applies to Windows and Windows Phone

Utilisez un contrôle FlipView pour afficher une collection d’éléments que l’utilisateur peut parcourir dans votre application Windows Runtime en C++, C# ou Visual Basic.

Prérequis

Nous partons du principe que vous savez ajouter des contrôles à une application Windows Runtime de base en C++, C# ou Visual Basic. Pour obtenir des instructions sur l’ajout d’un contrôle, voir Démarrage rapide : ajout de contrôles et gestion des événements.

Qu’est-ce qu’un contrôle FlipView ?

FlipView est un contrôle qui vous permet de parcourir une collection d’éléments de manière séquentielle, un par un. Il est parfait pour afficher une galerie d’images. FlipView dérivant de la classe ItemsControl, comme les contrôles ListView et GridView, il partage une grande partie de leurs fonctionnalités. Vous pouvez remplir un contrôle FlipView en ajoutant des éléments inline ou en établissant une liaison à une source de données.

Contrôle de vue symétrique

Ajout d’éléments à la collection Items

Vous pouvez ajouter des éléments à la collection Items en utilisant le langage XAML ou du code. Vous ajoutez généralement des éléments de cette façon si vous avez un petit nombre d’éléments qui ne sont pas modifiés et sont facilement définis en XAML, ou si vous générez les éléments dans le code lors de l’exécution. Voici un FlipView avec des éléments définis inline en 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 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");
flipView1.SelectionChanged += FlipView_SelectionChanged;

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


Lorsque vous ajoutez des éléments à un contrôle FlipView, ils sont placés automatiquement dans un conteneur FlipViewItem. Pour modifier l’apparence d’un élément, vous pouvez appliquer un style au conteneur d’éléments en définissant la propriété ItemContainerStyle.

Lorsque vous définissez les éléments en langage XAML (Extensible Application Markup Language), ceux-ci sont automatiquement ajoutés à la collection d’Items.

Définition de la source des éléments

On utilise en général un contrôle FlipView pour afficher des données d’une source telle qu’une base de données ou Internet. Pour remplir un FlipView à partir d’une source de données, vous affectez à sa propriété ItemsSource une collection d’éléments de données.

Remarque  Vous pouvez remplir un contrôle FlipView en ajoutant des éléments directement dans sa collection Items ou en définissant sa propriété ItemsSource, mais vous ne pouvez pas faire les deux à la fois. Si vous définissez la propriété ItemsSource et que vous ajoutez un élément en XAML, l’élément ajouté est alors ignoré. Si vous définissez la propriété ItemsSource et que vous ajoutez un élément à la collection d’Items dans le code, une exception est levée.

Ici, la propriété ItemsSourcedu contrôle FlipView prend la valeur de l’instance d’une collection directement dans le code.


// 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);


Vous pouvez également lier la propriété ItemsSource à une collection en XAML. Pour plus d’informations, voir Liaison de données avec XAML.

Dans le cas présent, la propriété ItemsSource est liée à un objet CollectionViewSource nommé 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}}"/>


Spécification de l’aspect des éléments

Par défaut, un élément de données est affiché dans l’objet FlipView en tant que représentation de chaîne de l’objet de données auquel il est lié. En général, on souhaite afficher une représentation enrichie des données. Pour définir précisément la façon dont les éléments sont affichés dans le contrôle FlipView, vous devez créer un objet DataTemplate. Le code XAML dans l’objet DataTemplate définit la disposition et l’apparence des contrôles qui permettent d’afficher un élément spécifique. Les contrôles dans la disposition peuvent être liés aux propriétés d’un objet de données ou leur contenu peut être défini inline. L’objet DataTemplate est affecté à la propriété ItemTemplate de l’objet FlipView.

Dans cet exemple, la propriété ItemTemplate d’un objet FlipView est définie inline. Une superposition est ajoutée à l’image pour afficher le nom de l’image.


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


Voici à quoi ressemble la disposition définie par le modèle de données.

Modèle de données affiché sous forme de vue symétrique.

Définition de l’orientation du contrôle FlipView

Par défaut, le contrôle FlipView défile horizontalement. Pour le faire défiler verticalement, utilisez un objet StackPanel avec une orientation verticale comme l’objet ItemsPanel de la vue symétrique.

Cet exemple montre comment spécifier un objet StackPanel orientation verticale comme l’objet ItemsPanel d’un contrôle 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>


Voici à quoi ressemble l’objet FlipView avec une orientation verticale.

Vue symétrique avec orientation verticale

Récapitulatif et étapes suivantes

Vous avez appris à créer un contrôle FlipView pour afficher une collection de données.

Pour obtenir plus d’exemples, téléchargez l’Exemple de contrôle FlipView XAML.

Rubriques associées

FlipView
Recommandations en matière de contrôles FlipView
Feuille de route pour les applications Windows Runtime en C# ou Visual Basic
Feuille de route pour les applications Windows Runtime en C++

 

 

Afficher:
© 2014 Microsoft