关于WPF:WPF-窗口裁剪投影效果

66次阅读

共计 2231 个字符，预计需要花费 6 分钟才能阅读完成。

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

成果如下图：

投影成果能够通过设置 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>

成果如下图：

投影成果增加到了窗口外部 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>

成果如下图：

如果不想填充色彩，也能够这样做：

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

成果如下图：

残缺代码见 GitHub。

正文完