Windows 8 風格應用開發入門：FlipView 控件完整指南

FlipView 是呈現小型到中型資料集合的理想控件，支援水平或垂直翻頁瀏覽，常用於產品圖片輪播、房產照片展示等場景。

FlipView 核心特性

• 繼承自 ItemsControl，資料繫結模式與 ListView/GridView 一致
• 支援觸控滑動、滑鼠滾輪、鍵盤方向鍵導航
• 可自訂項目樣板、面板佈局、切換方向
• 提供 SelectionChanged 事件處理選項變更

關鍵屬性與事件

三種常見使用模式

模式一：預設水平翻頁

最基本用法，左右切換項目。

<FlipView x:Name="flipView1">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding ImagePath}" Stretch="Uniform"/>
                <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" 
                           FontSize="24" Foreground="White" Margin="10"/>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

// C# 程式碼後置
var items = new List<ItemModel> {
    new ItemModel { ImagePath = "Assets/1.jpg", Title = "產品一" },
    new ItemModel { ImagePath = "Assets/2.jpg", Title = "產品二" }
};
flipView1.ItemsSource = items;

模式二：垂直翻頁

透過 ItemsPanel 設定 VirtualizingStackPanel 垂直方向。

<FlipView x:Name="flipView2">
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    <FlipView.ItemTemplate>
        <DataTemplate>
            <!-- 樣板內容同模式一 -->
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

模式三：附加上下文指示器

搭配 ListBox 顯示縮圖導航，支援直接跳轉特定項目。

<Grid>
    <FlipView x:Name="flipView3" 
              ItemsSource="{Binding Items}"
              ItemTemplate="{StaticResource FlipItemTemplate}" />
    
    <ListBox x:Name="indicatorList"
             ItemsSource="{Binding Items}"
             SelectedItem="{Binding SelectedItem, ElementName=flipView3, Mode=TwoWay}"
             ItemContainerStyle="{StaticResource ContextControlItemStyle}"
             Style="{StaticResource ListBoxStyle1}"
             HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20">
    </ListBox>
</Grid>

指示器樣式資源定義：

<Page.Resources>
    <Style x:Key="ListBoxStyle1" TargetType="ListBox">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="ContextControlItemStyle" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Ellipse Width="12" Height="12" Fill="Gray" Margin="4"
                             Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

最佳實踐建議

建議做法

• 項目缺乏上下文資訊時，提供指示器協助定位
• 明確標示目前項目位置
• 限制指示器數量與適用場景，避免介面雜亂
• 允許使用者點擊指示器直接跳轉

避免做法

• 不要用於大型資料集合（超過 20-30 項），改用 ListView/GridView
• 避免在項目間切換時載入過大資源導致卡頓

FlipView 適合線性瀏覽體驗，搭配虛擬化面板可保證流暢效能。下一章將介紹 ListView 控件的分組與選取進階用法。