C# UWP Toolkit DropShadowPanel inner shadow

Question

In C# UWP how to make inner shadow effect?

Like this:

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?

Answer 1

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.

Sample Code

<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>

Result

---

About Clipping

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