CODEWITHSUNDEEP
c#xamarin.formsportable-class-library
Sonali
Sonali

Reputation: 2283

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. enter image description here

Upvotes: 67

Views: 87133

Answers (8)

Mohammed Saquib
Mohammed Saquib

Reputation: 73

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>

Upvotes: -1

Nabil Akhlaque
Nabil Akhlaque

Reputation: 356

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>

Upvotes: 7

prasadsunny1
prasadsunny1

Reputation: 830

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>

Upvotes: 27

foxanna
foxanna

Reputation: 1570

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.

Upvotes: 19

Abdullah Tahan
Abdullah Tahan

Reputation: 2139

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>

Upvotes: 83

Nk54
Nk54

Reputation: 771

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.

Upvotes: 1

Tom
Tom

Reputation: 397

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

Upvotes: 1

Venkata Swamy Balaraju
Venkata Swamy Balaraju

Reputation: 1481

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

Upvotes: 0

Related Questions