'hide frame border behind another frame xamarin.forms

i am trying to do something like this: enter image description here

this is the code i wrote: MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
             x:Class="ALNahrainAlphaApp.MainPage"
            
             >
    <ScrollView Orientation="Vertical">
        <Grid >
            
            <gradient:SfGradientView>
                <gradient:SfGradientView.BackgroundBrush>
                    <gradient:SfLinearGradientBrush>
                        <gradient:SfLinearGradientBrush.GradientStops>
                            <gradient:SfGradientStop Color="White" Offset="0.0" />
                            <gradient:SfGradientStop Color="#89cff0" Offset="1.0" />
                        </gradient:SfLinearGradientBrush.GradientStops>
                    </gradient:SfLinearGradientBrush>
                </gradient:SfGradientView.BackgroundBrush>
            </gradient:SfGradientView>
            <StackLayout>
            <Label  Text="AL-Nahrain" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="audiofont" HorizontalOptions="End" Margin="0,50,50,-15" />
            <BoxView HorizontalOptions="FillAndExpand" Color="Black" HeightRequest="2" Margin="0,0,10,0"/>

            <Label Text="App" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="audiofont" HorizontalOptions="End" Margin="0,-12,15,0"/>

                <Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center"  Padding="-1"  BorderColor="Black"  Margin="20,0,20,-80">
                    <Image HeightRequest="150" WidthRequest="150" x:Name="alNahrainLogo"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                </Frame>
                <Frame BackgroundColor="Transparent" BorderColor="Black" CornerRadius="50" Margin="20,20" >
                    <StackLayout>
                <Frame Margin="0,40,0,0" BackgroundColor="Transparent">
                <StackLayout  >
                        <Label Text="Username" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="emailAnimate" />
                    <Entry Margin="20,-40,20,0" x:Name="email" />

                </StackLayout>

            </Frame>

            <Frame Margin="0,-10,0,0" BackgroundColor="Transparent">
                <StackLayout  >
                        <Label Text="Password" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="PassAnimate" />
                    <Entry Margin="20,-40,20,0" x:Name="password" IsPassword="True"/>
                    <ImageButton Source="hidePass.png" WidthRequest="25" HeightRequest="25" HorizontalOptions="End" BackgroundColor="Transparent" Margin="0,-40,20,0"  x:Name="show"/>

                </StackLayout>

            </Frame>

                <Button CornerRadius="20" Text="Login" FontSize="Medium" BackgroundColor="#3d3d3d" TextColor="White" Margin="50" FontFamily="audiofont" x:Name="login" />
                <Button CornerRadius="20" Text="Register" FontSize="Medium" BackgroundColor="#3d3d3d" TextColor="White" Margin="50,10" FontFamily="audiofont" x:Name="register" />
                <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center" Margin="30">
                    <Switch  HeightRequest="40" WidthRequest="50" OnColor="White" ThumbColor="Black" x:Name="rememberme" IsToggled="True"/>
                <Label Text="Remember Me" TextColor="Black" FontAttributes="Bold" Margin="10"/>
                    
            </StackLayout>
                    </StackLayout>
                </Frame>
            </StackLayout>
                
        </Grid>
    </ScrollView>
</ContentPage>

but i couldn't find a way to hide the border of the big frame behind the circular frame. this is what i obtained:

enter image description here i tried to use a grid but i got the same result. how can i hide the border when the circular frame is above it? thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source