丸い下隅だけ?

Nov 08 2020

Stacklayoutの背景を丸くしようとしています(右下と左下のみ)。検索方法を探しましたが、よくわかりませんでした。どうすればいいですか?

回答

6 Cfun Nov 08 2020 at 19:17

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プロパティで遊ぶことができます。

編集:

質問のスクリーンショットにグラデーションが含まれているため、グラデーションの使用法を示したかっただけです。

このパッケージの詳細については、Wikiページを参照してください。

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