xamarin forms - image wrapped in frame(with property cornerRadius set) not showing round corners

242 Views Asked by At

I am trying to create layout similar to Android cardview.

My progress for now.

image1

As you can see It looks guide well. However when I change Image property Aspect="Fill" to Aspect="AspectFill" images would lost round corners.

image2

My code

<Frame 
        VerticalOptions="Start"
        Margin="8" 
        CornerRadius="10"  
        Padding="0"
        BackgroundColor="White"
        IsClippedToBounds="False">
        <StackLayout Spacing="0">
            <Image 
                HeightRequest="150"                         
                Source="{Binding ImageUrl}" 
                Aspect="AspectFill"
                />
            <StackLayout
                Spacing="1"
                Margin="8"
                >
                <Label
                    FontFamily="{StaticResource MontserratMedium}"
                    TextColor="Black"
                    Text="{Binding Title}">
                </Label>

                <StackLayout
                    Orientation="Horizontal"                     
                    >
                    <Label
                        FontFamily="{StaticResource MontserratMedium}"
                        FontSize="13"
                        TextColor="{StaticResource TextColorDate}"
                        Text="Price">
                    </Label>
                    <Label
                        FontFamily="{StaticResource MontserratBold}"
                        FontSize="13"
                        HorizontalOptions="EndAndExpand"
                        TextColor="{StaticResource TextColorCash}"
                        Text="{Binding Price,StringFormat='{0}K'}">
                    </Label>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </Frame>

Is there solution to have Image with property Aspect="AspectFill" and with rounded corners?

0

There are 0 best solutions below