Forum Xamarin.Forms

Setting the corner radius for Xamarin.forms controls

LakshmiLakshmi USUniversity ✭✭

how can I set the corner radius for xamarin.forms controls, for ioS setting the corner radius is just setting the property like wise is there any property to set for the xamarain.forms controls to have rounded corners.

Thanks in advance. Sample would be great.

Posts

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    There isn't a way out of the box, you will have to use a custom render for your control.

  • imkowJackimkowJack CNMember ✭✭

    bump, request +1, sometimes don't want round corner.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Not every control on every platform has a border: for example the Entry control on iOS has a rounded rectangle border, but on Android it has the platform-default underline... a 'corner radius' makes no sense on this control. Similarly on iOS the default buttons since iOS 7 have no border at all, while they button borders exist on both Android and Windows Phone. Xamarin.Forms aims to provide a complete cross-platform API, using the platform standards/defaults as needed... but one of the reasons custom renderers exist is for exactly this purpose: to customize the controls on one or more of the supported platforms.

  • AzucenaFAzucenaF MXMember ✭✭

    @imkow did you manage to disable the round corner?

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    @Lakshmi @imkow @AzucenaF This should work. Add this to your iOS project.

    //In the PCL
    public class NoRoundCornerButton : Button
    {
    
    }
    
    //In iOS Project
    [assembly: ExportRenderer(typeof(NoRoundCornerButton), typeof(NoRoundCornerButtonRenderer))]
    
    namespace Test.iOS
    {
        public class NoRoundCornerButtonRenderer : ButtonRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    Control.Layer.CornerRadius = (nfloat) 0.0;
                }
            }
        }
    }
    
  • AzucenaFAzucenaF MXMember ✭✭

    @RaphaelSchindler unfortunately this does not work for UITextField :neutral:

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    @AzucenaF Hmm that should actually work with every Control on iOS that has a RoundedCorner. Maybe try (nfloat)0.1

  • JohnHardmanJohnHardman GBUniversity mod

    @CraigDunn - is there any update on rounded corners on Frame views? Rounded corners appear on WinPhone 8.1, but if the Padding is set to (1,1,1,1) (which mine is), part of each corner is lost. It seems that if I set the Padding to (5,5,5,5) there is enough space for the entire rounded corner to be displayed, but (a) I don't want a rounded corner, and (b) the use of 5 is a magic number that seems to work, rather than being documented to work (is it guaranteed that the rounded corner will always be drawn correctly with padding of 5,5,5,5 ?)

    Many thanks,

    John H.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Nothing that I'm aware of - definitely raise a bug if there is incorrect behavior (like the clipping you describe) that should work.

  • SagarPanwalaSagarPanwala USMember ✭✭✭
    edited January 2016

    Is there still any updates with corner radius? I have to create a login box and many other views. My Login box is in center of the screen and it has round borders. Please don't suggest custom renderers for this small task.

  • TamasMatraiTamasMatrai HUUniversity ✭✭

    Any update on this? Thanks!

Sign In or Register to comment.