Frame with rounded corners

kavya16kavya16 USMember ✭✭

Hi,

Please suggest any method to implement rounded corner frame without using custom renderers.

Thanks & Regards,
Kavya

Best Answers

Answers

  • VelocityVelocity NZMember ✭✭✭

    Don't be afraid of using a custom renderer too. To achieve what you are after, it's literally only a few lines of code.

  • NMackayNMackay GBInsider, University mod

    @LGMaestrelli said:
    The version 2.3.4.192 (pre-release for now) adds the property CornerRadius to Frames

    Does it work with UWP?

  • LGMaestrelliLGMaestrelli BRMember ✭✭✭

    @NMackay

    We do not develop for UWP, so I can't tell.
    But I think that works...

  • kavya16kavya16 USMember ✭✭

    Hi All,

    Thank you for all your guidance and support.
    @LGMaestrelli this works beautifully for me :)

    Thanks & Best Regards,
    Kavya

  • DarshanSDarshanS USMember ✭✭

    Hi

    @LGMaestrelli I am not able to get it work

    The Xamarin version what I am using is 4.4.0.34

    Is it not compatible with this version which is the latest ?

    If anyone is able to get it work with this version (4.4.0.34), please help me

    Thanks :)

  • kavya16kavya16 USMember ✭✭

    Hi @DarshanS,

    As suggested by @AlessandroCaliaro, XFShapeView is the best for this scenario.

    Thanks & Regards,
    Kavya

  • LGMaestrelliLGMaestrelli BRMember ✭✭✭

    @DarshanS

    Looking to the version number, looks like you updated the Xamarin for VisualStudio (the extension only).
    Did you try to update your project references using Nuget?
    You should look for and update of the package Xamarin.Forms to the version 2.3

  • DarshanSDarshanS USMember ✭✭

    Hi All

    Thank you for all your replies. And yes @LGMaestrelli I updated my Xamarin forms, now it's showing a in-built CornerRadius property. Thanks mate. Cheers! :)

  • DarshanSDarshanS USMember ✭✭

    Also I have one more question.

    Giving a CornerRadius to frame , along with padding and background color, the color wont reflect in the corners. Is there a way to get a color to corners as well ?

    Thanks

  • LGMaestrelliLGMaestrelli BRMember ✭✭✭

    @DarshanS

    Now, I think that your only option is to use a library as XFShapeView, with no color on your frame's background.

  • Charlie2017Charlie2017 USMember ✭✭
    edited April 2017

    @LGMaestrelli said:
    The version 2.3.4.192 (pre-release for now) adds the property CornerRadius to Frames

    I'm not sure Xamarin.Form CornerRadius works well on Android. I tried to set CornerRadius to button (It may have the same issue with frame). It works well on iOS but doen't work on my Galaxy Note 5 except to render it for Android or use third party view. Please let me know if you have the solution to make CornerRadius of the native Xamarin.Form button, frame, etc. works on any Android device

  • kavya16kavya16 USMember ✭✭

    Hi Darshan,

    As suggested earlier, I moved down from Xamarin.Forms pre release version and used XFShapeView nuget. Below is the code I am using and it works really well. See if this could help:

    industrieswraplayout2.Children.Add(new ShapeView()
    {
    ShapeType = ShapeType.Box,
    BorderColor = Color.FromHex("#1976D2"),
    CornerRadius = 2, //change here for round corner
    BorderWidth = 0.5f,
    HeightRequest = 30,
    Padding = new Thickness(0.8),
    Content = new Label()
    {
    Margin = new Thickness(9, 5, 9, 5),
    Text = hint.ToString(),
    FontSize = 13,
    HorizontalTextAlignment = TextAlignment.Center,
    VerticalTextAlignment = TextAlignment.Center,
    TextColor = Color.FromHex("#2A2827"),
    },
    });

    Thanks & Regards,
    Kavya

  • TheGreatOneTheGreatOne USMember ✭✭
    edited May 2017

    Does the corner radius work in android? also can the border color be change?

  • kavya16kavya16 USMember ✭✭

    Hi @TheGreatOne,

    Yes the corner radius works in android and the border color can also be changed.

    Thanks & Regards,
    Kavya

  • TheGreatOneTheGreatOne USMember ✭✭
    edited May 2017

    The border color(outline color) doesn't work on android.

  • kavya16kavya16 USMember ✭✭

    Hi @TheGreatOne,

    What is the version of Xamarin.Forms you are currently using?

    Thanks & Regards,
    Kavya

  • TheGreatOneTheGreatOne USMember ✭✭
    edited May 2017

    I'm using version 2.3.4.231. Updated to the latest 2.3.4.247 and not outline color.

  • You can use frame and put StackLayout inside , Note Frame take padding 20 by default :


            </StackLayout>
    

  • boskobosko Member

    With the new Xamarin Forms update, the border color(outline color) works on android ;-)

  • JosueSamanoJosueSamano USMember ✭✭

    @DarshanS said:
    Also I have one more question.

    Giving a CornerRadius to frame , along with padding and background color, the color wont reflect in the corners. Is there a way to get a color to corners as well ?

    Thanks

    Did you find a solution?

  • Vaka.GopiNadhReddyVaka.GopiNadhReddy USMember ✭✭✭

    Control:

    public class FrameControl : Frame
    {

    }
    

    Android:

    [assembly: ExportRenderer(typeof(FrameControl), typeof(FrameControlRenderer))]
    namespace Sample.Droid
    {
    public class FrameControlRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer
    {

        public FrameControlRenderer()
        {
        }
        public override void Draw(Canvas canvas)
        {
            base.Draw(canvas);
    
            using (var paint = new Paint { AntiAlias = true })
            using (var path = new Path())
            using (Path.Direction direction = Path.Direction.Cw)
            using (Paint.Style style = Paint.Style.Stroke)
            using (var rect = new RectF(0, 0, canvas.Width, canvas.Height))
            {
                float px = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10);
                float py = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10);
                path.AddRoundRect(rect, px, py, direction);
    
                paint.StrokeWidth = Context.Resources.DisplayMetrics.Density * 2;
                paint.SetStyle(style);
    
                Xamarin.Forms.Color color = Element.OutlineColor;
                paint.Color = color.ToAndroid();
                canvas.DrawPath(path, paint);
            }
        }
    }
    

    }

  • anna.domashychanna.domashych USMember ✭✭
    edited September 2018

    Since Xamarin has released Effects mechanism, you don't have to wrap each and every control into a Frame to set rounded corners. It now can be done by implementing a custom effect. An advantage of this approach is that effects are more light-weight, reusable and can be parameterized and applied to any UI element.

    After you create a custom RoundCornersEffect inheriting RoutingEffect, declare a CornerRadius attached property and implement PlatformEffect on each platform you support, it can be applied to any Xamarin.Forms layout or control like this:

    <StackLayout effects:RoundCornersEffect.CornerRadius="48"/>

    with hardcoded corners radius or a value from resources

    <BoxView effects:RoundCornersEffect.CornerRadius="{StaticResource LargeCornerRadius}" />

    Here is a link to full implementation and usage examples.

Sign In or Register to comment.