共用方式為


翻轉檢視

使用翻轉檢視瀏覽影像或集合中的其他項目,例如相簿中的相片或產品詳細資料頁面中的項目,一次瀏覽一個項目。 對於觸控裝置,撥動項目可以在集合中移動。 對於滑鼠,在滑鼠懸停時會顯示導覽按鈕。 對於鍵盤,用箭頭鍵在集合中移動。

這是正確的控制項嗎?

翻轉檢視最適合細讀中小型集合 (最多約 25 個項目) 中的影像。 此類集合的範例包括產品詳細資料頁面中的項目或相簿中的相片。 儘管我們不建議對大多數大型集合使用翻轉檢視,但該控制項對於查看相簿中的個別影像很常見。

建議

  • 翻轉檢視最適合用於包含最多 25 個項目的集合。
  • 請避免對較大的集合使用翻轉檢視控制項,因為翻轉每個項目的重複動作可能很繁瑣。 相簿是例外,它通常包含數百或數千張影像。 在格線檢視版面配置中選取相片後,相簿幾乎總是會切換到翻轉檢視。 對於其他大型集合,請考慮使用清單檢視或格線檢視

全球化和當地語系化檢查清單

  • 雙向注意事項:對 RTL 語言使用標準鏡像。 向後和向前控制項應以語言的方向為依據,因此對於 RTL 語言,右側按鈕應向後導覽,左側按鈕應向前導覽。

範例

水平瀏覽 (從最左邊的項目開始並向右轉) 是翻轉檢視的典型版面配置。 此版面配置適用於所有裝置的直向或橫向方向:

水平翻轉檢視版面配置範例

翻轉檢視也可以垂直瀏覽:

垂直翻轉檢視的範例

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDKWinUI 3 的應用程式進行了最佳化,但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例,請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。 WinUI 2.2 或更新版本包含此使用圓角之控制項的新範本。 如需詳細資訊,請參閱圓角半徑

建立翻轉檢視

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式,或在 GitHub 上取得原始程式碼

FlipView 是 ItemsControl,因此它可以包含任何類型的項目集合。 若要填入檢視,請將項目新增至 Items 集合,或將 ItemsSource 屬性設定為資料來源。

預設情況下,資料項目會在翻轉檢視中,以字串形式顯示所繫結的資料物件。 若要精確指定翻轉檢視中項目的顯示方式,您可以建立 DataTemplate 來定義用於顯示個別項目的控制項版面配置。 配置中的控制項可以繫結至資料物件的屬性,或以內嵌方式定義內容。 將 DataTemplate 指派給 FlipView 的 ItemTemplate 屬性。

將新增項目至 Items 集合

您可以使用 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 中定義項目時,它們會自動新增到 Items 集合中。

設定項目來源

您通常會使用翻轉檢視來顯示來自資料庫或網際網路等來源的資料。 若要從資料來源填入翻轉檢視,您應將其 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 會繫結到名為 itemsViewSourceCollectionViewSource

<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 屬性並在程式碼中將項目新增至 Items 集合中,則會擲回例外狀況。

指定項目的外觀

預設情況下,資料項目會在翻轉檢視中,以字串形式顯示所繫結的資料物件。 您通常會想要以更多樣化的表示方式顯示資料。 為了明確指定項目在翻轉檢視中的顯示方式,您需要建立 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 相簿下方有五個水平點。選取第三個點,表示指定內容的第三頁。

此程式碼片段示範如何將 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 範例

取得範例程式碼