CODEWITHSUNDEEP
xamlxamarinxamarin.formsxamarin.ios
Dan
Dan

Reputation: 1110

Frame corner radius not rounding corners on iOS

I am trying to round the corners of a stack layout, it works on android but on iOS, they still appear square but it does display the Frame shadow

My XAML is 

<ContentPage.Content>
    <StackLayout BackgroundColor="WHITE">
        <ListView>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10">
                                <StackLayout>
                                    . . .
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

Upvotes: 7

Views: 10212

Answers (3)

Arvis
Arvis

Reputation: 8363

Set IsClippedToBounds property to Frame control:

<Frame IsClippedToBounds="True" CornerRadius="10" Padding="0" Margin="10, 10, 10, 10">
    <StackLayout>
    </StackLayout>
</Frame>

Upvotes: 16

Marat Gallyamov
Marat Gallyamov

Reputation: 197

Actually I believe, it is a bug of Xamarin.Forms. UWP, Android and iOS should behave the same, but they don't. As a result to implement the same behaviour developers need to use OnPlatform feature.

The bug is described and discussed here, it is still open: https://github.com/xamarin/Xamarin.Forms/issues/2405

Upvotes: 1

ColeX
ColeX

Reputation: 14473

they still appear square

Actually, the Frame is round not the StackLayout, we just use Frame wrap it ,so it looks the StackLayout has round corners.

Frame

<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10" HasShadow="False" BackgroundColor="Red">
    <StackLayout >
         <Label Text="{Binding}"/>
    </StackLayout>
</Frame>

enter image description here

StackLayout

<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10" HasShadow="False" >
   <StackLayout BackgroundColor="Red">
         <Label Text="{Binding}"/>
   </StackLayout>
</Frame>

enter image description here

it does display the Frame shadow

You can disable it by HasShadow="False".

Upvotes: 4

Related Questions