欢迎光临
我的个人博客网站

WPF — 窗口Clip+Effect效果

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

效果如下图:

WPF -- 窗口Clip+Effect效果

窗口投影

投影效果可以通过设置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> 

效果如下图:

WPF -- 窗口Clip+Effect效果

合并裁剪与投影效果

投影效果添加到了窗口内部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> 

效果如下图:

WPF -- 窗口Clip+Effect效果

如果不想填充颜色,也可以这样做:

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

效果如下图:

WPF -- 窗口Clip+Effect效果

完整代码见GitHub

赞(0) 打赏
未经允许不得转载:张拓的天空 » WPF — 窗口Clip+Effect效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏