設為首頁 加入收藏
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置： 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> 關於.NET

Windows 8 Store Apps 開發實戰（14）：控件 UI 變換與投影 — RenderTransform、Projection、Clip 與 UseLayoutRounding

     編輯：關於.NET

前言

現代 App 介面離不開流暢的動畫與立體視覺效果。WinRT/XAML 提供了強大的 2D 變換、3D 平面投影、裁剪 與 像素對齊 機制，且均在 GPU 合成層執行，效能極佳。本文將逐一解析 RenderTransform、Projection、Clip、UseLayoutRounding 的核心用法與實戰技巧。

一、RenderTransform — 2D 幾何變換的萬花筒

UIElement.RenderTransform 接受任意 Transform 衍生類別，作用於繪製階段，不影響佈局佔用空間。常用變換類別：

類別功能關鍵屬性
RotateTransform順時針旋轉Angle、CenterX、CenterY
TranslateTransform平移位移X、Y
ScaleTransform縮放ScaleX、ScaleY、CenterX、CenterY
SkewTransform扭曲/傾斜（模擬 3D 深度）AngleX、AngleY、CenterX、CenterY
TransformGroup多重變換組合（依順序套用）Children 集合
CompositeTransform單一物件整合所有 2D 變換（效能最佳）Rotation、ScaleX/Y、SkewX/Y、TranslateX/Y、CenterX/Y
MatrixTransform3×3 仿射矩陣，完全自訂Matrix="m11,m12,m21,m22,offsetX,offsetY"

渲染原點：RenderTransformOrigin

以元素自身寬高為單位（0~1）指定變換中心點，預設 (0,0) 為左上角，(0.5,0.5) 為中心。配合 RotateTransform 等無需手動計算 CenterX/Y。

完整範例：六種變換並列展示

<Grid Margin="120 0 0 0">
    <!-- 1. RotateTransform 指定中心點 -->
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="15" CenterX="100" CenterY="50"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 2. RenderTransformOrigin + RotateTransform -->
    <Grid Margin="400 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3"
                   RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="15"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 3. TranslateTransform 平移 -->
    <Grid Margin="800 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <TranslateTransform X="100" Y="10"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 4. ScaleTransform 縮放 -->
    <Grid Margin="0 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="1.1" ScaleY="1.3" CenterX="100" CenterY="50"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 5. SkewTransform 扭曲 -->
    <Grid Margin="400 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="30" AngleY="5" CenterX="0" CenterY="0"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 6. TransformGroup 組合：先平移再旋轉 -->
    <Grid Margin="800 200 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="100" Y="10"/>
                    <RotateTransform Angle="15" CenterX="100" CenterY="50"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 7. CompositeTransform 一次搞定 -->
    <Grid Margin="0 400 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <CompositeTransform SkewX="30" Rotation="60" ScaleX="0.6" ScaleY="0.3"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

    <!-- 8. MatrixTransform 矩陣 -->
    <Grid Margin="400 400 0 0" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.RenderTransform>
                <MatrixTransform Matrix="1, 0.5, 0, 1, 30, 10"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Grid>

二、Projection — 讓 2D 元素擁有 3D 立體感

UIElement.Projection 支援兩種投影：

  • PlaneProjection：平面投影，最常用，模擬 3D 旋轉與位移
  • Matrix3DProjection：4×4 矩陣投影，完全自訂

PlaneProjection 核心屬性

分類屬性說明
旋轉RotationX繞 X 軸旋轉（垂直翻轉）
RotationY繞 Y 軸旋轉（水平翻轉）
RotationZ繞 Z 軸旋轉（平面旋轉，等同 RenderTransform 旋轉）
旋轉中心CenterOfRotationX相對位置 0~1，預設 0.5
CenterOfRotationY相對位置 0~1，預設 0.5
CenterOfRotationZ相對位置，預設 0
全域位移GlobalOffsetX/Y/Z相對螢幕座標系位移
局部位移LocalOffsetX/Y/Z相對元素自身旋轉後的座標系位移

互動範例：Slider 即時控制投影參數

<Grid Margin="120 0 0 0">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Width="200" Height="100" Stroke="Blue" StrokeThickness="3" StrokeDashArray="3,1"/>
        <Rectangle Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3" Opacity="0.3">
            <Rectangle.Projection>
                <PlaneProjection x:Name="planeProjection"/>
            </Rectangle.Projection>
        </Rectangle>
    </Grid>

    <StackPanel>
        <TextBlock Text="RotationX:" Margin="0 10 0 0"/>
        <Slider Width="150" Minimum="0" Maximum="360"
                Value="{Binding ElementName=planeProjection, Path=RotationX, Mode=TwoWay}"/>

        <TextBlock Text="RotationY:" Margin="0 -10 0 0"/>
        <Slider Width="150" Minimum="0" Maximum="360"
                Value="{Binding ElementName=planeProjection, Path=RotationY, Mode=TwoWay}"/>

        <TextBlock Text="RotationZ:" Margin="0 -10 0 0"/>
        <Slider Width="150" Minimum="0" Maximum="360"
                Value="{Binding ElementName=planeProjection, Path=RotationZ, Mode=TwoWay}"/>

        <TextBlock Text="LocalOffsetX:" Margin="0 -10 0 0"/>
        <Slider Width="150" Minimum="-150" Maximum="150"
                Value="{Binding ElementName=planeProjection, Path=LocalOffsetX, Mode=TwoWay}"/>
        <!-- 其餘 LocalOffsetY/Z、GlobalOffsetX/Y/Z 同理 -->
    </StackPanel>
</Grid>

💡 實務技巧：LocalOffsetZ 可產生「元素浮出/陷入螢幕」的視覺層次感；配合 RotationY 可實現翻書、輪播等 3D 效果。

三、Clip — 裁剪顯示區域

UIElement.Clip 僅接受 RectangleGeometry（WinRT 限制），定義可見矩形區域，超出部分不繪製、不命中測試。

範例：綠色矩形僅顯示 (10,10,50,50) 區域

<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
    <Rectangle Width="200" Height="100" Fill="Red"/>
    <Rectangle Width="200" Height="100" Fill="Green">
        <Rectangle.Clip>
            <RectangleGeometry Rect="10 10 50 50"/>  <!-- X Y Width Height -->
        </Rectangle.Clip>
    </Rectangle>
</Grid>

💡 進階用法：動畫改變 RectangleGeometry.Rect 可實現「刮刮樂」、「漸漸顯示」等特效。

四、UseLayoutRounding — 像素對齊，告別模糊邊緣

當元素的 Margin、Width/Height、RenderTransform 導致邊緣落在半像素時，預設 UseLayoutRounding="True" 會自動四捨五入到整像素，避免抗鋸齒模糊；設為 False 則保留亞像素精度（可能導致邊框虛實不一）。

對比範例

<StackPanel Margin="120 0 0 0">
    <!-- UseLayoutRounding=True：外邊距會四捨五入，左右/上下可能不等 -->
    <Grid Width="200" Height="200" HorizontalAlignment="Left" UseLayoutRounding="True">
        <Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1"/>
        <Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1" Margin="1.6"/>
    </Grid>

    <!-- UseLayoutRounding=False：保留 1.6 像素，邊距相等但可能模糊 -->
    <Grid Width="200" Height="200" Margin="0 10 0 0" HorizontalAlignment="Left" UseLayoutRounding="False">
        <Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1"/>
        <Border BorderBrush="#FF884909" Background="#FFFBECA3" BorderThickness="1" Margin="1.6"/>
    </Grid>
</StackPanel>

最佳實踐建議

  • 預設保持 True（系統預設），確保文字、邊框銳利
  • 需要亞像素精確動畫（如平滑縮放、位移）時，可在動畫期間暫時設為 False，結束後恢復 True
  • 高 DPI 裝置上效果更明顯

五、小結

本文涵蓋了控件視覺變換的完整工具箱：

  1. RenderTransform：8 種 2D 變換，CompositeTransform 效能最佳，RenderTransformOrigin 簡化中心點設定
  2. Projection：PlaneProjection 輕鬆實現 3D 旋轉/位移，LocalOffsetZ 創造景深
  3. Clip：RectangleGeometry 裁剪可見區域，可做動畫特效
  4. UseLayoutRounding：像素對齊開關，預設開啟保銳利，動畫時可暫關

善用這些 GPU 加速屬性，能以極低成本打造流暢、立體、專業的現代 App 介面。

原始碼下載：https://files.cnblogs.com/webabcd/Windows8.rar

  1. 上一篇文章：
  2. 下一篇文章：
關於.NET
Lucene 3.0.0 核心細節探秘（一）：Consumer 與 Processor 執行緒模型深度剖析 Lucene 3.0.0 核心細節探秘（一）：Consumer 與 Processor 執行緒模型深度剖析

前言 對 Lucene 3.0.0 的執行緒模型極感興趣。個
LINQ to XML 進階：查詢、更新、刪除與函數式建構實戰 LINQ to XML 進階：查詢、更新、刪除與函數式建構實戰

查詢：尋找具特定屬性的元素 XElement root =

Unity 1.x 容器初始化完全指南：註冊 API、生命周期、層級容器與配置驅動 Unity 1.x 容器初始化完全指南：註冊 API、生命周期、層級容器與配置驅動

初始化核心：類型註冊與生命周期綁定 Unity 容器啟動階段
角色型安全性程式設計入門：PrincipalPermission 驗證實作範例 角色型安全性程式設計入門：PrincipalPermission 驗證實作範例

.NET 角色型安全性允許根據目前執行緒的主體身分進行授權。
Java 與 C# 泛型深度對比：類型安全、效能與向後相容的取捨 [你必須知道的.NET]第十八回：物件建立始末（上） .NET 開發實戰避坑指南：六大核心陷阱與解決方案 Windows Ribbon 框架開發全攻略：從空白功能區到自適應佈局實戰 WCF 學習之旅（三十）：第三個範例完結篇 — 服務寄宿與客戶端調用實作 ASP.NET Aries 入門教學 (四)：查詢區下拉選單完整配置指南 WCF REST 服務修改預設序列化：支援 Dictionary 直接返回 JSON 字串
欄目導航
  • C#
  • ASP.NET 基礎
  • 關於.NET
  • .NET 實例教學
    • Copyright © 程式碼之家 All Rights Reserved