Windows 8 風格應用開發入門：頁面視圖狀態總覽

Windows 8 應用需適應四種核心視圖狀態，透過 VisualStateManager 實現無縫切換。理解視圖特性與切換機制是打造響應式介面的基礎。

四種核心視圖狀態

Visual Studio 設計器與模擬器測試

設計器裝置面板

在 XAML 設計器中可即時切換預覽不同視圖：

• 視圖狀態：FullScreenLandscape / Filled / Snap / FullScreenPortrait
• VisualState：對應各視圖的動畫狀態
• Display：模擬不同解析度
• Theme：淺色/深色主題切換

模擬器實機測試

模擬器工具列提供視圖切換按鈕，支援拖曳邊緣觸發貼靠、旋轉裝置觸發縱向視圖。

視圖切換核心機制

頁面基類 LayoutAwarePage 內建視圖狀態管理：

1. 註冊 Window.Current.SizeChanged 事件
2. 根據視窗尺寸判斷當前視圖狀態
3. 呼叫 VisualStateManager.GoToState 切換對應 VisualState
4. 各 VisualState 定義 Storyboard 動畫控制元素顯示/隱藏/佈局調整

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape" />
        <VisualState x:Name="Filled" />
        <VisualState x:Name="Snapped">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="listView" 
                    Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridView" 
                    Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="FullScreenPortrait" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

關鍵設計原則

• 內容一致性：各視圖呈現相同資料，僅調整佈局
• 狀態保持：視圖切換不重置捲動位置、選取項目、輸入內容
• 互動完整性：貼靠視圖必須支援核心任務完整流程
• 效能考量：避免過度複雜的視圖切換動畫

掌握視圖狀態機制後，下一章將詳細說明貼靠視圖的專屬設計規範與實作技巧。