Xamarin UI Child layout placement

Question

I'm trying to add a Circle inside the rectangle box. The problem is that the Circle should be larger than the Box's height and the circle should contain a label inside. I have managed to Create a box with circle and box and the circle do have label within. But I am not able create a circle with radius greater than the box. But I want the circle appear bigger than rectangle bar.

<cards:SfCardView>
 <Grid x:Name="Grid">
   <Image Aspect="AspectFill"
          HeightRequest="150"
          Source="matchingTrialsBg.jpg" />
    <border:SfBorder BackgroundColor="{DynamicResource BorderBlue}"
                     BorderWidth="0"
                     HorizontalOptions="Start"
                     Opacity="0.9"
                     VerticalOptions="Center"
                     HeightRequest="80">
  <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="1">
                         <border:SfBorder CornerRadius="100" BackgroundColor="{StaticResource backgroundColor}" BorderColor="AliceBlue" VerticalOptions="CenterAndExpand" HeightRequest="100" WidthRequest="100" Padding="0" Margin="2">
                         <Label Text="10" FontSize="35" FontFamily="{StaticResource Montserrat-Regular}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
   </border:SfBorder>
      <Label Margin="0" FontFamily="{StaticResource Montserrat-SemiBold}"
             FontSize="25" LineBreakMode="TailTruncation"
             LineHeight="{OnPlatform Default=-1, Android=1}"
             MaxLines="2" Text="Count"
             TextColor="{DynamicResource Gray-White}"
             WidthRequest="135"
             VerticalTextAlignment="Center"/>
      <Label Text="View All ➜" FontSize="Micro" HorizontalOptions="End" TextColor="White" Padding="10" VerticalOptions="EndAndExpand"/>
   </StackLayout>
  </border:SfBorder>
 </Grid>

How can I position the circle in the rectangle?

Answer 1

This can be achieved using the below code snippet.

Code Snippet:

<cards:SfCardView >
    <Grid x:Name="Grid">
        <Image Aspect="AspectFill" HeightRequest="150" Source="image.jpg" />
        <border:SfBorder BackgroundColor="SkyBlue"
                 BorderWidth="0"
                 HorizontalOptions="Start"
                 Opacity="0.9"
                 VerticalOptions="Center"
                 HeightRequest="80">
            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="1">
                <Label Margin="110,0,0,0" 
         FontSize="25" LineBreakMode="TailTruncation"
         LineHeight="{OnPlatform Default=-1, Android=1}"
         MaxLines="2" Text="Count"
         TextColor="White"
         WidthRequest="135"
         VerticalTextAlignment="Center"/>
                <Label Text="View All ➜" FontSize="Micro" HorizontalOptions="End" TextColor="White" Padding="10" VerticalOptions="EndAndExpand"/>
            </StackLayout>
        </border:SfBorder>
        <border:SfBorder CornerRadius="100" BackgroundColor="LightBlue" 
                         BorderColor="AliceBlue" 
                         VerticalOptions="Center" HorizontalOptions="Start" 
                         HeightRequest="100" WidthRequest="100" Padding="0" Margin="2">
            <Label Text="10" FontSize="35"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
        </border:SfBorder>
    </Grid>
</cards:SfCardView>

Screenshot:

Hope it helps!