【.NET MAUI】ボタンに複数の要素(ビュー)を含める

環境

VS2022
.NET6
.NET MAUI

経緯

一つのボタンの中に、異なるスタイルのテキストを複数含めたかったのと、
画像を埋め込みたかった。(↓下図のようなイメージです)

最初に試したこと

.NET MAUIアプリのプロジェクトテンプレートを使い、新規でプロジェクトを作成。
その後AbsoluteLayoutを使用してMainPage.xamlの内容を変更しました。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomButton.MainPage">

        <AbsoluteLayout HorizontalOptions="Center"
                        VerticalOptions="Center">

            <!--背景色表示用のボタン(動作なし)-->
            <Button Text=""
                        BackgroundColor="LightSkyBlue"                            
                        AbsoluteLayout.LayoutBounds="0, 20, 400, 110">
              
            </Button>

            <Label x:Name="Main"
                       Text="ここをタップしてね"
                       TextColor="Black"
                       FontSize="24"
                       AbsoluteLayout.LayoutBounds="30, 40, 400, 70" />

            <Label x:Name="Sub"
                       Text="優しく..."
                       TextColor="Red"
                       FontSize="20"
                       AbsoluteLayout.LayoutBounds="30, 90, 350, 50" />

            <Image Source="dotnet_bot.png"
                     AbsoluteLayout.LayoutBounds="300, 40, 70, 60" />

            <!--処理実行用のボタン-->
            <Button Text=""                        
                        BackgroundColor="Transparent"   
                        AbsoluteLayout.LayoutBounds="0, 20, 400, 110"
                        />

        </AbsoluteLayout>
</ContentPage>

ボタンを2つ配置しているのは最初に記述したビューから背面に設定されることにより、
ラベルと画像の部分をタップしても反応しかったためです。
・1つ目のボタン ⇒ 背景色設定用
・2つ目のボタン ⇒ クリック用
としています。

絶対座標で指定しているため、1つのビューを変更するたびに他のビューの微調整が
必要になるのが煩わしく感じました。

次に試したこと

ビューを重ねることができるのはAbsoluteLayoutだけだと思っていましたが、
Gridを入れ子にすることにより要素を重ねて表示することができるようです。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomeButton2.MainPage">

    <VerticalStackLayout VerticalOptions="Center">

        <!--ボタン-->
        <Grid HeightRequest="110"
          WidthRequest="400">

            <!--ボタン内部の各ビュー-->
            <Frame BackgroundColor="LightSkyBlue"
               Padding="20, 10, 0, 10">

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Label x:Name="Main"
                       Text="ここをタップしてね"
                       TextColor="Black"
                       FontSize="24"
                       HorizontalTextAlignment="Start"
                       VerticalTextAlignment="Center"/>

                    <Label x:Name="Sub"
                       Text="優しく..."
                       TextColor="Red"
                       FontSize="20"
                       HorizontalTextAlignment="Start"
                       VerticalTextAlignment="Center"
                       Grid.Row="1"/>

                    <Image Source="dotnet_bot.png"
                     Grid.Column="1"
                     Grid.RowSpan="2"/>

                </Grid>
            </Frame>

            <!--ボタン-->
            <Grid>
                <Button BackgroundColor="Transparent"/>
            </Grid>

        </Grid>

    </VerticalStackLayout>

</ContentPage>

概ね実現できました。(Imageの位置は適当です)

例えば「ここをタップしてね」のラベルのサイズを大きくしたい、それに伴って
ボタン自体のサイズも大きくしたいとなった時も上記のコードを

・MainボタンのFontSize="30"
・グリッドのHeightRequest="150"、WidthRequest="450"

と変更するだけで

絶対位置で指定するより簡単に変更することが可能になりました。