Quickstart: Adding FlipView controls (XAML)

Article
03/01/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use a FlipView control to display a collection of items that the user can flip through sequentially in your Windows Runtime app using C++, C#, or Visual Basic.

Prerequisites

We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

What is a FlipView?

The FlipView is a control that lets you flip through a collection of items sequentially, one at a time. It's great for displaying a gallery of images. FlipView is derived from the ItemsControl class, like the ListView and GridView controls, so it shares many of their features. You can populate a FlipView by adding items inline or by binding to a data source.

Adding items to the Items collection

You can add items to the Items collection using XAML or code. You typically add items this way if you have a small number of items that don't change and are easily defined in XAML, or if you generate the items in code at run time. Here's a FlipView with items defined inline using 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);

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

' Create a new flip view, add content, 
' and add a SelectionChanged event handler.
Dim flipView1 = New FlipView()
flipView1.Items.Add("Item 1")
flipView1.Items.Add("Item 2")
AddHandler flipView1.SelectionChanged, AddressOf Me.FlipView_SelectionChanged

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

When you add items to a FlipView they are automatically placed in a FlipViewItem container. To change how an item is displayed you can apply a style to the item container by setting the ItemContainerStyle property.

When you define the items in Extensible Application Markup Language (XAML), they are automatically added to the Items collection.

Setting the items source

You typically use a FlipView to display data from a source such as a database or the Internet. To populate a FlipView from a data source, you set its ItemsSource property to a collection of data items.

Note You can populate a FlipView either by adding items to its Items collection, or by setting its ItemsSource property, but you can't use both ways at the same time. If you set the ItemsSource property and you add an item in XAML, the added item is ignored. If you set the ItemsSource property and you add an item to the Items collection in code, an exception is thrown.

Here, the FlipView's ItemsSource is set in code directly to an instance of a collection.

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

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

' Data source.
Dim itemsList = New List(Of String)()
itemsList.Add("Item 1")
itemsList.Add("Item 2")

' Create a new flip view, add content, 
' and add a SelectionChanged event handler.
Dim flipView1 = New FlipView()
flipView1.ItemsSource = itemsList
AddHandler flipView1.SelectionChanged, AddressOf Me.FlipView_SelectionChanged

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

You can also bind the ItemsSource property to a collection in XAML. For more info, see Data binding with XAML.

Here, the ItemsSource is bound to a CollectionViewSource named 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}}"/>

Specifying the look of the items

By default, a data item is displayed in the FlipView as the string representation of the data object it's bound to. You typically want to show a more rich presentation of your data. To specify exactly how items in the FlipView are displayed, you create a DataTemplate. The XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. The controls in the layout can be bound to properties of a data object, or have content defined inline. The DataTemplate is assigned to the ItemTemplate property of the FlipView.

In this example, the ItemTemplate of a FlipView is defined inline. An overlay is added to the image to display the image name.

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

Here's what the layout defined by the data template looks like.

Setting the orientation of the FlipView

By default, the FlipView flips horizontally. To make the it flip vertically, use a StackPanel with a vertical orientation as the flip view's ItemsPanel.

This example shows how to specify a StackPanel with a vertical orientation as the ItemsPanel of a 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>

Here's what the FlipView looks like with a vertical orientation.