Windows 8 風格應用開發入門：縱向全螢幕視圖適配指南

Windows 8 支援裝置旋轉，應用需在縱向模式提供等同品質的體驗。GridView 可自動適配，自訂佈局則需透過 VisualState 切換專用樣板。

縱向視圖設計考量

• 減少邊距：緊湊佈局利用有限寬度
• 重新排版：水平列表改為垂直，或調整項目樣板比例
• 保持瀏覽方向：資料瀏覽仍採水平捲動，符合使用者習慣

自動適配與手動適配

GridView：自動適配優勢

使用 GridView 呈現資料時，縱向切換會自動調整項目排列，無需額外程式碼。

自訂佈局：手動定義 FullScreenPortrait VisualState

其他控件需在 FullScreenPortrait VisualState 中聲明切換動畫與佈局調整。

<VisualState x:Name="FullScreenPortrait">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="horizontalListView"
            Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalListView"
            Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
            Storyboard.TargetProperty="Margin">
            <DiscreteObjectKeyFrame KeyTime="0" Value="20,10,0,0"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

最佳實踐

• 優先使用 GridView 降低適配成本
• 縱向專用樣板調整項目長寬比（如 4:3 → 3:4）
• 標題列高度壓縮，增加內容區域
• 測試裝置旋轉動畫流暢度，避免佈局跳動
• 考慮強制橫向鎖定（遊戲、影音類應用）

縱向適配的核心是「內容不變，佈局重組」。下一章將介紹裝置方向感測器的程式化控制。