shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsでボタンを領域の縁に重ねる

shuhelohelo.hatenablog.com

上の記事のようにXamarin.Forms v4.3とv4.4以上ではFrameやGridといった領域の中のコントロールは,その領域の外側にははみ出さないように描画される,ようだ.

とはいえ,コントロールの位置をずらして縁に重ねたりするのはおしゃれUIを作成する上でとても重要.

v4.3ではこのように表示されていたものが, f:id:shuhelohelo:20200225012144p:plain

v4.4以降では以下のように表示される. f:id:shuhelohelo:20200225013734p:plain

これを解決するのは難しくなく,この丸いFrameを親要素の外側に出してやればよい.

そして位置を調整する.

    <Grid
        BackgroundColor="Beige"
        HeightRequest="265"
        VerticalOptions="End">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Frame
            Grid.Row="0"
            Grid.RowSpan="2"
            Padding="20,0"
            BackgroundColor="Aqua"
            CornerRadius="30"
            HeightRequest="225"
            VerticalOptions="End">
            <Grid
                Margin="10"
                Padding="10"
                BackgroundColor="LawnGreen"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <StackLayout
                    Grid.Row="1"
                    Grid.RowSpan="3"
                    BackgroundColor="Red"
                    HorizontalOptions="FillAndExpand"
                    Orientation="Vertical"
                    Spacing="10"
                    VerticalOptions="Center">
                    <Label
                        FontAttributes="Bold"
                        FontSize="20"
                        HorizontalTextAlignment="Center"
                        Text="Hello World!"
                        TextColor="#E10555" />
                    <Label
                        BackgroundColor="Pink"
                        FontSize="15"
                        Text="Text"
                        TextColor="#363636" />
                </StackLayout>
            </Grid>
        </Frame>
        <Button
            Grid.Row="1"
            BackgroundColor="#E10555"
            HeightRequest="45"
            Text="CONTINUE"
            TextColor="White" />
        
        <!--ここに移動-->
        <Frame
            BackgroundColor="Red"
            CornerRadius="20"
            HorizontalOptions="Center"
            TranslationY="-70"
            VerticalOptions="Center" />
    </Grid>

すると,このようになる.

f:id:shuhelohelo:20200226115541p:plain

一番外側のGrid(Beige色の領域)は少し広めに確保しておく.そうでないと,Gridの縁で切れてしまうので.

なんだか,こちらのほうが自然に感じてきた.

ソースコードはこちら.

github.com