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.

Richard Zhang · Answer 1 · 2020-01-16T11:38:21.463

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.

Imgur

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.

Yeah, you are right, that I can cut off. But what if I just don't want any borders? I mean in your example there is no grey part, but there is a transparent part now(and I can see image under Grid). Is there any way to keep the original size of the parent Grid? — Anna Melashkina, Jan 16 '20 at 11:47
The screenshot does not indicate a transparent border, but just to make the shadows more visible. In fact, after capturing through `Grid.Clip`, it will only show the size of 340x140. You can choose to create a `UserControl`, then expose the `Width` and `Height` properties, and filter out this part of the border width by calculation internally. — Richard Zhang, Jan 16 '20 at 12:03

score 0 · Answer 2 · answered Mar 26 '20 at 15:02

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:

UWP inner shadow with LinearGradientBrush

2 Answers2