Language: HTML | XAML

快速入門:新增 FlipView 控制項 (XAML)

Applies to Windows and Windows Phone

運用 FlipView 控制項,在使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式中顯示使用者可依序瀏覽的項目集合。

先決條件

假設您可以將控制項新增至使用 C++、C# 或 Visual Basic 的基本 Windows 執行階段應用程式。如需新增控制項的指示,請參閱快速入門:新增控制項和處理事件

什麼是 FlipView?

FlipView 是可以讓您依序瀏覽項目集合的控制項 (一次一個項目)。最適合用於顯示影像圖庫。FlipView 是衍生自 ItemsControl 類別,就像 ListViewGridView 控制項一樣,因此可以共用它們的數個功能。您可以藉由新增內嵌項目或繫結資料來源以填入 FlipView

翻轉檢視控制項

新增項目到 Items 集合

您可以使用 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 屬性,將樣式套用到項目容器。

在 Extensible Application Markup Language (XAML) 中定義項目時,項目會自動新增到 Items 集合。

設定項目來源

您通常會使用 FlipView 顯示來自資料庫或網際網路等來源的資料。若要從資料來源填入 FlipView,您要將它的 ItemsSource 屬性設定為資料項目的集合。

附註  填入 FlipView 有兩種方法,您可以新增項目到它的 Items 集合,或是設定它的 ItemsSource 屬性,但是不可以同時使用這兩種方式。如果您設定 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 內的顯示方式,您需要建立一個 DataTemplate。在 DataTemplate 中的 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

這個範例顯示如何以垂直方向指定 StackPanel 以做為 FlipViewItemsPanel


  <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 執行階段應用程式的藍圖

 

 

顯示:
© 2015 Microsoft