翻转视图
使用翻转视图浏览集合中的图像或其他项目（例如相册中的照片或产品详细信息页中的项目），一次显示一个项目。 对于触摸设备，轻扫某个项将在整个集合中进行浏览。 对于鼠标，导航按钮显示在鼠标悬停位置上。 对于键盘，使用箭头键移动浏览该集合。
这是正确的控件吗？
翻转视图最适合浏览小到中型集合中的图像（最多 25 个项目左右）。 此类集合的示例包括产品详细信息页中的项目或相册中的照片。 虽然我们不建议将翻转视图用于大多数大型集合，但是该控件通用于查看相册中的个别图像。
建议
- 翻转视图最适用于含有最多 25 个项目的集合。
- 避免将翻转视图控件用于较大的集合，因为翻转浏览每个项目的重复性动作可能会很麻烦。 但相册是个例外，其中通常包含成百上千张图像。 在网格视图布局下选择一张照片后，相册几乎总是会切换到翻转视图。 对于其他较大集合，请考虑列表视图或网格视图。
全球化和本地化清单
- 双向注意事项：对 RTL 语言使用标准镜像。 后退和前进控件应基于语言的方向，因此对于 RTL 语言，右侧按钮应该向后导航，而左侧按钮应向前导航。
示例
水平浏览（从最左侧的项开始并向右翻转）是翻转视图的典型布局。 此布局非常适用于所有设备上的纵向或横向方向：
翻转视图同样可以垂直浏览：
UWP 和 WinUI 2
重要
本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请参阅 UWP API 参考。
本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。
此控件的 API 存在于 Windows.UI.Xaml.Controls 命名空间中。
- UWP API：FlipView 类、 ItemsSource 属性、 ItemTemplate 属性
- 打开 WinUI 2 库应用，查看 FlipView 的实际应用。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。
建议使用最新的 WinUI 2 来获取所有控件的最新样式和模板。 WinUI 2.2 或更高版本包含此控件的新模板，该模板使用圆角。 有关详细信息，请参阅圆角半径。
创建翻转视图
WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码
FlipView 是一个 ItemsControl，因此可以包含任何类型的项目的集合。 若要填充视图，将项添加到 Items 集合，或者将 ItemsSource 属性设置为数据源。
在默认情况下，数据项以绑定到的数据对象的字符串表现形式显示在翻转视图中。 若要具体地指定翻转视图中项的显示方式，请创建 DataTemplate 以定义用于显示各个项目的控件布局。 该布局中的控件可绑定到数据对象的属性，或者具有定义的嵌入内容。 将 DataTemplate 分配给 FlipView 的 ItemTemplate 属性。
将项添加到项集合
可以通过使用 XAML 或代码向 Items 集合添加项。 在以下情况下通常采用这种方式添加项：具有不更改且使用 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);
向翻转视图添加项时，这些项目会自动放置在 FlipViewItem 容器中。 要更改项的显示方式，可通过设置 ItemContainerStyle 属性将样式应用到该项容器。
使用 XAML 定义项时，这些项会自动添加到项集合。
设置项目源
通常使用翻转视图显示源（例如数据库或 Internet）中的数据。 若要填充数据源中的翻转视图，请将其 ItemsSource 属性设置为数据项集合。
此时，直接在代码中将翻转视图的 ItemsSource 设置为集合实例。
// 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 绑定到名为 itemsViewSource 的 CollectionViewSource。
<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}}"/>
注意
可以通过将项目添加到其 Items 集合或设置其 ItemsSource 属性来填充翻转视图，但不能同时使用这两种方式。 如果你设置 ItemsSource 属性并使用 XAML 添加项目，将忽略添加的项目。 如果 ItemsSource 属性已设置且使用代码向项集合中添加项，则会引发异常。
指定项目的外观
在默认情况下，数据项以绑定到的数据对象的字符串表现形式显示在翻转视图中。 你通常希望更丰富地呈现你的数据。 若要具体地指定翻转视图中项的显示方式，可以创建 DataTemplate。 DataTemplate 中的 XAML 定义用于显示各项的控件的布局和外观。 该布局中的控件可绑定到数据对象的属性，或者具有定义的嵌入内容。 将 DataTemplate 分配给 FlipView 控件的 ItemTemplate 属性。
在本示例中，FlipView 的 ItemTemplate 采用内联方式定义。 会将一个覆盖添加到图像以显示图像名称。
<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。
此示例显示如何以垂直方向作为 FlipView 的 ItemsPanel 来使用堆叠面板。
<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 或条带）与翻转视图一起使用，有助于为用户提供内容中的参考点。
下图显示了与小型照片库一起使用的 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 添加上下文指示器的完整示例，请参阅 XAML FlipView 示例。
获取示例代码
- WinUI 库示例 - 以交互式格式查看所有 XAML 控件。
相关文章
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈