MainPage.xaml

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Maui.Controls.Sample.MainPage"
    xmlns:local="clr-namespace:Maui.Controls.Sample">

    <ScrollView>
        <VerticalStackLayout Margin="0,10,0,0">
        
            <Button HeightRequest="250"
                Text="BorderWidth Changing with a slightly longer text"
                ImageSource="dotnet_bot.png"
                BackgroundColor="Green"
                BorderColor="Black"
                BorderWidth="{Binding Source={x:Reference borderWidthSlider},
                                    Path=Value}"
                x:Name="TextImageButton"
                LineBreakMode="MiddleTruncation"
                AutomationId="TextImageButton"/>

            <Slider x:Name="borderWidthSlider" Maximum="100" Value="0" />

            <!-- <Button Text="Change BorderWidth" Clicked="Change_BorderWidth_Button_Clicked" AutomationId="Change_BorderWidth_Button"/> -->
            <BoxView HeightRequest="80"/>

            <Label Text="Image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 1" 
                    ContentLayout="Bottom, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Top, 20" 
                    Padding="10"
                    LineBreakMode="TailTruncation"
                    HeightRequest="100"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 3 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Left, 20" 
                    LineBreakMode="TailTruncation"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 4" 
                    Padding="20"
                    ContentLayout="Right, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center"  LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 5" 
                    Padding="0"
                    ContentLayout="Left, 0" 
                    Background="LightGray"/>

            <BoxView HeightRequest="100"/>
            <Label Text="Now using smaller images (25x25)" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/>
            <BoxView HeightRequest="100"/>

            <Label Text="Small image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 1_1" 
                    ContentLayout="Bottom, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Small image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 2_1 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Top, 20" 
                    Padding="20"
                    LineBreakMode="TailTruncation"
                    HeightRequest="100"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>


            <Label Text="Small image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 2_1_1" 
                    ContentLayout="Top, 20" 
                    Padding="10"
                    LineBreakMode="TailTruncation"
                    HeightRequest="100"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>



            <Label Text="Small image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 3_1 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Left, 20" 
                    LineBreakMode="TailTruncation"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Small image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 4_1" 
                    Padding="20"
                    ContentLayout="Right, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Small image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center"  LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot_resized.png" 
                    Text="Button 5_1" 
                    Padding="0"
                    ContentLayout="Left, 0" 
                    Background="LightGray"/>

                    
            <BoxView HeightRequest="100"/>
            <Label Text="Original Image size with BorderWidth and Horizontal Options" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/>
            <BoxView HeightRequest="100"/>

            <Label Text="Image on bottom with spacing of 20, HorizontalOptions Center and BorderWidth 10" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 1_2"
                    BorderWidth="10"
                    HorizontalOptions="Center"
                    ContentLayout="Bottom, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200, HorizontalOptions Start and BorderWidth 5" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 2_2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Top, 20" 
                    Padding="10"
                    BorderWidth="5"
                    HorizontalOptions="Start"
                    LineBreakMode="TailTruncation"
                    HeightRequest="100"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200, HorizontalOptions End and BorderWidth 10" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 3_2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Left, 20" 
                    BorderWidth="10"
                    HorizontalOptions="End"
                    LineBreakMode="TailTruncation"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on right with spacing of 20 and padding of 20, HorizontalOptions Fill and BorderWidth -5" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 4_2" 
                    Padding="20"
                    BorderWidth="-5"
                    HorizontalOptions="Fill"
                    ContentLayout="Right, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 0 and padding of 0, HorizontalOptions Center and BorderWidth 20" HorizontalTextAlignment="Center"  LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 5_2" 
                    BorderWidth="20"
                    HorizontalOptions="Center"
                    Padding="0"
                    ContentLayout="Left, 0" 
                    Background="LightGray"/>

            <BoxView HeightRequest="100"/>
            <Label Text="Original Image size with Wrapped LineBreakModes" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/>
            <BoxView HeightRequest="100"/>

            <Label Text="Image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 1" 
                    LineBreakMode="WordWrap"
                    ContentLayout="Bottom, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Top, 20" 
                    Padding="10"
                    LineBreakMode="CharacterWrap"
                    HeightRequest="100"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 3 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" 
                    ContentLayout="Left, 20" 
                    LineBreakMode="WordWrap"
                    WidthRequest="200"
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 4" 
                    Padding="20"
                    LineBreakMode="CharacterWrap"
                    ContentLayout="Right, 20" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>

            <Label Text="Image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center"  LineBreakMode="WordWrap" />
            <Button ImageSource="dotnet_bot.png" 
                    Text="Button 5" 
                    Padding="0"
                    LineBreakMode="WordWrap"
                    ContentLayout="Left, 0" 
                    Background="LightGray"/>
            <BoxView HeightRequest="30"/>


            <HorizontalStackLayout>
                <Button Text="Regular Button" ContentLayout="Top, 10" ImageSource="dotnet_bot.png" Background="lightblue"/>
            </HorizontalStackLayout>
            <BoxView HeightRequest="30"/>

            <HorizontalStackLayout>
                <Button Text="Regular Button with longer text just to test" ContentLayout="Top, 10" ImageSource="dotnet_bot.png" Background="lightgreen"/>
            </HorizontalStackLayout>
            <BoxView HeightRequest="30"/>

            <HorizontalStackLayout>
                <Button Text="Regular Button" ContentLayout="Top, 10" ImageSource="dotnet_bot_resized.png" Background="lightblue"/>
            </HorizontalStackLayout>
            <BoxView HeightRequest="30"/>

            <HorizontalStackLayout>
                <Button Text="Regular Button with longer text just to test" ContentLayout="Top, 10" ImageSource="dotnet_bot_resized.png" Background="lightgreen"/>
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </ScrollView>
    
</ContentPage>