UWP inner shadow with LinearGradientBrush

Question

is there any way to make such an effect with LinearGradientBrush?

I also checked this question: C# UWP Toolkit DropShadowPanel inner shadow

In answer, they were using DropShadowPanel with Rectangle, that has StrokeThickness="10". But this creates grey color border. I'm wondering is there any way to achieve it either with LinearGradientBrush or without StrokeThickness set to 10?

I would like to keep the original size of the grid and do not cut it somehow.

Answer 1

If you don't want a border, you can truncate the border by adjusting Grid.Clip

<Grid Width="400"
      Height="200"
      Margin="24">
    <Grid.Clip>
        <RectangleGeometry Rect="20,20,360,160" />
    </Grid.Clip>
    <Rectangle x:Name="BackgroundColor"
       Fill="LightSteelBlue" />
    <controls:DropShadowPanel x:Name="InnerShadow"
                      HorizontalContentAlignment="Stretch"
                      BlurRadius="40"
                      ShadowOpacity="1"
                      Color="Black">
        <Rectangle x:Name="BorderColor"
           Stroke="LightGray"
           StrokeThickness="20" />
    </controls:DropShadowPanel>
</Grid>

In the code I adjusted the DropShadowPanel parameters to make the shadows more visible.

But LinearGradientBrush may not be able to do this, because it is a linear gradient. For example, you can generate a gradient color from left to right from blue to black, but you cannot fade from the around to the center. If you have this need, you can try RadialGradientBrush in WindowsCommunityToolkit.

Best regards.

Answer 2

You can use the DropShadowPanel as in the other answer and change the inner rectangle stroke to be white (or whatever your page background is).

<Grid Width="400" Height="200">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,400,200" />
    </Grid.Clip>
    <Rectangle Fill="Yellow" />
    <TextBlock Text="Some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <controls:DropShadowPanel HorizontalContentAlignment="Stretch"
                              BlurRadius="50"
                              ShadowOpacity="1"
                              Color="Black">
        <Rectangle Stroke="White"
                   StrokeThickness="10" />
    </controls:DropShadowPanel>
</Grid>

This creates the following: