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

[WPF] 实现 WPF 的 Inner Shadow

在 WPF 中,我们通常用 DropShadow 做阴影效果,但都是做外阴影。内阴影(Inner Shadow)的话其实也不是不可以,就是有些曲折。这篇文章介绍几种做内引用的做法。

文章涉及到以下概念:

UIElement.ClipToBounds 属性 (System.Windows)

UIElement.Clip 属性 (System.Windows)

UIElement.OpacityMask 属性

VisualBrush 类 (System.Windows.Media)

1. ClipToBounds

<Border>     <Border.Clip>         <RectangleGeometry Rect="0,0,100,100" />     </Border.Clip>     <Border.Effect>         <DropShadowEffect BlurRadius="8" ShadowDepth="0" />     </Border.Effect>     <ContentControl HorizontalAlignment="Center"                     VerticalAlignment="Center"                     Content="Clip " /> </Border> 

[WPF] 实现 WPF 的 Inner Shadow

上面是一个普通的加上 DropShadowEffect 的 Border。要做内部阴影的话就只是将外部阴影裁剪掉,在 Border 上简单地加上 ClipToBounds="True" 就可以实现这个效果:

[WPF] 实现 WPF 的 Inner Shadow

ClipToBounds 属性用于指示是否剪切此元素的内容(或来自此元素的子元素的内容)使其适合包含元素的大小。

但如果 Border 有圆角(最近微软向圆角势力屈服了,Windows 11 到处都是圆角)的话,那这个方案就有问题了,因为它不能裁剪圆角:

[WPF] 实现 WPF 的 Inner Shadow

2. Clip

为了可以裁剪圆角内容,还是老老实实用 Clip 来裁剪,不过这就需要自己计算尺寸及圆角半径:

<Border>     <Border.Clip>         <RectangleGeometry RadiusX="8"                            RadiusY="8"                            Rect="0,0,100,100" />     </Border.Clip>     <Border.Effect>         <DropShadowEffect BlurRadius="8" ShadowDepth="0" />     </Border.Effect>     <ContentControl HorizontalAlignment="Center"                     VerticalAlignment="Center"                     Content="Clip " /> </Border> 

这个方案的坏处很明显,因为要写死尺寸,真的要用这方案的话最好封装一下在 SizeChanged 事件中重新计算裁剪区域。

3. OpacityMask

<Grid Width="100"       Height="100"       Margin="10">     <Rectangle x:Name="Rectangle2"                Fill="White"                RadiusX="8"                RadiusY="8" />     <Border Margin="0">         <Border.Effect>             <DropShadowEffect BlurRadius="8" ShadowDepth="0" />         </Border.Effect>         <ContentControl HorizontalAlignment="Center"                         VerticalAlignment="Center"                         Content="OpacityMask" />     </Border>     <Grid.OpacityMask>         <VisualBrush Stretch="None" Visual="{Binding ElementName=Rectangle2}" />     </Grid.OpacityMask> </Grid> 

这个方案用另一个元素的 VisualBrush 来做 OpacityMask,胜在够灵活,就是 XAML 要写多一些。

4. 更粗的内阴影

上面这些 Border 都应用了这个样式:

<Style TargetType="Border">     <Setter Property="Width" Value="100" />     <Setter Property="Height" Value="100" />     <Setter Property="Margin" Value="10" />     <Setter Property="BorderBrush" Value="SkyBlue" />     <Setter Property="BorderThickness" Value="1" /> </Style> 

理所当然的,它们制造出来的阴影都是以这个 1 像素的边框为基础,如果需要更大更粗的内阴影,可以使用一个负数的 Margin 配合同样粗细的 BorderThickness 实现。以 OpacityMask 的方案为例,用下面的代码可以做个又粗又大的内阴影:

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) {     ShadowElement.Margin = new Thickness(-e.NewValue);     ShadowElement.BorderThickness = new Thickness(e.NewValue);     (ShadowElement.Effect as DropShadowEffect).BlurRadius = e.NewValue * 2; } 

[WPF] 实现 WPF 的 Inner Shadow

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

赞(0) 打赏
未经允许不得转载:张拓的天空 » [WPF] 实现 WPF 的 Inner Shadow
分享到: 更多 (0)

评论 抢沙发

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

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

联系我们本站主机

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

支付宝扫一扫打赏

微信扫一扫打赏