Xamarin Child Frame Overflow On Parent Corner Radius

Question

I have a Xamarin Forms project with a card based interface where each card has a Corner Radius of 1 and padding 0. Within the card, the top element is a Heading control, with margin of 0, consisting of a frame with a background colour and a label within that.

The problem is since the Heading control does not have rounded corners, the corners which meet the corners of the Card will overrun and render outside of the Card which doesn't look right.

Is there any way to tell the Xamarin XAML renderer to appropriately cut off the corners of a child when the parent has rounded corners?

Here's a picture to show what I mean. The green pointed corners are rendered outside of the parent card.

Benl Benl · Accepted Answer · 2018-06-21T16:14:39

To get the same result with Xamarin.Forms version 3.1.583944 for the background and rounded corners on Android, iOS, and UWP, try this XAML:

<OnPlatform x:TypeArguments="View">
  <On Platform="UWP">
    <Frame CornerRadius="20" OutlineColor="Black" Padding="0" Margin="12,0" HeightRequest="40">
      <StackLayout BackgroundColor="Green">
        <Label Text="BackgroundColor in StackLayout" Margin="20,0" />
      </StackLayout>
    </Frame>
  </On>
  <On Platform="Android, iOS">
    <Frame CornerRadius="20" OutlineColor="Black" BackgroundColor="Green" Padding="0" Margin="12,0" HeightRequest="40">
      <StackLayout>
        <Label Text="BackgroundColor in Frame" Margin="20,0" />
      </StackLayout>
    </Frame>
  </On>
</OnPlatform>

It seems that neither platform seems to produce the same result, possibly by native platform design (i.e. Android produce background inside the rounded corners in both cases above, iOS produce background inside rounded corners when BackgroundColor is set in Frame, UWP produce background inside rounded corners when BackgroundColor is set in StackLayout).

Please note that there are reported some issues with UWP on Frame CornerRadius.

Xamarin Child Frame Overflow On Parent Corner Radius

1 Answers