WPF 3D 列表項翻轉效果完整實現指南

效果預覽

類似蘋果 Cover Flow 的 3D 翻轉效果：點擊列表項，正反面以 3D 旋轉動畫切換。線上體驗：https://www.interact-sw.co.uk/wpfapps/FlipList.xaml

核心架構：雙層 Border + Viewport3D 過渡

關鍵設計：使用雙層巢狀 Border 包裝正反面內容。內層 Border 供 VisualBrush 映射至 3D 模型，外層 Border 承載淡入淡出動畫。這樣 3D 模型的 VisualBrush 不會被淡出動畫影響。

資源定義區

• 資料源：x:Array 定義 8 個字串項目
• frontTemplate：正面樣板，綠字大號文字顯示項目內容
• backTemplate：反面樣板，四個單選按鈕堆疊
• flipItemTemplate：核心翻轉項目樣板，包含完整 3D 動畫邏輯

3D 模型構建

<Viewport3D x:Name="vp3D" Visibility="Hidden">
  <Viewport3D.Camera>
    <PerspectiveCamera x:Name="camera" Position="0,0,0.5" LookDirection="0,0,-1" FieldOfView="90" />
  </Viewport3D.Camera>
  <Viewport3D.Children>
    <!-- 光源 -->
    <ModelVisual3D>...</ModelVisual3D>
    <!-- 幾何模型 -->
    <ModelVisual3D>
      <GeometryModel3D>
        <GeometryModel3D.Geometry>
          <MeshGeometry3D TriangleIndices="0,1,2 2,3,0" 
            TextureCoordinates="0,1 1,1 1,0 0,0"
            Positions="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0" />
        </GeometryModel3D.Geometry>
        <!-- 正面材質：綁定 frontHost -->
        <GeometryModel3D.Material>
          <DiffuseMaterial>
            <VisualBrush Visual="{Binding ElementName=frontHost}" />
          </DiffuseMaterial>
        </GeometryModel3D.Material>
        <!-- 反面材質：綁定 backHost，含水平翻轉修正 -->
        <GeometryModel3D.BackMaterial>
          <DiffuseMaterial>
            <VisualBrush Visual="{Binding ElementName=backHost}">
              <VisualBrush.RelativeTransform>
                <ScaleTransform ScaleX="-1" CenterX="0.5" />
              </VisualBrush.RelativeTransform>
            </VisualBrush>
          </DiffuseMaterial>
        </GeometryModel3D.BackMaterial>
        <!-- 旋轉變換 -->
        <GeometryModel3D.Transform>
          <RotateTransform3D>
            <AxisAngleRotation3D x:Name="rotate" Axis="0,3,0" Angle="0" />
          </RotateTransform3D>
        </GeometryModel3D.Transform>
      </GeometryModel3D>
    </ModelVisual3D>
  </Viewport3D.Children>
</Viewport3D>

雙層 Border 結構

<!-- 正面包裝 -->
<Border x:Name="frontWrapper">
  <Border x:Name="frontHost" Background="Transparent">
    <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource frontTemplate}" />
  </Border>
</Border>

<!-- 反面包裝（初始隱藏） -->
<Border x:Name="backWrapper" Visibility="Hidden" Opacity="0">
  <Border x:Name="backHost" Background="Transparent">
    <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource backTemplate}" />
  </Border>
</Border>

翻轉動畫邏輯（Storyboard）

正面→反面觸發流程（MouseDown 事件）：

1. Viewport3D 顯示（0:00）
2. 正面淡出（0:00-0:05），Viewport3D 淡入
3. 正面隱藏（0:05），反面顯示（0:10）
4. 相機後移 + 模型旋轉 180°（0:05-0:55）
5. 反面淡入（1:05-1:10），Viewport3D 隱藏（1:10）

反面→正面為鏡像流程（旋轉 180°→360°）。關鍵動畫元素：

• ObjectAnimationUsingKeyFrames：控制 Visibility 切換
• DoubleAnimation：控制 Opacity 淡入淡出
• Point3DAnimation：相機 Position 動畫（0,0,0.5 ↔ 0,0,1.1）
• DoubleAnimation：旋轉 Angle 動畫（0↔180 或 180↔360）

完整 XAML 代碼

可直接貼入 XamlPad 預覽：

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:s="clr-namespace:System;assembly=mscorlib"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <x:Array Type="{x:Type s:String}" x:Key="src">...</x:Array>
    <DataTemplate x:Key="frontTemplate">...</DataTemplate>
    <DataTemplate x:Key="backTemplate">...</DataTemplate>
    <DataTemplate x:Key="flipItemTemplate">
      <Grid Width="200" Height="200">
        <Viewport3D ...>...</Viewport3D>
        <Border x:Name="frontWrapper">...</Border>
        <Border x:Name="backWrapper" ...>...</Border>
      </Grid>
    </DataTemplate>
  </Page.Resources>
  <ScrollViewer>
    <ItemsControl ItemsSource="{StaticResource src}" ItemTemplate="{StaticResource flipItemTemplate}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ItemsControl>
  </ScrollViewer>
</Page>

技術要點總結

• VisualBrush 將 2D UI 映射至 3D 模型表面
• 雙層 Border 分離 VisualBrush 來源與動畫目標
• ScaleTransform ScaleX="-1" 修正反面鏡像問題
• 相機後移確保旋轉過程模型完整在視野內
• 加速/減速比例 (AccelerationRatio/DecelerationRatio) 讓動畫更自然

更多技術細節參考：WPF Flippable 3D List 深度解析