在Windows視窗應用開發程序中，經常會設計一些非矩形視窗，并包含一些投影效果，本文介紹一種實作視窗投影+裁剪效果的方法，
本文裁剪效果參考劉鐵猛老師《深入淺出WPF》一書第十二章：繪圖和影片，裁剪米老鼠外形視窗，區別在于給視窗添加投影效果，
視窗裁剪
WPF中可以方便的設計各種不規則形狀的視窗或控制元件，使用Clip屬性即可，Clip屬性的資料型別是Geometry型別，可以使用路徑標記語法設定其值，如下示例所示，該示例將視窗輪廓裁剪為米老鼠樣式
注意：若要裁剪視窗，需將AllowsTransparency設定為True，WindowStyle設定為None，
<Window ...
Title="MickeyWindow" Height="250" Width="300" WindowStyle="None" AllowsTransparency="True"
ResizeMode="NoResize" Background="Gray">
<Window.Clip>
<PathGeometry Figures="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
</Window.Clip>
<Grid>
...
</Grid>
</Window>
效果如下圖：
視窗投影
投影效果可以通過設定BitmapEffect屬性或Effect屬性實作，建議使用Effect屬性，BitmapEffect已標記為Obsolete，它使用CPU計算，會影響程式性能，Effect使用GPU運算，減少了對CPU資源的浪費，
Effect為抽象類，通過派生可以實作各種效果，WPF官方僅提供了模糊效果（BlurEffect）與投影效果（DropShadowEffect），其它自定義效果可通過派生ShaderEffect實作，本文使用DropShadowEffect實作投影效果，
投影效果無法直接應用于Window，可以為Window的內部元素添加投影效果，并需要設定其Margin屬性，Window的AllowsTransparency需設定為True，
DropShadowEffect中有幾個關鍵屬性，Color屬性設定投影顏色，BlurRadius屬性設定模糊效果半徑，ShadowDepth屬性設定投影距元素的距離，Opacity屬性設定投影的不透明度，Direction屬性設定投影方向，
本文實作暈影效果，將ShadowDepth置為0即可，無需設定Direction，
<Window ...
Title="MickeyWindow" Height="250" Width="300" WindowStyle="None" AllowsTransparency="True"
ResizeMode="NoResize" Background="Transparent">
<Grid>
<Border Margin="15" BorderBrush="Gray" BorderThickness="2">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="0"/>
</Border.Effect>
</Border>
</Grid>
</Window>
效果如下圖：
合并裁剪與投影效果
投影效果添加到了視窗內部Border元素上，因此需要調整Clip屬性，直接將Clip也應用到Border上是不行的，需要將其應用到子元素上，
<Grid>
<Border Margin="15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="0"/>
</Border.Effect>
<Grid Background="lightgray">
<Grid.Clip>
<PathGeometry Figures="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
</Grid.Clip>
</Grid>
</Border>
</Grid>
效果如下圖：
如果不想填充顏色，也可以這樣做：
<Grid>
<Border Margin="15">
<Border.Effect>
<DropShadowEffect Color="Red" BlurRadius="15" ShadowDepth="0"/>
</Border.Effect>
<Grid>
<Grid.Clip>
<PathGeometry Figures="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
</Grid.Clip>
<Path Stroke="Black" StrokeThickness="5">
<Path.Data>
<PathGeometry Figures="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
</Path.Data>
</Path>
</Grid>
</Border>
</Grid>
效果如下圖：
完整代碼見GitHub，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/285425.html
標籤：WPF