在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。