WPF 進階案例（五）：Viewport3D 實現控制項界面鏡面倒影效果

本案例展示如何在 WPF 中對 5 個 2D 控制項（Border 包含 Image）應用垂直鏡面倒影、邊緣模糊與 3D 模型變換，打造類似 Cover Flow 的視覺效果。

原始碼下載：DropShadow.rar

核心技術要點

1. Viewport2DVisual3D：在 3D 場景中承載互動式 2D 視覺元素（Border + Image）；
2. RotateTransform3D：將各面板沿 Y 軸旋轉 ±45°，形成扇形排列；
3. LinearGradientBrush OpacityMask：為左右兩側面板添加漸變透明遮罩，使其融入背景；
4. VisualBrush + ScaleTransform3D：以 VisualBrush 反射原視覺樹，ScaleTransform3D 的 ScaleY="-1" 實現垂直翻轉 180°；
5. Model3DGroup 統一管理倒影：單一 ModelVisual3D 內包含 Model3DGroup，打包 5 個 GeometryModel3D 作為倒影面，效能優於多個 Viewport2DVisual3D。

XAML 實作精要

主場景：5 個傾斜面板

<Viewport3D x:Name="viewPort3D" ...>
  <Viewport3D.Camera>
    <PerspectiveCamera Position="-0.3,-0.5,9" />
  </Viewport3D.Camera>
  <ModelVisual3D><AmbientLight Color="White"/></ModelVisual3D>
  
  <!-- 面板 0：左傾 -45° -->
  <Viewport2DVisual3D x:Name="viewport2DVisual3D0" Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
    <Viewport2DVisual3D.Transform>
      <Transform3DGroup>
        <RotateTransform3D><AxisAngleRotation3D Axis="0,1,0" Angle="-45"/></RotateTransform3D>
        <TranslateTransform3D OffsetX="-2.12" />
      </Transform3DGroup>
    </Viewport2DVisual3D.Transform>
    <Viewport2DVisual3D.Visual>
      <Border Style="{StaticResource border}"><Image Source="Images\050817goodfeng14.jpg" /></Border>
    </Viewport2DVisual3D.Visual>
  </Viewport2DVisual3D>
  
  <!-- 面板 1：右傾 +45° -->
  <Viewport2DVisual3D x:Name="viewport2DVisual3D1" ...> ... </Viewport2DVisual3D>
  <!-- 面板 2：左傾 -45° -->
  <Viewport2DVisual3D x:Name="viewport2DVisual3D2" ...> ... </Viewport2DVisual3D>
  <!-- 面板 3：右傾 +45° + OpacityMask -->
  <Viewport2DVisual3D x:Name="viewport2DVisual3D3" ...>
    <Image ...>
      <Image.OpacityMask>
        <LinearGradientBrush EndPoint="0.012,0.5" StartPoint="0.994,0.5">
          <GradientStop Color="#00000000" Offset="0"/>
          <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
      </Image.OpacityMask>
    </Image>
  </Viewport2DVisual3D>
  <!-- 面板 4：右傾 +45° + 反向 OpacityMask -->
  <Viewport2DVisual3D x:Name="viewport2DVisual3D4" ...> ... </Viewport2DVisual3D>
</Viewport3D>

倒影層：單一 ModelVisual3D 管理 5 個 GeometryModel3D

<Viewport3D x:Name="reflectionViewPort3D" Opacity="0.8" ...>
  <Viewport3D.OpacityMask>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#00000000" Offset="0.55"/>
      <GradientStop Color="#FFFFFFFF" Offset="0.01"/>
    </LinearGradientBrush>
  </Viewport3D.OpacityMask>
  <ModelVisual3D><AmbientLight Color="White"/></ModelVisual3D>
  <ModelVisual3D>
    <ModelVisual3D.Content>
      <Model3DGroup x:Name="reflctionRoom">
        <GeometryModel3D x:Name="reflctionChild0" Geometry="{StaticResource geometry1}">
          <GeometryModel3D.Material>
            <DiffuseMaterial>
              <DiffuseMaterial.Brush>
                <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D0, Path=Visual}"/>
              </DiffuseMaterial.Brush>
            </DiffuseMaterial>
          </GeometryModel3D.Material>
          <GeometryModel3D.Transform>
            <Transform3DGroup>
              <RotateTransform3D><AxisAngleRotation3D Axis="0,1,0" Angle="-45"/></RotateTransform3D>
              <TranslateTransform3D OffsetX="-2.12" OffsetY="2" />
              <ScaleTransform3D ScaleY="-1"/> <!-- 關鍵：垂直翻轉 -->
            </Transform3DGroup>
          </GeometryModel3D.Transform>
        </GeometryModel3D>
        <!-- 其餘 4 個 GeometryModel3D 結構相同，綁定對應面板 Visual -->
      </Model3DGroup>
    </ModelVisual3D.Content>
  </ModelVisual3D>
</Viewport3D>

效能優化建議

本範例使用 6 個 Viewport2DVisual3D 承載 2D 控制項。若面板內容較複雜，建議改用 ModelVisual3D + GeometryModel3D + DiffuseMaterial (ImageBrush) 方案：將圖片直接作為材質貼圖，僅需一個 ModelVisual3D 即可承載所有面板，大幅降低視覺樹複雜度，提升渲染效能。