yanjinhua

V1

2022/08/11阅读:27主题:蓝莹

WPF 实现内阴影

前言

本文经原作者授权以原创方式二次分享,欢迎转载、分享。

原文作者:dino.c

原文链接:https://www.cnblogs.com/dino623/p/inner-shadows-in-wpf.html

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


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

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

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

3)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 事件中重新计算裁剪区域;

4)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 要写多一些。

5)更粗的内阴影

  • 上面这些 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;
}

源码

分类:

后端

标签:

C#

作者介绍

yanjinhua
V1