C＃UWP工具包DropShadowPanel内部阴影(C# UWP Toolkit DropShadowPanel inner shadow)

在C＃UWP中如何制作内在的阴影效果？

喜欢这个：

我创建了一个只有边框的网格，但阴影填充了整个网格。

<controls:DropShadowPanel BlurRadius="5" ShadowOpacity="0.5" OffsetX="0" OffsetY="0" Color="Black"> <Grid BorderBrush="White" BorderThickness="5"/> </controls:DropShadowPanel>

如何使用此控件制作内部阴影效果？

In C# UWP how to make inner shadow effect?

Like this:

I have created one grid with just a border, but shadow is populating the whole grid.

<controls:DropShadowPanel BlurRadius="5" ShadowOpacity="0.5" OffsetX="0" OffsetY="0" Color="Black"> <Grid BorderBrush="White" BorderThickness="5"/> </controls:DropShadowPanel>

How to make inner shadow effect with this control?

最满意答案

请注意， DropShadowPanel可以遮罩Rectangle ，因此您可以创建一个无填充的 Rectangle并将其放置在DropShadowPanel ，以便为Rectangle的边框创建一个扩散阴影。然后，您只需将其放置在Grid并剪切Grid即可切断外部阴影。如果你想要一个背景颜色，只需在Grid添加另一个Rectangle并将其放在DropShadowPanel后面即可。

示例代码

结果在这里输入图像描述

关于剪辑

需要注意的一点是，只要Grid的大小发生变化，您就需要手动更新Rect的大小。或者，您可以使用新的合成API来剪辑 -

var visual = ElementCompositionPreview.GetElementVisual(RootGrid); var compositor = visual.Compositor; visual.Clip = compositor.CreateInsetClip();

Note that DropShadowPanel can mask a Rectangle, so you can create a fill-less Rectangle and place it inside a DropShadowPanel to create a spreading shadow for the Rectangle's border only. Then, you just place it inside a Grid and clip the Grid to cut off the outer shadow. If you want a background color, simply add another Rectangle to the Grid and place it behind the DropShadowPanel.

Sample Code

Result enter image description here

About Clipping

One thing to note is that you will need to manually update the size of the Rect whenever the size of your Grid changes. Alternatively, you can use the new Composition API to do the clipping -

var visual = ElementCompositionPreview.GetElementVisual(RootGrid); var compositor = visual.Compositor; visual.Clip = compositor.CreateInsetClip();

更多推荐