Xamarin Forms: StackLayout with rounded corners

Question

I am developing an app using Xamarin Forms PCL. I need a StackLayout with rounded corners. I have tried frame as well for rounded corner container but there is no corner radius property available for it. I cannot find renderers for iOS,Android,UWP,Windows 8.1.

Please can any one suggest me how to achieve StackLayout with rounded corners along with corner radius property for all the platforms.

https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/RoundedBoxView — Depechie, Dec 16 '16 at 15:33
@Depechie i dont need boxview i want stacklayout so that i can put elements into it — Sonali, Dec 16 '16 at 17:55
https://forums.xamarin.com/discussion/57473/how-can-i-customize-the-border-of-stack-layout — Yura Babiy, Dec 16 '16 at 20:07
@Depechie But how? I have tried adding elements to boxview but that didn't work — Sonali, Dec 17 '16 at 07:23
@Depechie ok box view first then elements that I want on top of it. — Sonali, Dec 17 '16 at 07:28

Abdullah Tahan · Answer 1 · 2017-07-12T10:20:27.530

67

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

<Frame CornerRadius="10"  
       OutlineColor="Red" 
       Padding="0">
            <StackLayout>

            </StackLayout>
</Frame>

edited Jul 12 '17 at 10:20

answered Jul 12 '17 at 08:52

Abdullah Tahan

1,474
12
21

1

Can we increase Corner radius?? – Sonali Jul 12 '17 at 08:59
2

can we adjust the border width? – Neville Nazerane Oct 10 '17 at 07:19
if you want to increase corner radius or adjust border width , you should implement custom renderer . I wrote it here : https://gist.github.com/ads90/49cdea7d609a5b364eb34c9feedb7271 – Abdullah Tahan Feb 13 '18 at 02:08
1

Also needs IsClippedToBounds="True" on the Frame or all the controls inside are happy to create new corners for you. – Lamarth Dec 03 '19 at 04:39
@Sonali you just need to increase the value of the property `CornerRadius="10"` for the value that best fits for you – Vinicius Dutra Oct 08 '20 at 12:52
1

@NevilleNazerane the border width is not customizable, it has a fixed value for each platform. You can "simulate" putting a frame inside another, so use the backgroundColor property and set padding on the outer until you get the appropriated appearence – Vinicius Dutra Oct 08 '20 at 12:56

prasadsunny1 · Answer 2 · 2019-08-05T10:02:58.383

23

<!--Curved stack-->
<Frame CornerRadius="5" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           IsClippedToBounds="True"
           Padding="0">
        <StackLayout Padding="10,5,10,5"   
                         Orientation="Horizontal" 
                         BackgroundColor="White"  >
            <Image Source="settingsIcon"  
                   HeightRequest="25" 
                   WidthRequest="25" 
                   Aspect="Fill" />
            <Label Text="Filter" 
                   FontSize="Medium" 
                   VerticalTextAlignment="Center" 
                   VerticalOptions="Center"/>
        </StackLayout>
    </Frame>

I just tried to copy BigBasket's filter buttons. See How cool it looks

edited Aug 05 '19 at 10:02

answered Jul 21 '18 at 09:29

prasadsunny1

557
3
10

@sonali please check this out. . Thanks for asking the question. – prasadsunny1 Jul 21 '18 at 09:32
2

Also you may want to IsClippedtoBounds="true" if your content bleeds. – prasadsunny1 Jun 06 '19 at 10:28
what is BigBasket filter buttons? – Nitin S Oct 16 '20 at 07:42
I was trying to replicate the design of this component in "Bigbasket android app" – prasadsunny1 Oct 20 '20 at 08:23

score 17 · Answer 3 · answered Sep 17 '18 at 14:06

17

Since Xamarin has released Effects mechanism, it now can be done by implementing a custom effect on both platforms. 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, 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.

answered Sep 17 '18 at 14:06

foxanna

1,500
16
26

@foxanna I love the idea and I followed your tutorial but for some reason the corners do not get rounded. I checked your instructions and my code a lot of times, same the same but in my simulator the corners do not get rounded. Everything compiles and builds fine but there is no effect. – Razvan Emil May 21 '19 at 00:13
1

@EmilRR1, set the breakpoints in `RoundCornersEffectIOS.OnAttached` or `RoundCornersEffectDroid.OnAttached` and make sure they are hit. Otherwise, the effect for some reason may not get attached to the view. Also, check the comment below the article, it might be useful https://medium.com/@rekerrsive/great-tutorial-anna-domashych-thanks-a5e3ab15c300. – foxanna May 22 '19 at 14:44
1

@foxanna I figured out what the problem was. You're right those breakpoints were not hit. The reason was that I needed to add this: **[assembly: ResolutionGroupName("MyAppName.MyEffectFolder")]** It now works. Loved your tutorial thank you. – Razvan Emil May 22 '19 at 16:38
1

Best way to do the Job and re-usable ! – theMouk Jun 06 '19 at 09:36

score 6 · Answer 4 · edited May 21 '19 at 13:33

Use following to achieve your expected output;

Xamarin Forms control: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls/Border.cs

iOS: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.iOS/Renderers/BorderRenderer.cs

Android: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRenderer.cs https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs (Note some files in https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers have compilation set to None, I was doing some tests, need to remove those)

WinPhone: https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.WinPhone/Renderers/BorderRenderer.cs

Thanks @jay Patel for this code, do you have example on how to create custom corner radious (like up left only). I found a way in Android and WP but IOS is not working as well — safi, Aug 25 '17 at 15:17

score 1 · Answer 5 · answered May 28 '18 at 15:41

I recently had the same need, so I created a Custom Renderer for both iOS and Android. I released it as a Nuget which you can find here. The source code is available on GitHub, and here is a little "How-To"

Hope this helps! It is very easy to use (Same as a ContentView, which it is at it's base), although note this is compile for .NET Standard, but you can also pull the code into your PCL

score 1 · Answer 6 · answered Apr 09 '21 at 23:18

1

A lot of valid answers were already given.

I just wanted to add that since Xamarin Forms 5, Shapes control were added.

Now, you can just add a Rectangle which exposes RadiusX and RadiusY.

answered Apr 09 '21 at 23:18

Nk54

554
4
14

score 0 · Answer 7 · answered Dec 13 '17 at 05:37

0

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

answered Dec 13 '17 at 05:37

Venkata Swamy Balaraju

1,321
8
13

score 0 · Answer 8 · answered Feb 21 '21 at 06:44

Try using PancakeView Nuget Package. First, install the package in your PCL project. Give the reference in xaml content page.

xmlns:pkView="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"

<StackLayout>
      <pkView:PancakeView>
            CornerRadius="10,0,10,0" 
      </pkView:PancakeView>
 </StackLayout>

score 0 · Answer 9 · answered Apr 17 '21 at 20:30

Just use a Frame with CornerRadius and set IsClippedToBounds to True. That should do the trick.

<Frame CornerRadius="30" 
           HorizontalOptions="Center" 
           VerticalOptions="Start"
           HasShadow="True"
           IsClippedToBounds="True"
           Padding="0">
<StackLayout></StackLayout>
</Frame>

Xamarin Forms: StackLayout with rounded corners

9 Answers9

Linked