Only rounded bottom corners?

Question

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?

Answer 1

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>