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