How to clip cell shape in collectionview?

Question

My cell is template -

<ContentView
    <Frame
        CornerRadius="17"
        IsClippedToBounds="True"
        Padding="0,0,0,0">
        <Grid>
    </Frame>
<ContentView>

And also have negative margin to overlap previous cell. But i can't clip it to bounds (see screenshot)

Area outside round corners have collectionview background.

I tried use isClippedToBouds on Frame, but it didn't work.

iOS android

Answer 1

You can use the Border instead of the Frame. The Frame class existed in Xamarin.Forms and is present in .NET MAUI for users who are migrating their apps from Xamarin.Forms to .NET MAUI. If you're building a new .NET MAUI app it's recommended to use Border instead.

Here is the code sample you can refer to:

 <StackLayout>
     <CollectionView x:Name="collectionview">
         <CollectionView.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <Border StrokeShape="RoundRectangle  17,17,17,17" Padding="0,0,0,0" >
                         <StackLayout >
                             <Label HorizontalOptions="Center" HeightRequest="20"  Text="{Binding Name}"></Label>
                             <Label HorizontalOptions="Center" Text="{Binding Location}"></Label>
                         </StackLayout>
                     </Border>
                 </Grid>
             </DataTemplate>
         </CollectionView.ItemTemplate>
     </CollectionView>
 </StackLayout>