[WPF] 实现 WPF 的 Inner Shadow

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

文章涉及到以下概念：

UIElement.ClipToBounds 属性 (System.Windows)

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>

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

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

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

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;

}

5. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab