Windows 8 風格應用開發入門：語義縮放控件實作指南

語義縮放讓使用者以捏合手勢在「詳細檢視」與「概覽檢視」間切換，是大量資料導航的核心交互模式。SemanticZoom 控件封裝此邏輯，支援自訂兩種檢視的外觀與行為。

為何需要語義縮放

• Windows 8 應用偏好水平捲動，內容多時定位困難
• 傳統捲動條在觸控裝置操作不便
• 語義縮放提供「地圖式」導航：縮小看全貌，點擊跳轉細節

三種概覽檢視樣式範例

SemanticZoom 核心架構

<SemanticZoom x:Name="semanticZoom">
    <SemanticZoom.ZoomedInView>
        <!-- 詳細檢視：完整資料列表 -->
        <GridView x:Name="zoomedInGridView"
                  ItemsSource="{Binding Source={StaticResource cvs}}"
                  ItemTemplate="{StaticResource StandardItemTemplate}"
                  GroupStyle="{StaticResource GroupStyle}" />
    </SemanticZoom.ZoomedInView>
    
    <SemanticZoom.ZoomedOutView>
        <!-- 概覽檢視：分類標題網格 -->
        <GridView x:Name="zoomedOutGridView"
                  ItemsSource="{Binding Source={StaticResource cvs}, Path=CollectionGroups}"
                  ItemTemplate="{StaticResource ZoomedOutItemTemplate}" />
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

關鍵實作細節

資料來源需支援分組

var cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true;
cvs.Source = GetGroupedData(); // 必須回傳分組集合
this.Resources["cvs"] = cvs;

概覽檢視項目樣板

<DataTemplate x:Key="ZoomedOutItemTemplate">
    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" 
            Width="200" Height="80">
        <TextBlock Text="{Binding Group.Name}" 
                   FontSize="18" FontWeight="Bold" 
                   VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Border>
</DataTemplate>

同步選取狀態

SemanticZoom 會自動同步兩個檢視的捲動位置與選取群組。點擊概覽檢視的群組標題，詳細檢視會自動捲動至該群組。

觸發方式

• 觸控：雙指捏合/展開
• 滑鼠：Ctrl + 滾輪
• 模擬器：工具列縮放按鈕

最佳實踐

• 概覽檢視項目數量建議 20-50 個，過多反而難以定位
• 群組標題需具備代表性，避免過長文字
• 詳細檢視與概覽檢視視覺風格保持一致
• 提供視覺提示（如縮放圖示）引導使用者發現功能

語義縮放是觸控優先介面的標誌性交互。下一章將介紹搜尋合約，實現系統級搜尋整合。