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.

Answer 1

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>

Answer 2

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

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 .

Answer 4

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

Answer 5

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>

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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>