Windows 8 Store Apps 開發實戰 (21)：ThemeTransition 過渡動畫全解析 — 九大內建轉場效果

前言：聲明式轉場，零程式碼打造流暢體驗

Windows 8 引入 ThemeTransition 系列，讓開發者透過 XAML 宣告即可套用符合 Metro 設計語言的過渡動畫。九大轉場分別對應不同 UI 情境，完全由 Composition 層執行（Independent Animation），不佔用 UI 執行緒，效能極佳。本篇逐一解析適用時機與參數設定。

四種掛載點

九大 ThemeTransition 詳細解析

1. EntranceThemeTransition — 進場登場

適用：頁面/區塊初次載入、導航切換。
參數：FromHorizontalOffset、FromVerticalOffset（起始偏移）、IsStaggeringEnabled（是否錯開呈現子元素）。

<Frame>
  <Frame.ContentTransitions>
    <TransitionCollection>
      <EntranceThemeTransition IsStaggeringEnabled="False" />
    </TransitionCollection>
  </Frame.ContentTransitions>
</Frame>

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapGrid>
        <WrapGrid.ChildrenTransitions>
          <TransitionCollection>
            <EntranceThemeTransition IsStaggeringEnabled="True" />
          </TransitionCollection>
        </WrapGrid.ChildrenTransitions>
      </WrapGrid>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

2. ContentThemeTransition — 內容切換

適用：同一容器內容替換（如翻頁、Tab 切換）。
參數：FromHorizontalOffset、FromVerticalOffset。

<ContentControl>
  <ContentControl.ContentTransitions>
    <TransitionCollection><ContentThemeTransition /></TransitionCollection>
  </ContentControl.ContentTransitions>
</ContentControl>

3. RepositionThemeTransition — 位置移動

適用：元素 Margin、Canvas.Left/Top、RenderTransform 位置改變時自動補間。
用法：直接掛在元素 Transitions，無需參數。

<Rectangle>
  <Rectangle.Transitions>
    <TransitionCollection><RepositionThemeTransition /></TransitionCollection>
  </Rectangle.Transitions>
</Rectangle>

4. PopupThemeTransition — 彈出特效

適用：Popup、Flyout、ContextMenu 開啟/關閉。
參數：FromHorizontalOffset、FromVerticalOffset。

<Popup>
  <Popup.ChildTransitions>
    <TransitionCollection><PopupThemeTransition /></TransitionCollection>
  </Popup.ChildTransitions>
</Popup>

5. AddDeleteThemeTransition — 增刪動畫

適用：集合項目新增/移除（ItemsControl.Items.Add/Remove）。
掛載點：Panel.ChildrenTransitions 或 ItemsControl.ItemContainerTransitions。

6. ReorderThemeTransition — 重新排序

適用：集合項目順序變更（Insert、Move）。
掛載點：同 AddDeleteThemeTransition。

7. PaneThemeTransition — 大型面板滑入

適用：側邊欄、鍵盤、大型設定面板（寬/高 > 320px）。
參數：Edge（Left/Top/Right/Bottom）。

8. EdgeUIThemeTransition — 小型邊緣 UI

適用：AppBar、小型工具提示、選取器下拉（寬/高 ≤ 320px）。
參數：Edge。

實戰建議

1. 不要濫用：每個轉場約 200-300ms，過多會拖慢感知速度。
2. 配合語意：導航用 Entrance，內容切換用 Content，位置微調用 Reposition。
3. Staggering：列表項目建議開啟 IsStaggeringEnabled="True"，營造層次感。
4. Edge 方向一致：Pane/EdgeUI 的 Edge 應與實際滑入方向一致（左側欄用 Left）。

完整程式碼下載

原始碼完整包（含所有範例專案）