Windows 8 應用開發實戰：裝置方向、輔助螢幕與語意縮放

前言

優秀的 Windows 應用商店應用必須適應多樣的螢幕尺寸、解析度、裝置方向（橫向/縱向）與輔助螢幕模式。語意縮放則提供比視覺縮放更豐富的資訊階層體驗。本文以 Contoso Cookbook 為例，示範三大核心 UI 適應技術的完整實作。

裝置方向適應

開始頁面：GridView 自動流式排版

開始頁面使用 GridView 搭配 VirtualizingStackPanel Orientation="Horizontal"，內容會自動依螢幕寬度換行，無需額外程式碼即可完美適應橫向與縱向。

群組明細頁面：縱向模式切換 ListView

1. 新增 portraitListView，使用垂直捲動的 ListView，項目樣板套用 Standard500x130ItemTemplate。
2. 在 FullScreenPortrait 視覺狀態中，隱藏 itemGridView、顯示 portraitListView：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
  <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView" Storyboard.TargetProperty="Visibility">
  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>

項目明細頁面：縱向模式重新配版

新增 portraitFlipView，資料樣板改用垂直 StackPanel 依序堆疊標題、圖片、材料、步驟。同樣透過 FullScreenPortrait 視覺狀態切換顯示。

輔助螢幕模式適應

輔助螢幕寬度固定 320px，需專用版面配置。Visual Studio 範本已內建 Snapped 視覺狀態，開發者只需客製化內容呈現。

群組項目頁面（開始頁面）：加入準備時間

修改 Standard80ItemTemplate，加入水平 StackPanel 顯示「準備時間：X 分鐘」。

群組明細頁面：縮減標題區塊邊距

調整 ListView.Header 中圖片與描述的左邊距為 10，移除多餘 TextBlock，釋放空間給食譜清單。

項目明細頁面：專用 snappedFlipView 顯示材料

<FlipView x:Name="snappedFlipView" Visibility="Collapsed">
  <FlipView.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Vertical" Margin="20,0,20,0">
        <TextBlock Text="{Binding Title}" FontSize="20"/>
        <Image Width="260" Source="{Binding Image}"/>
        <TextBlock Text="Ingredients" FontSize="20"/>
        <TextBlock Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" FontSize="16" TextWrapping="Wrap"/>
      </StackPanel>
    </DataTemplate>
  </FlipView.ItemTemplate>
</FlipView>

在 Snapped 視覺狀態隱藏預設 flipView、顯示 snappedFlipView。

語意縮放實作

SemanticZoom 控制項結構

<SemanticZoom Grid.Row="1">
  <SemanticZoom.ZoomedInView>
    <GridView x:Name="itemGridView" ... />  <!-- 原始群組檢視 -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <GridView x:Name="groupGridView">
      <GridView.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Image Source="{Binding Group.GroupImage}" Width="250" Height="500"/>
            <TextBlock Text="{Binding Group.Title}" FontSize="28" Margin="12"/>
            <TextBlock Text="{Binding Group.RecipesCount}" FontSize="96" HorizontalAlignment="Right" Margin="12,64,12,12"/>
          </Grid>
        </DataTemplate>
      </GridView.ItemTemplate>
    </GridView>
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

縮小時隱藏群組檢視

在 Snapped 視覺狀態隱藏 groupGridView。

繫結群組資料來源

this.groupGridView.ItemsSource = this.groupedItemsViewSource.View.CollectionGroups;

操作體驗

• 觸控：雙指捏合縮放
• 滑鼠：Ctrl + 滾輪
• 鍵盤：Ctrl + +/-

縮小時顯示所有群組封面與食譜數量，點選群組自動切回放大檢視並捲動至該群組。

總結

透過視覺狀態管理與 SemanticZoom，Contoso Cookbook 實現了跨方向、輔助螢幕、語意縮放的完整適應體驗，且幾乎無需撰寫命令式程式碼。這展現了 XAML 聲明式 UI 與 VisualStateManager 的強大威力。下一階段將整合搜尋與共用合約，深化應用與系統連結。