语言: HTML | XAML

快速入门:添加 FlipView 控件 (XAML)

Applies to Windows and Windows Phone

使用 FlipView 控件可显示项目集合,用户可按顺序在使用 C++、C# 或 Visual Basic 的 Windows 运行时应用中浏览这些项目。

先决条件

我们假定你可以向使用 C++、C# 或 Visual Basic 的基本 Windows 运行时应用中添加控件。有关添加控件的说明,请参阅快速入门:添加控件和处理事件

什么是 FlipView?

FlipView 是一种控件,可让你用来按顺序逐一浏览项目集合。它非常适合显示图像库。像 ListViewGridView 控件一样,FlipView 是从 ItemsControl 类中派生的,因此该控件共享其许多功能。你可以通过添加嵌入项目或将其绑定到数据源来填写 FlipView

翻转视图控件

将项添加到项集合

可以通过使用 XAML 或代码向 Items 集合添加项。在以下情况下通常采用这种方式添加项:具有不更改且使用 XAML 轻松定义的少量项,或者在运行时采用代码生成项。以下是一个 FlipView,其中项目是使用 XAML 以内联方式定义的。


<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <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 = ref new FlipView();
flipView1->Items->Append("Item 1");
flipView1->Items->Append("Item 2");
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


FlipView 添加项时,这些项目会自动放置在 FlipViewItem 容器中。要更改项如何显示,你可通过设置 ItemContainerStyle 属性应用样式到该项容器。

使用可扩展应用程序标记语言 (XAML) 定义项时,这些项还会自动添加到 Items 集合。

设置项目源

你通常使用 FlipView 显示源(例如数据库或 Internet)中的数据。若要填充数据源中的 FlipView,请将其 ItemsSource 属性设置为数据项集合。

注意  可以通过将项添加到其 Items 集合或设置其 ItemsSource 属性,填充 FlipView,但不能同时使用两种方式。如果 ItemsSource 属性已设置且使用 XAML 添加项,则会忽略该项。如果 ItemsSource 属性已设置且使用代码向 Items 集合中添加项,则会引发异常。

此时,直接在代码中将 FlipViewItemsSource 设置为集合实例。


// Data source.
Platform::Collections::Vector<String^>^ itemsList = 
    ref new Platform::Collections::Vector<String^>();
itemsList->Append("Item 1");
itemsList->Append("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView^ flipView1 = ref new FlipView();
flipView1->ItemsSource = itemsList;
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


还可以将 ItemsSource 属性绑定到 XAML 中的集合。有关更多信息,请参阅使用 XAML 进行数据绑定

在下面的代码中,ItemsSource 绑定到名为 itemsViewSourceCollectionViewSource


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



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


指定项目的外观

在默认情况下,数据项以绑定到的数据对象的字符串表现形式显示在 FlipView 中。你通常希望显示你的数据的一个更加丰富的演示。若要具体地指定 FlipView 中项的显示方式,则可以创建 DataTemplateDataTemplate 中的 XAML 定义用于显示各项的控件的布局和外观。该布局中的控件可绑定到数据对象的属性,或者具有定义的嵌入内容。DataTemplate 会分配给 FlipViewItemTemplate 属性。

在本示例中,FlipViewItemTemplate 采用嵌入定义。会将一个覆盖添加到图像以显示图像名称。


    <FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <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>


以下是数据模板所定义布局的外观。

翻转视图数据模板。

设置 FlipView 的方向

在默认情况下,FlipView 以水平反向翻转。若要使其垂直翻转,请使用 StackPanel,以垂直方向作为翻转视图的 ItemsPanel

此示例显示以垂直方向作为 FlipViewItemsPanelStackPanel


  <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" Source="{Binding Image}" Stretch="UniformToFill"/>
                  <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" 
                                 Foreground="#CCFFFFFF" Padding="15,20"/>
                  </Border>
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>

  </FlipView>


以下是 FlipView 使用垂直方向时的外观。

使用垂直方向翻转视图

摘要和后续步骤

你了解了如何创建 FlipView 控件来显示数据集合。

有关更多示例,请下载 XAML FlipView 示例

相关主题

FlipView
FlipView 控件指南
使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图
使用 C++ 的 Windows 运行时应用的路线图

 

 

显示:
© 2014 Microsoft