Only rounded bottom corners?

burakzbc

I am trying to make my Stacklayout's background rounded (only right and left bottom sides). I looked for how to search but couldn't make sure. How can I do it?

enter image description here

Cfun

You can use Xamarin.Forms.PancakeView package:

1- Install it in your shared as in your platform projects (latest version require Xamarin.Forms 4.8.0.1451 and upper).

2- Include the namespace for that package in your xaml:

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

3- Create a PancakeView which will host your controls inside:

<pancake:PancakeView Padding="10"
                     BackgroundColor="Blue"
                     CornerRadius="0,0,40,40">
    <StackLayout Padding="0"
                 HorizontalOptions="FillAndExpand">

        <Label Text="hello World"
               FontSize="Medium"
               TextColor="White"
               HorizontalOptions="Center"/>

        <Button Text="More Details"/>
    </StackLayout>
</pancake:PancakeView>

you can play on it shape with the CornerRadius propety.

Edit:

Just wanted to show the usage of Gradients as the question screenshots includes one.

For more details on this package you can consult their Wiki page.

<StackLayout>
    <pancake:PancakeView Padding="10"
                         BackgroundGradientStartPoint="1,0"
                         BackgroundGradientEndPoint="1,1"
                         HeightRequest="300"
                         VerticalOptions="Start"
                         CornerRadius="0,0,40,40">

        <pancake:PancakeView.BackgroundGradientStops>
            <pancake:GradientStopCollection>
                <pancake:GradientStop Color="#44F3FF"
                                      Offset="0"/>
                <pancake:GradientStop Color="#46ACDC"
                                      Offset="0.4"/>
                <pancake:GradientStop Color="#0057CB"
                                      Offset="1"/>
            </pancake:GradientStopCollection>
        </pancake:PancakeView.BackgroundGradientStops>

        <StackLayout VerticalOptions="FillAndExpand">
            <Label Text="Hello World"
                   HorizontalOptions="Center"
                   FontSize="Large"
                   TextColor="Black"/>

            <Button Text="More Details"
                    BackgroundColor="#0057CB"
                    BorderWidth="2"
                    BorderColor="#44F3FF"
                    VerticalOptions="CenterAndExpand"
                    CornerRadius="25"/>
        </StackLayout>
    </pancake:PancakeView>

    <Label Text="What are you doing today?"
           FontSize="Title"
           Margin="30,0,0,0"
           TextColor="Black"/>
</StackLayout>

                                https://i.stack.imgur.com/Qbc4V.png

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I make the corners of my bottom sheet dialog rounded?

Rounded LineBorder - not all corners are rounded

Rounded Corners Image in Flutter

Android - drawable with rounded corners at the top only

Is there a way to add rounded corners to an android Material View bottom navigation?

Rounded corners on rectangular image using CSS only

UIAlertController with square (not rounded) corners

Buttons with rounded corners in android

individual rounded corners (NOT all corners)

Android: how to clip only top rounded corners

Rounded corners with Kivy (using Python only)

How to transform skew only towards bottom corners?

Add rounded corners to images

Imageview not showing rounded corners

NativeScript: WebView with rounded corners (Android Only)

ImageView with only bottom or top corners rounded

Rounded Bottom Corners on Last HTML List Item?

Cocoa: Masking NSTableView with rounded bottom corners

Java - Only Two Rounded Corners on a JFrame

Rounded Corners only for the bottoms edges of UITableView

Need rounded bottom corners on JFrame for Mac OS X El Capitan

How to get rounded corners only for topLeft and bottomLeft corners?

Rounded corners of an image

How to add border-top with rounded bottom corners to <li> elements?

Rounded corners for each row of an HTML table using only CSS?

Image with rounded bottom corners

vuetify v-card only two rounded corners

How to create a layout with rounded corners on only the top or bottom half?

How to have a UIView with line corners instead of rounded corners in the bottom