Xamarin Forms: StackLayout with rounded corners

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.

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>

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

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.

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>

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

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

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.

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

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>