致敬最美逆行者，英雄一路走好，好好學習，回報祖國 . . .
不出意外，這是《WPF核心知識》系列文章的倒數第三篇文章 . . .
通過對《深入淺出WPF》書籍的閱讀，我學到了許多的知識，在此感謝劉老師 . . .
我爲什麼把每篇博客稱爲 “飛天入地" 呢？ 一來是我真的很喜歡這門技術，二來我真的很喜歡這六技術 . . .
此篇博文主要講解圖形的效果與變形，比如爲：
- 圖形進行添加 —— 模糊、陰影效果
- 對圖形進行位移、旋轉等效果
WPF的出現可謂是我們的福音，因爲像模糊、陰影、位移、旋轉這樣的效果，我們只需要改變幾個屬性的值就行了，而不需要使用 Photoshop這樣的專業設計工具 . . .
下面我們來講一講文章提到的四種效果怎麼用吧 . . .
.
在UIElement類的成員中有兩個屬性： BitmapEffect 和 Effect這兩個屬性，這兩個屬性都可以爲UI元素添加效果，那爲什麼有兩個屬性呢？因爲早期的是 BitmapEffect，是用CPU的運算能力爲 UI元素添加效果，這樣會造成程序的性能降低，所以後來添加了 Effect這個屬性，它使用GPU的運算能力爲 UI元素添加效果 . . .
此文章只講述 Effect的簡單使用，BitmapEffect已經被淘汰了，但大家可以查閱文檔進行測試 . . .
.
圖形的效果
Effect 類有三個派生類，它們是：
- BlurEffect：模糊效果
- DropShadowEffect：投影效果
- ShaderEffect：着色器效果（抽象類）
我們可以對 ShaderEffect類進行開發，可以爲圖形添加各種濾鏡效果，此文不會講解 . . .
下面我們來使用前兩個派生類，來爲 UI元素添加效果吧 . . .
陰影效果：
<Button Width="160" Height="50" Content="Hello">
<Button.Effect>
<DropShadowEffect Direction="-45" Opacity="0.5" Color="Red"
ShadowDepth="10"/>
</Button.Effect>
</Button>我們設置了DropShadowEffect 效果的屬性是：
- Direction：陰影方向
- Opacity：不透明度
- ShadowDepth：陰影深度
效果如下圖所示：
.
模糊效果：
<Button Grid.Row="1" Width="160" Height="50" Content="Hello">
<Button.Effect>
<BlurEffect Radius="10" KernelType="Gaussian"/>
</Button.Effect>
</Button>我們設置了BlurEffect 效果的屬性是：
- Radius：模糊效果曲線的半徑
- KernelType：計算模糊的曲線的值
效果如下圖所示：
.
圖形的變形
控制變形的屬性有兩個，分別是：
- RenderTransform：呈現變形
- LayoutTransform：佈局變形
它們分別派生自 UIElement、FrameworkElement類，所以在控件級別兩個屬性你都能看到 . . .
它們的數據類型都是 Transform抽象類，我們可以用 Transform 類的派生類用於爲這兩個屬性。
ransform 抽象類的派生類有如下一些：
- MatrixTransform：矩陣變形
- RotateTransform：旋轉變形
- ScaleTransform：座標系變形
- SkewTransform：拉伸變形
- TranslateTransform：偏移變形
- TransformGroup：變形組（多個獨立變形放在一起）
.
呈現變形（RenderTransform）
質變本不變，不影響界面的佈局效果 . . .
下面讓我們實例來體驗一下這種變形方式吧 . . .
我們使用 RenderTransform來使 Button旋轉並移動到指定位置，注意觀察界面的佈局：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Height="80"
Content="Hello">
<Button.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="40" CenterY="40" Angle="45"/>
<TranslateTransform X="300" Y="200"/>
</TransformGroup>
</Button.RenderTransform>
</Button>這個XAML代碼，首先我們對界面進行了佈局，第一行第一列的大小爲默認大小，然後 Button按鈕被默認放在其中，之後我們對 Button進行旋轉 + 位移變形，效果如下：
我們在這個界面佈局中發現，第一行第一列還是 這個 Button的大小，這就是 RenderTransform，質變本不變，這種做可以提高程序的效率，因爲一但使界面佈局發生了變化，各種算法都會重新計算 . . .
.
佈局變形
因爲對佈局的變形會影響到程序的性能，所以我們一般只用在靜態變形中，而不用於製作動畫（下一篇博文會講） . . .
我們來實現一個文字縱向排列的淺藍色標題欄 . . .
方便我們更好的學習，我們使用 呈現變形，代碼如下：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="titleBar" Background="LightBlue">
<TextBlock Text="Hello Transformer!" FontSize="24"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>效果如下：
和上面的那個例子一樣，本身並沒有發生變化 . . .
.
因爲我們需要的是靜態改變 TextBlock的佈局，所以我們應該使用 LayoutTransform，我們只需要改變其中的一處就行：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="titleBar" Background="LightBlue">
<TextBlock Text="Hello Transformer!" FontSize="24"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>我們只是把 RenderTransform 改成了 LayoutTransform了而已，效果如下：
.