Adding a shadow to border in .net MAUI 8

Question

I am trying to create cards with a shadow as shown in this Mock up in .net maui 8.0

I am using a Border as the parent with a grid inside for the card's layout. However, when I add a shadow to the Border, the shadow only gets added on all elements inside the grid. Like in this image of resulting view. The official documentation asks us to use Border instead of Frame and use Shadow instead of HasShadow but doesn't provide any examples.

Here is the code I'm using:

<Grid ColumnDefinitions="5*, 2*"
        Margin="10, 10, 10, 5" >

<Label Text="Your Chores"
            FontSize="Large"
            FontAttributes="Bold" />

<!--Add Button-->

<Border BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource DarkBackground}}" 
        Stroke="{StaticResource ButtonColor}"
        StrokeShape="RoundRectangle 4"
        Grid.Column="1" >
  <Border.Shadow>
  <Shadow Offset="20,20"
         Radius="40"
         Opacity="0.8" />
  </Border.Shadow>

    <Grid 
        Padding="10, 8, 4, 8"
        ColumnDefinitions="20, *"
        BackgroundColor="Transparent" >

        <Grid HeightRequest="20">
            <Ellipse Fill="{StaticResource ButtonColor}" />
            <Label Text="+"
                        FontAttributes="Bold"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center"
                        TextColor="{StaticResource White}" />
        </Grid>

        <Label Text="Add"
                    Grid.Column="1"
                    VerticalTextAlignment="Center"
                    HorizontalTextAlignment="Center"
                    TextColor="{StaticResource ButtonColor}" />



    </Grid>

</Border>

The project is only being run on android.

Is there a property to be assigned to ask the shadow to be avoided on child UI elements?

How do I get the border to have the shadow?

Answer 1

You can try to set property BackgroundColor for the Border(not Transparent).

Note that setting this BackgroundColor also sets the color of the stroke, thus making it invisible. In other words, if you need a shadow and border outline, setting the BackgroundColor will hide the outline. If a border outline is needed, this color needs to be manually set using something like Stroke="Black".

<Border StrokeShape="RoundRectangle 6"   
        BackgroundColor="Pink">

    <Border.Shadow>
        <Shadow Brush="Gray"
                    Offset="20,20"
                    Radius="40"
                    Opacity="0.8"/>
    </Border.Shadow>

    <Grid>

    </Grid>

</Border>

Note:

I found if we don't set the BackgroundColor for the Border, the BackgroundColor of Border will be black. And if we set the BackgroundColor="Transparent" for the Border, the inner children will have shadows just as you mentioned, for this problem, you can create a new issue here: bug-report.

And there is a known issue about this, you can check it here: Shadow not displaying properly in Border .