[WPF] 实现 WPF 的 Inner Shadow

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

文章涉及到以下概念：

UIElement.ClipToBounds 属性 (System.Windows)

UIElement.Clip 属性 (System.Windows)

UIElement.OpacityMask 属性

VisualBrush 类 (System.Windows.Media)

1. ClipToBounds

代码语言：javascript复制

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

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

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

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

2. Clip

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

代码语言：javascript复制

<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

代码语言：javascript复制

<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 都应用了这个样式：

代码语言：javascript复制

<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 的方案为例，用下面的代码可以做个又粗又大的内阴影：

代码语言：javascript复制

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

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

windows wpf

0 人点赞