FlipView

FlipView представляет элемент, который содержит несколько объектов (например, изображений), которые мы можем пролистывать. На сенсорных устройствах пролистывание осуществляется с помощью касания пальца. На устройствах, которые не поддерживют сенсорных ввод, для перелистывания используются кнопки навигации, либо клавиши со стрелками. FlipView лучше всего подходит для просмотра небольшого количества объектов (примерно до 25 объектов), например, фотографий в фотоальбоме или карточек с информацией о товаре.

FlipView наследуется от класса ItemsControl и поэтому может содержать коллекцию элементов любого типа. Поэтому мы можем либо определить все ее элементы через свойство Items, либо привязать список объектов к свойству ItemsSource элемента FlipView.

Например, определим простейший FlipView:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    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}">

        <FlipView>
            <FlipView.Items>
                <StackPanel>
                    <TextBlock Text="Первая страница" />
                </StackPanel>
                <StackPanel>
                    <TextBlock Text="Вторая страница" />
                </StackPanel>
            </FlipView.Items>
        </FlipView>
    </Grid>
</Page>

Здесь FlipView содержит два элемента StackPanel, каждый из которых представляет как бы отдельную страницу. Фактически эти элементы StackPanel будут помещаться в И если мы запустим проект, то в итоге мы увидим на FlipView содержимое только первого StackPanel. Однако сбоку нам будет доступна кнопка для перехода к следующему StackPanel:

Теперь определим в FlipView более сложное содержимое. Пусть в проекте есть следующий класс Phone:

public class Phone
{
    public int Id { get; set; }
    public string Title { get; set; } // модель телефона
    public string Company { get; set; } // производитель
    public string ImagePath { get; set; } // путь к изображению
}

Пусть в проекте в папке Assets хранится несколько картинок, которые мы можем использовать для объектов Phone.

В классе MainPage определим источник данных в виде свойства Phones:

public sealed partial class MainPage : Page
{
    public ObservableCollection<Phone> Phones { get; set; }

    public MainPage()
    {
        this.InitializeComponent();

        Phones = new ObservableCollection<Phone>
        {
            new Phone {Id=1, Title="iPhone 7", Company="Apple", ImagePath="Assets/iphone6s.jpg" },
            new Phone {Id=2, Title="Galaxy S8", Company="Samsung", ImagePath="Assets/galaxys6.jpg" },
            new Phone {Id=3, Title="Huawei P10", Company="Huawei", ImagePath="Assets/mate8.jpg" },
        };
    }
}

В коде xaml у страницы MainPage определим привязку к источнику данных:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    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}">

        <FlipView ItemsSource="{x:Bind Phones}" Background="White">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Image Source="{Binding ImagePath}" Width="200" Height="150" />
                        <TextBlock Text="{Binding Title}" TextAlignment="Center" FontWeight="Bold" />
                        <TextBlock Text="{Binding Company}" TextAlignment="Center"  />
                    </StackPanel>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

Ориентация FlipView

В качестве панели для расположения элементов в FlipView используется элемент VirtualizingStackPanel - своего рода StackPanel, который имеет по умолчанию горизонтальную ориентацию, то есть мы можем прокручивать элементы справа налево или слева направо. Но мы также можем использовать и вертикальную ориентацию для прокрутки по вертикали:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    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}">

        <FlipView ItemsSource="{x:Bind Phones}" Background="White">
            
            <FlipView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
            
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Image Source="{Binding ImagePath}" Width="200" Height="150" />
                        <TextBlock Text="{Binding Title}" TextAlignment="Center" FontWeight="Bold" />
                        <TextBlock Text="{Binding Company}" TextAlignment="Center"  />
                    </StackPanel>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>