Режим изменения представления

Используйте режим перелистывания для просмотра изображений или других элементов по коллекции, например, фотографий в альбоме или элемента на странице информации о продукте, по одному элементу за раз. Для сенсорных устройств свайп по элементу позволяет просматривать коллекцию. Для мыши кнопки навигации отображаются на указателе мыши. Для клавиатуры клавиши со стрелками позволяют перемещаться по коллекции.

Это правильный контроль?

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

Recommendations

• Просмотры с перелистыванием лучше всего работают для коллекций, содержащих до 25 элементов.
• Избегайте использования элемента управления представлением перелистывания для больших коллекций, так как повторяющееся движение перелистывания каждого элемента может быть утомительным. Исключением будет фотоальбом, который часто имеет сотни или тысячи изображений. Фотоальбомы почти всегда переключаются на режим пролистывания после выбора фотографии в макете сеточного представления. Для других крупных коллекций рассмотрим представление списка или представление сетки.

Контрольный список глобализации и локализации

• Двунаправленные рекомендации. Используйте стандартное зеркальное отображение для языков RTL. Элементы управления назад и вперед должны основываться на направлении языка, поэтому для языков RTL справа кнопка должна перемещаться назад, а левая кнопка должна перемещаться вперед.

Примеры

Горизонтальный просмотр, начиная с самого левого элемента и переход вправо, является типичным макетом для переключаемого просмотра. Этот макет отлично функционирует как в вертикальной, так и в горизонтальной ориентации на всех устройствах.

Кроме того, можно просмотреть вертикальное представление с помощью перевернутого окна:

Создание переключаемого представления

• Важные API: класс FlipView, свойство ItemsSource, свойство ItemTemplate

Откройте приложение коллекции WinUI 3 и просмотрите FlipView в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

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

По умолчанию элемент данных отображается в режиме перелистывания в виде строкового представления привязанного объекта данных. Чтобы точно указать, как элементы отображаются в режиме листания, создайте DataTemplate для определения расположения элементов управления, используемых для отображения каждого отдельного элемента. Элементы управления в макете могут быть привязаны к свойствам объекта данных или содержать содержимое, определенное встроенным образом. Вы назначаете DataTemplate свойству ItemTemplate объекта FlipView.

Добавление элементов в коллекцию Items

Добавить элементы в коллекцию Items можно с помощью XAML или кода программы. Обычно вы добавляете элементы таким образом, если у вас небольшое количество элементов, которые не изменяются и легко определяются в XAML, или при создании элементов в коде во время выполнения. Вот представление переключения с элементами, определенными встроенно.

<FlipView x:Name="flipView1">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

При добавлении элементов в FlipView они автоматически помещаются в контейнер FlipViewItem. Чтобы изменить способ отображения элемента, можно применить стиль к контейнеру элементов, задав свойство ItemContainerStyle .

При определении элементов в XAML они автоматически добавляются в коллекцию "Элементы".

Установка источника элементов

Вы обычно используете переключаемый вид для отображения данных из такого источника, как база данных или Интернет. Чтобы заполнить представление перелистывания из источника данных, задайте для свойства ItemsSource коллекцию элементов источника данных.

Здесь элемент ItemsSource представления flip задается в коде непосредственно для экземпляра коллекции.

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

Свойство ItemsSource можно также связать с коллекцией в среде XAML. Дополнительные сведения см. в разделе "Привязка данных с помощью XAML".

Здесь объект ItemsSource привязан к CollectionViewSource под именем itemsViewSource.

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

...

<FlipView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

Caution

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

Укажите внешний вид элементов

По умолчанию элемент данных отображается в режиме перелистывания в виде строкового представления привязанного объекта данных. Обычно вы хотите продемонстрировать более насыщенное представление ваших данных. Чтобы указать точно, как элементы отображаются в элементе управления FlipView, создайте DataTemplate. В DataTemplate с помощью XAML определяется макет и внешний вид элементов управления, используемых для отображения отдельного элемента. Элементы управления в макете могут быть привязаны к свойствам объекта данных или содержать содержимое, определенное встроенным образом. DataTemplate назначается свойству ItemTemplate элемента управления FlipView.

В этом примере шаблон ItemTemplate для FlipView определён прямо в коде. Наложение добавляется к изображению для отображения имени изображения.

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Вот как выглядит макет, определенный шаблоном данных.

Установите ориентацию представления перелистывания

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

В этом примере показано, как использовать панель стека с вертикальной ориентацией в качестве ItemsPanel элемента FlipView.

<FlipView x:Name="flipViewVertical" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
    
    <!-- Use a vertical stack panel for vertical flipping. -->
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Width="480" Height="270" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" 
                               FontFamily="Segoe UI" FontSize="26.667" 
                               Foreground="#CCFFFFFF" Padding="15,20"/>
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Вот как выглядит вид с вертикальной ориентацией.

Добавление индикатора контекста

Используйте индикатор контекста (например, PipsPager или плёнку) с элементом управления «flip view», чтобы помочь пользователям ориентироваться в содержимом.

На следующем рисунке показан PipsPager, используемый с небольшой фотогалереей (мы рекомендуем центрирование PipsPager под фотогалереей).

В этом фрагменте кода показано, как привязать PipsPager к FlipView.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

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

Под фотоальбомом FlipView находится полоса с миниатюрами.

Полный пример добавления индикатора контекста в FlipView см. в примере XAML FlipView.

Связанные статьи

• Руководство по использованию списков
• ПипсПейджер
• Класс FlipView