C#UWP Toolkit 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>

结果

关于剪辑

需要注意的一点是,Rect无论何时Grid更改大小,您都需要手动更新大小.或者,您可以使用新的Composition API进行剪辑 -

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