How To Use FlipView Control In Universal Application Development With XAML And C#

Before reading this article, please go through the following article.

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn how to use FlipViewControl in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the suitable name for your App (FlipViewimage) -> OK.

Step 2: Choose the Target and Minimum platform version that your Windows Universal Application will support. After this, the project creates App.xaml and MainPage.xaml.

version

Step 3: Open (double click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls, and drag the required control to the middle of the design canvas.

Add TextBlock control and change the name and text property.

After that, drag and drop the FlipView control, you have to change the name property .

Note: Automatically, the following code will be generated in XAML codeView, while we are done in the design View.

<Page x:Class="Flipviewimage.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Flipviewimage" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="261,34,0,0" TextWrapping="Wrap" Text="Flipview test" VerticalAlignment="Top" FontWeight="Bold" Width="100" />
<FlipView x:Name="FVtest" HorizontalAlignment="Left" Margin="77,83,0,0" VerticalAlignment="Top" Width="496" Height="226" /> </Grid>
</Page>

Step 4 : In MainPage.Xaml remove the “/” in FlipView tag,

Step 5 : In MainPage.Xaml, insert the following code to FlipView tag.

<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding}" Stretch="UniformToFill" /> </Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>

Finally, the entire MainPage.Xaml code looks like,

<Page x:Class="Flipviewimage.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Flipviewimage" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="261,34,0,0" TextWrapping="Wrap" Text="Flipview test" VerticalAlignment="Top" FontWeight="Bold" Width="100" />
<FlipView x:Name="FVtest" HorizontalAlignment="Left" Margin="77,83,0,0" VerticalAlignment="Top" Width="496" Height="226">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding}" Stretch="UniformToFill" /> </Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
</Page>

Step 6: Create new folder in your project as Images and add some images to Images Folder

Step 7: Add the following code in constructor method (MainPage() method) in MainPage.xaml.cs. This code is used for setting the image resource path for FlipView control,

String path = Directory.GetCurrentDirectory() + @"\Images";
FVtest.ItemsSource = Directory.GetFiles(path).Select(p => "ms-appx:///" + p);

Step 8: Deploy your App in Local Machine, and the output of the FlipViewtest App is,

output

Summary: Now, you have successfully created and tested your FlipView Control in Visual C# - UWP environment.