Windows 8 SemanticZoom 控制項提供語意縮放體驗：ZoomedInView 顯示詳細內容（如 GridView 群組項目），ZoomedOutView 顯示群組標題索引，讓使用者快速跳轉至目標群組。需搭配 CollectionViewSource 提供分組資料源。

核心 XAML 結構

<SemanticZoom x:Name="semanticZoom">
  <SemanticZoom.ZoomedOutView>
    <!-- 縮小索引視圖：通常綁定 Group.Title -->
    <GridView ...> ... </GridView>
  </SemanticZoom.ZoomedOutView>
  <SemanticZoom.ZoomedInView>
    <!-- 詳細資訊視圖：一般 GridView/ListView -->
    <GridView ...> ... </GridView>
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

CollectionViewSource 關鍵屬性

• Source：資料來源綁定。
• IsSourceGrouped="true"：啟用分組。
• ItemsPath="ItemContent"：指定群組內項目屬性路徑。
• View.CollectionGroups：取得所有群組集合供 ZoomedOutView 綁定。

實作步驟範例

1. 資源定義：在 Grid.Resources 宣告 CollectionViewSource，設定 IsSourceGrouped="true"、ItemsPath="ItemContent"。
2. ZoomedInView：繪製主要 GridView，綁定 CollectionViewSource，定義 ItemTemplate、GroupStyle（含 HeaderTemplate）。
3. ZoomedOutView：繪製索引 GridView，綁定 CollectionViewSource.View.CollectionGroups，ItemTemplate 綁定 Group.Title。

<Grid.Resources>
  <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="ItemContent" />
</Grid.Resources>

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Center">
  <SemanticZoom.ZoomedOutView>
    <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">
      <GridView.ItemTemplate>
        <DataTemplate>
          <!-- 綁定 Group.Title -->
          <TextBlock Text="{Binding Group.Title}" Style="{StaticResource SubheaderTextStyle}" />
        </DataTemplate>
      </GridView.ItemTemplate>
      <GridView.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapGrid ItemWidth="200" ItemHeight="50" MaximumRowsOrColumns="4" />
        </ItemsPanelTemplate>
      </GridView.ItemsPanel>
    </GridView>
  </SemanticZoom.ZoomedOutView>

  <SemanticZoom.ZoomedInView>
    <GridView x:Name="itemGridView" ItemsSource="{Binding Source={StaticResource itemcollectSource}}" ...>
      <GridView.ItemTemplate> ... </GridView.ItemTemplate>
      <GridView.GroupStyle>
        <GroupStyle>
          <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Title}" Style="{StaticResource HeaderTextStyle}" />
            </DataTemplate>
          </GroupStyle.HeaderTemplate>
        </GroupStyle>
      </GridView.GroupStyle>
    </GridView>
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

後端程式碼需將分組資料集合指派給 itemcollectSource.Source。執行時，捏合手勢或點擊右下角縮放按鈕即可在兩視圖切換。