โค้งมนเฉพาะมุมล่าง?

Question

ฉันพยายามทำให้Stacklayoutพื้นหลังของฉันโค้งมน (เฉพาะด้านล่างขวาและซ้าย) ฉันมองหาวิธีค้นหา แต่ไม่แน่ใจ ฉันจะทำมันได้อย่างไร?

Answer 1

คุณสามารถใช้แพ็คเกจXamarin.Forms.PancakeView :

1- ติดตั้งในแชร์ของคุณเช่นเดียวกับในโครงการแพลตฟอร์มของคุณ (เวอร์ชันล่าสุดต้องใช้ Xamarin.Forms 4.8.0.1451 ขึ้นไป)

2- รวมเนมสเปซสำหรับแพ็คเกจนั้นใน xaml ของคุณ:

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

3- สร้างสิ่งPancakeViewที่จะโฮสต์การควบคุมของคุณภายใน:

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

คุณสามารถเล่นกับรูปร่างCornerRadiusได้อย่างเหมาะสม

แก้ไข:

เพียงต้องการแสดงการใช้การไล่ระดับสีเนื่องจากภาพหน้าจอของคำถามมีหนึ่งภาพ

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับแพคเกจนี้คุณสามารถปรึกษาของพวกเขาหน้าวิกิพีเดีย

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