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

GridView 是水平捲動佈局的核心控件，適合全螢幕橫向瀏覽體驗。支援平鋪、分組、標題等豐富呈現模式，是 Windows 8 風格應用最常用的資料控件之一。

GridView 核心屬性與事件

三種核心呈現模式

模式一：平鋪瀏覽

最基本的水平平鋪列表，適合首頁精選、產品目錄等。

<GridView x:Name="gridView1"
          SelectionMode="None"
          ItemTemplate="{StaticResource StoreFrontTileTemplate}" />

<DataTemplate x:Key="StoreFrontTileTemplate">
    <Grid Width="280" Height="180" Background="{Binding Color}">
        <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" 
                   FontSize="18" Foreground="White" Margin="10"/>
    </Grid>
</DataTemplate>

模式二：項目點擊互動

啟用 IsItemClickEnabled 處理點擊導航。

<GridView x:Name="gridView2"
          IsItemClickEnabled="True"
          ItemClick="GridView_ItemClick"
          ItemTemplate="{StaticResource StoreFrontTileTemplate}" />

private void GridView_ItemClick(object sender, ItemClickEventArgs e) {
    var item = e.ClickedItem as ItemModel;
    // 導航至詳細頁面
    Frame.Navigate(typeof(DetailPage), item.Id);
}

模式三：分組水平佈局

組與組水平排列，組內項目垂直排列。需配合 CollectionViewSource 與 GroupStyle。

<GridView x:Name="gridView3"
          ItemsSource="{Binding Source={StaticResource cvs1}}"
          ItemTemplate="{StaticResource GroupItemTemplate}"
          ItemsPanel="{StaticResource GridItemsPanelTemplate}"
          GroupStyle="{StaticResource GridGroupStyle}" />

<!-- ItemsPanel：控制群組水平排列 -->
<ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
    <VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

<!-- GroupStyle：控制群組標題與組內項目垂直排列 -->
<GroupStyle x:Key="GridGroupStyle">
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" FontSize="26" FontWeight="Bold" Margin="10,0"/>
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
    <GroupStyle.Panel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Vertical" 
                                   MaximumRowsOrColumns="3"/>
        </ItemsPanelTemplate>
    </GroupStyle.Panel>
</GroupStyle>

// C# 程式碼：建立分組資料來源
var cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true;
cvs.Source = GetGroupedData(); // 回傳分組集合
this.Resources["cvs1"] = cvs;

自訂標題效果

使用 Header 或 HeaderTemplate 添加區塊標題。

<GridView.Header>
    <TextBlock Text="精選推薦" FontSize="32" FontWeight="Light" Margin="10,0"/>
</GridView.Header>

虛擬化與效能優化

• 預設使用 VirtualizingStackPanel，僅渲染可視區域項目
• 大型資料集建議啟用 IncrementalLoading 分頁載入
• 項目樣板保持輕量，避免複雜視覺樹
• 圖片使用適當解析度，配合 DecodePixelWidth/Height

GridView 是構建沉浸式水平瀏覽體驗的首選。下一章將介紹語義縮放控件，實現大量資料的快速導航。