Windows 8 風格應用開發入門：貼靠視圖設計與實作規範

貼靠視圖是 Windows 8 多任務處理的核心特色，固定 320px 寬度佔據螢幕側邊。所有應用必須支援並提供良好體驗。

貼靠視圖觸發方式

1. 全螢幕橫向視圖
2. 從螢幕左/右邊緣向內滑動（觸控）或滑鼠拖曳邊緣
3. 應用縮小為 320px 寬度的貼靠視圖，另一側顯示其他應用

開發核心注意事項

• 強制支援：所有通過認證的應用必須支援貼靠視圖
• 專屬佈局：建議為貼靠視圖設計專用樣板，而非單純縮放
• 狀態同步：捲動位置、選取項目、輸入內容需與全螢幕視圖同步
• 風格一致：保持品牌色彩、字體、間距等視覺語言統一
• 互動完整：核心任務流程必須可在貼靠視圖完整完成，不可出現「假頁面」

貼靠視圖設計規範

實作步驟

步驟 1：定義貼靠視圖專用控件

通常使用 ListView 適應單欄垂直捲動。

<ListView x:Name="snappedListView"
          Visibility="Collapsed"
          ItemTemplate="{StaticResource SnappedItemTemplate}"
          SelectionMode="None" />

步驟 2：在 Snapped VisualState 中切換顯示

<VisualState x:Name="Snapped">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedListView"
            Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="fullScreenGridView"
            Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

進階技巧

• 使用 SemanticZoom 在貼靠視圖提供快速導航
• 應用列命令根據視圖狀態動態顯示/隱藏
• 輸入控件（如搜尋框）保持焦點與內容同步
• 媒體播放器在貼靠視圖自動切換為迷你播放模式

貼靠視圖不是縮小版，而是專為窄幅面設計的完整體驗。下一章將介紹縱向全螢幕視圖的適配策略。