C# UWP 工具包 DropShadowPanel 内部阴影

Question

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

像这样:

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

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

如何用这个控件制作内阴影效果？

Answer 1

请注意，DropShadowPanel 可以遮盖一个Rectangle，因此您可以创建一个fill-less Rectangle 并放置它位于 DropShadowPanel 中，仅为 Rectangle 的 border 创建扩散阴影。然后，您只需将它放在 Grid 中并剪裁 Grid 以切断外部阴影。如果您想要背景颜色，只需将另一个 Rectangle 添加到 Grid 并将其放在 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 进行裁剪 -

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