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.

Putscher

github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/… – Bracteole

@Bracteole i dont need boxview i want stacklayout so that i can put elements into it – Putscher

Still can put stuff on top of the box view – Bracteole

forums.xamarin.com/discussion/57473/… – Hyperthermia

@Bracteole But how? I have tried adding elements to boxview but that didn't work – Putscher

Just put things in same grid cell – Bracteole

@Bracteole ok box view first then elements that I want on top of it. – Putscher

Answer 1

You can use a Frame and put StackLayout inside. Note that Frame take padding 20 by default :

<Frame CornerRadius="10"  
       OutlineColor="Red" 
       Padding="0">
            <StackLayout>
                <!-- your content -->
            </StackLayout>
</Frame>

Censorious

Can we increase Corner radius?? – Putscher

can we adjust the border width? – Carce

if you want to increase corner radius or adjust border width , you should implement custom renderer . I wrote it here : gist.github.com/ads90/49cdea7d609a5b364eb34c9feedb7271 – Censorious

Also needs IsClippedToBounds="True" on the Frame or all the controls inside are happy to create new corners for you. – Gravitt

@Putscher you just need to increase the value of the property CornerRadius="10" for the value that best fits for you – Colbert

@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 – Colbert

Answer 2

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

<!--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>

Campground

@sonali please check this out. . Thanks for asking the question. – Campground

Also you may want to IsClippedtoBounds="true" if your content bleeds. – Campground

what is BigBasket filter buttons? – Veronique

I was trying to replicate the design of this component in "Bigbasket android app" – Campground

Answer 3

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.

Neddy

@Neddy 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. – Invade

@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 medium.com/@rekerrsive/…. – Neddy

@Neddy 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. – Invade

Best way to do the Job and re-usable ! – Lydalyddite

Answer 4

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>

Martainn

Answer 5

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

Carroll

Answer 6

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.

Repugn

Answer 7

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

Puttee

Answer 8

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>

Renick