Share via

How to add a flip view (XAML)

  • Article

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

This tutorial walks you through the steps to add a flip view to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add a flip view in the XAML editor or using a design tool like Blend for Visual Studio. You can also add a flip view in code at run time.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Add a flip view in XAML

To add a flip view in XAML

  1. Add a FlipView control to a parent container.

  2. To assign a name to the flip view, set the x:Name attribute to a string value.

    To refer to a control in code, it must have a name. Otherwise, a name is not required.

  3. Add items to the flip view by populating the Items collection or by binding the ItemsSource property to a data source.

    Here's an example of how to populate the Items collection in XAML

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

    Here's an example of how to bind the ItemsSource to a collection in XAML. The ItemsSource is bound to the DataContext of the FlipView.

    <FlipView ItemsSource="{Binding}" SelectionChanged="FlipView_SelectionChanged"/>

  4. To perform an action when the flip view selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

    void MainPage::FlipView_SelectionChanged(Object^ sender, SelectionChangedEventArgs^ e)
{
    // Add code to perform some action here.
}

    private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Add code to perform some action here.
}

    Private Sub FlipView_SelectionChanged()
    ' Add code to perform some action here.
End Sub

    To check the selected item of the control outside of the SelectionChanged event, use the SelectedItem or SelectedIndex properties.

Step 2: Add a flip view in code

To add a flip view in code

  1. Create a new FlipView.

  2. Add items to the flip view by populating the Items collection or by setting the ItemsSource property to a data collection.

  3. To perform an action when the flip view selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

  4. Add the FlipView to a parent container in the visual tree. This is required to make the flip view show in the UI.

    Here's an example of how to add a FlipView and populate the Items collection in code.

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

    Here's an example of how to add a FlipView and set the ItemsSource in code.

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

  5. To perform an action when the flip view selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

    void MainPage::FlipView_SelectionChanged(Object^ sender, SelectionChangedEventArgs^ e)
{
    // Add code to perform some action here.
}

    private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Add code to perform some action here.
}

    Private Sub FlipView_SelectionChanged()
    ' Add code to perform some action here.
End Sub

    To check the selected item of the control outside of the SelectionChanged event, use the SelectedItem or SelectedIndex properties.

Step 3: Add a flip view using a design tool

To add a flip view using a design tool

  1. Select the FlipView control.

    • In Microsoft Visual Studio, select the FlipView in the Toolbox pane.

    • In Blend for Visual Studio, select the FlipView in the Assets pane.

      Select Controls in the left side of the Assets pane if it's not selected.

  2. Add a FlipView to the design surface. Do one of these:

    • Double-click the flip view. The flip view is added to the selected parent container with default position and size settings.
    • Drag the flip view to the design surface and drop it. The flip view is added in the position where you drop it with default size settings.
    • Draw the flip view control onto the design surface. The flip view is added with the size and position settings that you draw.

  3. If you need to, assign a name to the FlipView. With the flip view selected, type the name into the Name property text box.

    The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.

  4. Add items to the flip view by populating the Items collection or by binding the ItemsSource property to a data source.

  5. To perform an action when the flip view selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

    1. Select the Event view in the Property pane.
    2. With the flip view selected on the design surface, do one of these:
      • Double click the SelectionChanged event text box to add a handler with a default name.
      • Type a name into the SelectionChanged event text box to add a handler with a custom name.

FlipView

Quickstart: Adding FlipView controls

XAML FlipView sample

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++