Working With The FlipView Control In Universal Window App

Prerequisites

• Visual Studio 2015

FlipView

FlipView is a control for browsing the images and other items in a collection, such as photos in an album or items in a product details page, one item at a time. FlipView is best for perusing the images in small to medium collections (up to 25 or so items). For touch devices, swiping across an item moves through the collection. For a mouse, navigation buttons appear on mouse hover. For a keyboard, arrow keys move through the collection.

The FlipView element represents a FlipView control in XAML.

Here's a FlipView with items defined inline.

<FlipView x:Name="flipView1">
…….
</FlipView>

Now, let's get started with the following steps.

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and click File -> New -> Project option for New Universal App.



Step 2 - Giving the Project Name

Then, the "New Project" window will open. There, you can select Installed -> Template -> Visual C# -> Windows ->
Universal and select a Blank App (Universal Windows).

Type the project name as FlipViewControl and click the OK button.



Step 3 - Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application. Then, click OK button.



Step 4 - Choose Designer Window

Now, we go to the Solution Explorer and open the MainPage.xaml for design.


Step 5 - Designing the App

In the MainPage.xaml designing page, go to the Solution Explorer and right click on Assets and choose Add->Existing Item.



Next, choose the required images and click Add.



Now, the selected images are added in the Assets.



Now, go to the MainPage.xaml for XAML coding.



After adding the images, the XAML code looks like this.

<FlipView x:Name="myFlipview">
    <Image Source="/Assets/img1.png" Stretch="Uniform" />
    <Image Source="/Assets/img2.png" Stretch="Uniform" />
    <Image Source="/Assets/img3.jpg" Stretch="Uniform" />
</FlipView>

Step 6 - Run the Application

Now, we are ready to run our project. So, click the Local Machine for running the application.



Output





Conclusion - I hope you understood FlipView control in Universal Windows Platform, and how to run it.