stacklayout rounded corners border radius

BrunoVTBrunoVT BEUniversity ✭✭

hi,

I have a forms app with a standard contentpage with a blue background. In the center of the page there is a stacklayout with some controls and a white background. But the corners of my stacklayour are not rounded and thats not so beautifull. Is there a way o get rounded corners?

Posts

  • ChaseFlorellChaseFlorell CAInsider, University mod

    Have you tried using a Frame?

  • BrunoVTBrunoVT BEUniversity ✭✭

    yes, the frame is very limited and cant do that.

  • MitchMilamMitchMilam USMember ✭✭✭

    @brunovt why don't you put your stacklayout inside of the Frame?

  • madhukarmadhukar USMember

    I have put the stacklayout inside of the frame, but the corner shape is in circle, i need rectangle shape.

    Could you please help on this.

    Thank in advance..

  • BrunoVTBrunoVT BEUniversity ✭✭

    You must completely fill the frame. The stacklayout must use for horizontal and vertical options something with expand. Also the background color cannot be transparent. If you do this the frame will have corners.

  • AndyM.0953AndyM.0953 USMember ✭✭
    edited July 2015

    I've implemented the extension to Frame to allow for this. Feel free to use this code and don't forget to make sure your StackLayout fills in both Horizontal and Vertical as suggested by @BrunoVT

    ExtendedFrame.cs

        //Here is the Forms View
    //Only implemented on iOS
    public class ExtendedFrame : Frame
    { 
        public Update updateCornerRadius;
    
        private float cornerRadius;
        public float CornerRadius
        {
            get { return cornerRadius; }
            set {
                cornerRadius = value;
    
                if(updateCornerRadius != null)
                {
                    updateCornerRadius();
                }
            }
        }
    
        public ExtendedFrame() : base()
        {
            //Setting thickness and background color allows
            //Rounded Corners
            Padding = new Thickness(1.0);
            BackgroundColor = Color.Black;
            CornerRadius = 0.0f;
        }
    }
    

    ExtendedFrameRenderer.cs

    //Here is the custom renderer
    
    [assembly: ExportRenderer (typeof (ExtendedFrame), typeof (Controls_iOS.ExtendedFrameRenderer))]
    
    namespace Controls_iOS
    {
        public class ExtendedFrameRenderer : FrameRenderer
        {
            private ExtendedFrame extendedFrame;
    
            protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
            {
                base.OnElementChanged(e);
    
                if(e.NewElement == null || (e.NewElement as ExtendedFrame) == null)
                {
                    return;
                }
    
                extendedFrame = (e.NewElement as ExtendedFrame);
                extendedFrame.updateCornerRadius += SetCornerRadius;
    
                SetCornerRadius();
            }
    
            private void SetCornerRadius()
            {
                if(this.NativeView != null && extendedFrame != null)
                {
                    this.NativeView.Layer.CornerRadius = extendedFrame.CornerRadius;
                }
            }
        }
    }
    
  • @BrunoVT ,

    Did you fix this? I am putting StackLayout inside Frame, but not getting rounded corners. Do I need to implement renderer for this? Here is my code:

    <Frame
         >
          <StackLayout HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       Orientation="Horizontal"
                       WidthRequest="20"
                       BackgroundColor="Yellow"
                       HeightRequest="20"
                       >
    
    
          </StackLayout>
    
        </Frame>
    
  • BrunoVTBrunoVT BEUniversity ✭✭

    you can use a renderer, but the problem with your code is that you completely fill the frame(including the corners) with your stacklayout, this is why you dont see rounded corners, there is no room, I recommend you leave some space between the frame and its content.

  • NikosGNikosG DEMember ✭✭

    @AndyM.0953 said:
    I've implemented the extension to Frame to allow for this. Feel free to use this code and don't forget to make sure your StackLayout fills in both Horizontal and Vertical as suggested by @BrunoVT

    ExtendedFrame.cs

    //Here is the Forms View
    //Only implemented on iOS
    public class ExtendedFrame : Frame
    {
    public Update updateCornerRadius;

      private float cornerRadius;
      public float CornerRadius
      {
          get { return cornerRadius; }
          set {
              cornerRadius = value;
    
              if(updateCornerRadius != null)
              {
                  updateCornerRadius();
              }
          }
      }
          
      public ExtendedFrame() : base()
      {
          //Setting thickness and background color allows
          //Rounded Corners
          Padding = new Thickness(1.0);
          BackgroundColor = Color.Black;
          CornerRadius = 0.0f;
      }
    

    }

    ExtendedFrameRenderer.cs

    //Here is the custom renderer

    [assembly: ExportRenderer (typeof (ExtendedFrame), typeof (Controls_iOS.ExtendedFrameRenderer))]

    namespace Controls_iOS
    {
    public class ExtendedFrameRenderer : FrameRenderer
    {
    private ExtendedFrame extendedFrame;

    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

    if(e.NewElement == null || (e.NewElement as ExtendedFrame) == null)
    {
    return;
    }

    extendedFrame = (e.NewElement as ExtendedFrame);
    extendedFrame.updateCornerRadius += SetCornerRadius;

    SetCornerRadius();
    }

    private void SetCornerRadius()
    {
    if(this.NativeView != null && extendedFrame != null)
    {
    this.NativeView.Layer.CornerRadius = extendedFrame.CornerRadius;
    }
    }
    }
    }

    Hello @AndyM.0953 . And what about the Update object ? Is this custom or is it a xamarin reference?

  • ArunPrasad.007ArunPrasad.007 USMember ✭✭

    i added the stacklayout to the frame but it is not working well in Xamarin.Forms.Android, but working fine in Xamarin.Forms.iOS. Could you please help me in this ?

  • MarcioOrdonezMarcioOrdonez USMember ✭✭
    edited November 2017

    For me it's showing rounded corners:

  • VenkataSwamyVenkataSwamy INMember ✭✭✭

    Hi

    You can set rounded corner for any Layout or View or Cell (StackLayout, Grid, ListView)

    http://venkyxamarin.blogspot.in/2017/12/how-to-set-corner-radius-for-view.html#more

  • Esaavedra89Esaavedra89 USMember ✭✭

    @MarcioOrdonez said:
    For me it's showing rounded corners:

    Too easy man

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    how do you use the frame without using xaml?

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    oh wait, nevermind, for some reason I didn't see this

    MainPage = new ContentPage () {
        Content = new Frame {
            Content = new Label { Text = "I'm Framous!" },
            OutlineColor = Color.Silver,
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Center
        }
    };
    
  • anna.domashychanna.domashych USMember ✭✭

    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.