Xamarin.Forms Frame Gradient Background spills over its boundaries on Android

Question

I have made a custom Frame in Xamarin.Forms that allows for a 3 color linear gradient and some other stuff. However, I notice that when I set the gradient on a custom frame that is inside of a Grid it will draw over everything above it. See below:

Whereas, if I just set the background to a solid color like pink (i.e. not use the gradient feature), the frame does not spill over. See below:

here is the code for the custom renderer I am using for Android:

 protected override void DispatchDraw(Canvas canvas)
    {
        var gradient = new Android.Graphics.LinearGradient(
            0, 0, Width, Height,
            new int[] { _startColor.ToAndroid(), _middleColor.ToAndroid(), _endColor.ToAndroid() },
            null,
            Android.Graphics.Shader.TileMode.Mirror);
        var paint = new Android.Graphics.Paint()
        {
            Dither = true,
        };
        paint.SetShader(gradient);
        canvas.DrawPaint(paint);
        base.DispatchDraw(canvas);
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        if(e.NewElement != null && Control != null && e.NewElement is CustomFrame frame)
        {
            _startColor = frame.StartColor;
            _middleColor = frame.MiddleColor;
            _endColor = frame.EndColor;
        }
    }

Is it possible that where I am setting the Linear Gradient to 0,0 for x and y that that is not referring to the x and y of the control, rather the x and y of the entire screen?

Here is rough example of what the xaml is like if you need it:

    <Grid RowSpacing="0"
              ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="40*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="40*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid x:Name="header"
                  HorizontalOptions="Center"
                  VerticalOptions="CenterAndExpand"
                  Grid.Row="0"
                  Grid.ColumnSpan="4"
                  RowSpacing="0"
                  BackgroundColor="White">
                <CarouselView ItemsSource=""
                              CurrentItem=""
                              VerticalOptions="CenterAndExpand"
                              HorizontalOptions="Center"
                              PeekAreaInsets="30"
                              x:Name="dayCarousel">
                    <CarouselView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal"
                                           SnapPointsAlignment="Center"
                                           SnapPointsType="MandatorySingle"/>
                    </CarouselView.ItemsLayout>
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <ContentView>
                                <StackLayout VerticalOptions="CenterAndExpand"
                                             HorizontalOptions="Center"
                                             BackgroundColor="White">
                                    <StackLayout.Triggers>
                                        <DataTrigger TargetType="StackLayout"
                                                         Binding="{Binding IsSelected}"
                                                         Value="False">
                                            <Setter Property="Scale"
                                                        Value="0.85"/>
                                            <Setter Property="Opacity"
                                                        Value="0.60"/>
                                        </DataTrigger>
                                    </StackLayout.Triggers>
                                </StackLayout>
                            </ContentView>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </Grid>
            <cntrl:CustomFrame CornerRadius="20,20,0,0"
                               Grid.Row="1"
                               Grid.Column="2"
                               StartColor="{StaticResource GracePink}"
                               MiddleColor="{StaticResource GracePurple}"
                               EndColor="{StaticResource GraceDarkPurple}">
            </cntrl:CustomFrame>

            <cntrl:CustomFrame CornerRadius="40,40,0,0"
                               Grid.Row="2"
                               Grid.RowSpan="3"
                               Grid.ColumnSpan="4"
                               StartColor="{StaticResource GracePink}"
                               MiddleColor="{StaticResource GracePurple}"
                               EndColor="{StaticResource GraceDarkPurple}">
            </cntrl:CustomFrame>


            <cntrl:CustomFrame BackgroundColor="White"
                               CornerRadius="20,20,0,0"
                               Grid.Row="3"
                               Grid.Column="1">
            </cntrl:CustomFrame>
            <cntrl:CustomFrame BackgroundColor="White"
                               Grid.Row="4"
                               CornerRadius="40,40,0,0"
                               Grid.ColumnSpan="4">
            </cntrl:CustomFrame>
</Grid>

Any help would be much appreciated, thank you in advance!

Answer 1

In your Custom Frames, set IsClippedToBounds="True"

Quoting the Documentation:

Gets or sets a value which determines if the Layout should clip its children to its bounds.

<cntrl:CustomFrame CornerRadius="20,20,0,0"
                   Grid.Row="1"
                   Grid.Column="2"
                   IsClippedToBounds="True"
                   StartColor="{StaticResource GracePink}"
                   MiddleColor="{StaticResource GracePurple}"
                   EndColor="{StaticResource GraceDarkPurple}">
</cntrl:CustomFrame>

---

If the IsClipToBounds doesn't work, try doing this in the OnElementChanged

try
{
    if (e.NewElement != null && Control != null && e.NewElement is CustomFrame frame)
    {
        _startColor = frame.StartColor;
        _middleColor = frame.MiddleColor;
        _endColor = frame.EndColor;

        var orientation = GradientDrawable.Orientation.ToBottomRight;
        var gradient = new GradientDrawable(orientation, new[] { _startColor .ToAndroid().ToArgb(), _middleColor.ToAndroid().ToArgb(), _endColor .ToAndroid().ToArgb() });
        ViewCompat.SetBackground(this, gradient);
    }
}
catch (Exception ex)
{

}