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，这样你就可以创建一个填充更少Rectangle并将其放置一个DropShadowPanel里面创建只有Rectangle的边界扩展阴影。然后，您只需将它放在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> 

结果

---

关于裁剪

有一点要注意的是，你将需要手册册y每当Grid的大小发生变化时，更新Rect的大小。或者，您可以使用新的合成API来剪辑 -

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