FlipView

The FlipView control is useful as same as the ListBox control, how to use the ItemTemplate control or use the DataTemplate control is familiar for UI developers.
At first, the collection object which displays in the FlipView control of the page’s ViewModel is binded to the FlipView control. As second, set type of item of the collection object to the DataTemplate, last of all, bind properties of the item to visual elements.
This article explain how to set image and caption to the FlipView control of XAML.

>>Sample solution for Visual Studio 2017

>>Visual Studio 2017 community is free

・View model

This view model is very simple, an item of the collection of the FlipView control is the Provider class which includes the Image property and the Caption property, they are binded to individual visual elements of the item.
The collection of the Provider class is holded by PhotoImages property of the ViewModel of the page, it binded to the FlipView control of the page’s XAML.

At the constructor of the view model, set an instance of the collection of the Provider class to the PhotoImages property while set values to the properties of the Provider class respectively.

・xaml

	<Page
	x:Class="StatefulMiddleWareUWP.Profile"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:StatefulMiddleWareUWP"
	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}">
	<RelativePanel>
	<FlipView x:Name="SyncDistinationArea" MaxWidth="350" Height="100" BorderBrush="Black" BorderThickness="1" ItemsSource="{x:Bind ViewModel.PhotoImages, Mode=OneWay}" RelativePanel.AlignTopWithPanel="True" VerticalAlignment="Top" Margin="10,20,0,0">
	<FlipView.ItemTemplate>
	<DataTemplate x:DataType="local:Provider">
	<Grid>
	<Image Source="{x:Bind Image}" Stretch="Uniform" VerticalAlignment="Top" Margin="0,10,0,0" Height="45"/>
	<Border Background="#A5FFFFFF" Height="30" VerticalAlignment="Bottom">
	<TextBlock x:Name="IDProviderName" Text="{x:Bind Caption}" Foreground="#ff000000" Style="{StaticResource TitleTextBlockStyle}" HorizontalAlignment="Center"/>
	</Border>
	</Grid>
	</DataTemplate>
	</FlipView.ItemTemplate>
	</FlipView>
	<StackPanel x:Name="ProfileDetail" Margin="10,0,0,0" VerticalAlignment="Center" RelativePanel.Below="SyncDistinationArea" >
	<StackPanel x:Name="ProfileDetailFirstName" Orientation="Horizontal" Margin="0,20,0,0">
	<TextBlock Text="First Name" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.FirstName,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>
	<StackPanel x:Name="ProfileDetailLastName" Orientation="Horizontal" Margin="0,20,0,0" >
	<TextBlock Text="Last Name" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.LastName,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>
	<StackPanel x:Name="ProfileDetailMiddleName" Orientation="Horizontal" Margin="0,20,0,0" >
	<TextBlock Text="Middle Name" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.MiddleName,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>
	<StackPanel x:Name="ProfileDetailPhoneNumber" Orientation="Horizontal" Margin="0,20,0,0" >
	<TextBlock Text="Phone Number" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.PhoneNumber,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>
	<StackPanel x:Name="ProfileDetailMailAddress" Orientation="Horizontal" Margin="0,20,0,0" >
	<TextBlock Text="Mail Address" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.MailAddress,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>
	<!--<StackPanel x:Name="ProfileDetailPhotoImage" Orientation="Horizontal" Margin="0,20,0,0" >
	<TextBlock Text="Photo Image" MinWidth="100" />
	<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{x:Bind ViewModel.PhotoImagePath,Mode=TwoWay}" VerticalAlignment="Top" MinWidth="250"/>
	</StackPanel>-->
	</StackPanel>
	</RelativePanel>
	</Grid>
	</Page>

view raw Profile.xaml of FlipView hosted with by GitHub

・View model

	using System;
	using System.Collections.Generic;
	using System.IO;
	using System.Linq;
	using System.Threading.Tasks;
	using Windows.Storage;
	using Windows.UI.Xaml.Controls;
	using Windows.UI.Xaml.Media.Imaging;
	namespace StatefulMiddleWareUWP
	{
	public class Provider
	{
	public BitmapImage Image { get; set; }
	public string Caption { get; set; }
	}
	public class Content
	{
	public Content()
	{
	ContentType = ContentTypes.Profile;
	DistinationType = DistinationTypes.Undefined;
	PhotoImages = new List<Provider>();
	var except = new string[] { "Undefined", "Goo", "Rakten", "Blogger", "Mixi", "Ameba", "Tumbler", "Reddit", "Yahoo", "Pintarest" };
	BitmapImage photoImage = null;
	foreach (string s in Enum.GetNames(typeof(DistinationTypes)))
	{
	if (except.Where(i => i == s).Count() > 0) continue;
	PhotoImagePath = "ms-appx:///Assets/" + s + "Icon.png";
	photoImage = new BitmapImage() { UriSource = new Uri(PhotoImagePath) };
	PhotoImages.Add(new Provider() { Image = photoImage, Caption = s });
	SourceDistination = s;
	}
	}
	public List<Provider> PhotoImages { get; set; }
	public string SourceDistination { get; set; }
	public ContentTypes ContentType { get; set; }
	public DistinationTypes DistinationType { get; set; }
	public string LastName { get; set; }
	public string FirstName { get; set; }
	public string MiddleName { get; set; }
	public string PhotoImagePath { get; set; }
	public string PhoneNumber { get; set; }
	public string MailAddress { get; set; }
	public string ID { get; set; }
	public List<Tuple<DistinationTypes, string>> SyncIds { get; set; }
	//private static async Task<object> FileExist(string folder, string file)
	//{
	// StorageFolder localfolder = ApplicationData.Current.LocalFolder;
	// return await localfolder.TryGetItemAsync(folder + Path.PathSeparator + file);
	//}
	}
	public enum DistinationTypes
	{
	Undefined,
	FaceBook,
	Instagram,
	Google,
	MicrosoftGraph,
	MSAccount,
	OWAccount,
	Linkedin,
	Twitter,
	Goo,
	Rakten,
	Blogger,
	Mixi,
	Ameba,
	Tumbler,
	Reddit,
	Yahoo,
	Pintarest
	}
	}

view raw view model of FlipView hosted with by GitHub