C# UWP 工具包 DropShadowPanel 内阴影 [英] C# UWP Toolkit DropShadowPanel inner shadow

问题描述

在C#UWP中如何制作内阴影效果?

In C# UWP how to make inner shadow effect?

像这样:

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

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，所以你可以创建一个 fill-less Rectangle 并将其放置在 DropShadowPanel 中，为 Rectangle 的 border 创建一个散布阴影只要.然后，您只需将其放置在 Grid 内并剪裁 Grid 以切断外部阴影.如果您需要背景颜色，只需将另一个 Rectangle 添加到 Grid 并将其放在 DropShadowPanel 后面.

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.

示例代码

<Grid Width="400"
      Height="200"
      Margin="24">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,400,200" />
    </Grid.Clip>
    <Rectangle x:Name="BackgroundColor"
               Fill="LightSteelBlue" />
    <controls:DropShadowPanel x:Name="InnerShadow"
                              HorizontalContentAlignment="Stretch"
                              BlurRadius="15"
                              ShadowOpacity="0.5"
                              Color="Black">
        <Rectangle x:Name="BorderColor"
                   Stroke="LightGray"
                   StrokeThickness="10" />
    </controls:DropShadowPanel>
</Grid>

结果

关于剪辑

需要注意的一点是，每当 Grid 的大小发生变化时，您都需要手动更新 Rect 的大小.或者，您可以使用新的 Composition API 进行剪辑 -

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();

这篇关于C# UWP 工具包 DropShadowPanel 内阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！