Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Platform specific CornerRadius on <Frame> Xamarin.Forms

I'm trying to assign different CornerRadius on iOS and Android like following:

<Frame
    HasShadow="false"
    Padding="10"
    BackgroundColor="Red">
    <Frame.CornerRadius>
        <OnPlatform x:TypeArguments="x:Double">
            <On
                Platform="iOS">20</On>
            <On
                Platform="Android">30</On>
        </OnPlatform>
    </Frame.CornerRadius>
    <Label
        Text="Hello World" />
</Frame>

But getting a

Cannot assign property "CornerRadius": Property does not exists, or is not assignable, or mismatching type between value and property

I've tried x:TypeArguments="Thickness" and x:TypeArguments="x:Int32". Decompiling the Assembly it appears CornerRadius is of type float. However, there is no Float property in x namespace, I mean x:TypeArguments="x:Float" doesn't exists.

Any ideas what I'm doing wrong or this is a bug?

like image 809
envyM6 Avatar asked May 09 '18 10:05

envyM6


People also ask

What is frame in Xamarin forms?

The Xamarin.Forms Frame class is a layout used to wrap a view with a border that can be configured with color, shadow, and other options. Frames are commonly used to create borders around controls but can be used to create more complex UI.

What are platform-specifics in Xamarin?

Recently on the blog, Pierce introduced Platform-Specifics, which allow you to consume functionality that’s only available on a specific platform without having to implementing custom renderers or effects. With the use of a simple Fluent API, you can make platform-specific tweaks from shared code in Xamarin.Forms.

What is refreshview in Xamarin forms?

The Xamarin.Forms RefreshView is a container control that provides pull-to-refresh functionality for scrollable content (UI). Is this page helpful? Any additional feedback? Feedback will be sent to Microsoft: By pressing the submit button, your feedback will be used to improve Microsoft products and services.

Does this custom frame render the corners of the content?

With this custom frame, it renders the corners (out), but does not edit this "canvas", so the content won't have the round corners, but overlaps the frame (as if the corner radius was set to 0). I hope that explains my issue well enough.


1 Answers

The CornerRadius type is a Single:

<Frame HasShadow="true" OutlineColor="Red">
    <Frame.CornerRadius>
        <OnPlatform x:TypeArguments="x:Single">
            <On Platform="iOS" Value="20"/>
            <On Platform="Android" Value="30"/>
        </OnPlatform>
    </Frame.CornerRadius>
    <Frame.Content>
        <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
    </Frame.Content>
</Frame>
like image 146
SushiHangover Avatar answered Oct 03 '22 09:10

SushiHangover