This example demonstrates how to create a WPF FlipView, bind it to data, and use a template (ItemContentTemplate) to visualize data items.
XAML<dxwui:FlipView ItemsSource="{Binding DataSource}" ItemTemplate="{StaticResource ItemContentTemplate}"/>
Files to Review
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
FlipViewSample/MainWindow.xaml
XAML<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="FlipViewSample.MainWindow"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
Title="MainWindow" Height="752" Width="657"
xmlns:local="clr-namespace:FlipViewSample">
<Window.DataContext>
<local:EmployeesData/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="ItemContentTemplate">
<Grid x:Name="Grid_Content" Margin="100, 0, 100, 0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" BorderBrush="Black" BorderThickness="0" Margin="0">
<Image Margin="1" Source="{Binding Photo}" Stretch="None" />
</Border>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding FullName}" TextWrapping="Wrap" Grid.Row="1" FontFamily="Times New Roman" FontSize="22.667" Foreground="#FF1059A3" Margin="0,15,0,5" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Job Title:" Grid.Column="0" Grid.Row="0"/>
<TextBlock Text="City:" Grid.Column="0" Grid.Row="1"/>
<TextBlock Text="Country:" Grid.Column="0" Grid.Row="2"/>
<TextBlock Text="E-mail:" Grid.Column="0" Grid.Row="3"/>
<TextBlock Text="Birth Date:" Grid.Column="0" Grid.Row="4"/>
<TextBlock Text="Hire Date:" Grid.Column="0" Grid.Row="5"/>
<TextBlock Text="Martial Status:" Grid.Column="0" Grid.Row="6"/>
<TextBlock Text="{Binding JobTitle}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="{Binding City}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="{Binding CountryRegionName}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="2"/>
<TextBlock Text="{Binding EmailAddress}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="3"/>
<TextBlock Text="{Binding BirthDate}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="4"/>
<TextBlock Text="{Binding HireDate}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="5"/>
<TextBlock Text="{Binding MaritalStatus}" TextWrapping="Wrap" Foreground="#FF1059A3" Margin="10,0" Grid.Column="1" Grid.Row="6"/>
</Grid>
<Grid Grid.Row="3" Margin="0,20,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Rectangle Fill="#FFA4A7BD" StrokeThickness="0" Height="1" Margin="0" VerticalAlignment="Top" />
<TextBlock Margin="10" Grid.Row="1" TextWrapping="Wrap" Foreground="#FF3B3D60" Text="{Binding Phone}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<dxwui:FlipView ItemsSource="{Binding DataSource}" ItemTemplate="{StaticResource ItemContentTemplate}"/>
</Grid>
</Window>
FlipViewSample/DataStorage.cs
C#using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media.Imaging;
using System.Xml.Serialization;
namespace FlipViewSample {
[XmlRoot("Employees")]
public class Employees : List<Employee> {
}
[XmlRoot("Employee")]
public class Employee {
public int Id { get; set; }
public int ParentId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string FullName {
get {
return FirstName + " " + LastName;
}
}
public string JobTitle { get; set; }
public string Phone { get; set; }
public string EmailAddress { get; set; }
public string AddressLine1 { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string CountryRegionName { get; set; }
public string GroupName { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public string Gender { get; set; }
public string MaritalStatus { get; set; }
public string Title { get; set; }
public byte[] ImageData { get; set; }
BitmapImage imageSource;
[XmlIgnore]
public BitmapImage Photo {
get {
if (imageSource == null)
SetImageSource();
return imageSource;
}
}
void SetImageSource() {
var stream = new MemoryStream(ImageData);
imageSource = new BitmapImage();
imageSource.BeginInit();
imageSource.StreamSource = stream;
imageSource.EndInit();
}
}
public static class DataStorage {
static Employees employees;
public static Employees Employees {
get {
if (employees == null) {
var stream = System.Reflection.Assembly.GetEntryAssembly().GetManifestResourceStream("FlipViewSample.Employees.xml");
XmlSerializer serializier = new XmlSerializer(typeof(Employees));
employees = serializier.Deserialize(stream) as Employees;
}
return employees;
}
}
}
public class EmployeesData {
public Employees DataSource {
get { return DataStorage.Employees; }
}
}
}