ScrollView

ScrollView is a container control whose relationship with the content is that the latter can be scrolled, if it occupies more space than the screen. This is specially helpful when working on content with long scroll or in forms.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.ScrollViewPage">

    <!-- ScrollView container to make the inner content scrollable -->
    <ScrollView>
        <StackLayout Padding="20" Spacing="10">
            <Label Text="Scrollable Content Example"
                   FontSize="Large"
                   HorizontalOptions="Center" />

            <!-- Repeated Labels to create long content -->
            <Label Text="Item 1" FontSize="Medium" />
            <Label Text="Item 2" FontSize="Medium" />
            <Label Text="Item 3" FontSize="Medium" />
            <Label Text="Item 4" FontSize="Medium" />
            <Label Text="Item 5" FontSize="Medium" />
            <Label Text="Item 6" FontSize="Medium" />
            <Label Text="Item 7" FontSize="Medium" />
            <Label Text="Item 8" FontSize="Medium" />
            <Label Text="Item 9" FontSize="Medium" />
            <Label Text="Item 10" FontSize="Medium" />
            <Label Text="Item 11" FontSize="Medium" />
            <Label Text="Item 12" FontSize="Medium" />
        </StackLayout>
    </ScrollView>
</ContentPage>

Border

The Border control enables you to create an around any content that you would want and adjust it features such as colour, thickness, and corner radius.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.BorderPage">

    <StackLayout Padding="20" Spacing="20" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- Border around Label -->
        <Border Stroke="DarkBlue" StrokeThickness="2" CornerRadius="10">
            <Label Text="This is a bordered label."
                   FontSize="Medium"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   Padding="10" />
        </Border>

        <!-- Border around a button -->
        <Border Stroke="Red" StrokeThickness="3" CornerRadius="5" BackgroundColor="LightGray">
            <Button Text="Click Me!"
                    FontSize="Medium"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
        </Border>
    </StackLayout>

</ContentPage>

Frame

Frame is a container which allows to include content with shadow and rounded corners making your elements look like cards. It is frequently utilized in order to draw a contrast between areas in a GUI.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.FramePage">

    <StackLayout Padding="20" Spacing="20" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- Frame to contain Label and give a card-like effect -->
        <Frame BorderColor="DarkGreen" CornerRadius="15" Padding="20" HasShadow="True">
            <StackLayout>
                <Label Text="Card Title" FontSize="Large" FontAttributes="Bold" />
                <Label Text="This is some content inside the card."
                       FontSize="Medium"
                       VerticalOptions="CenterAndExpand" />
            </StackLayout>
        </Frame>

        <!-- Frame around a button -->
        <Frame BackgroundColor="LightSkyBlue" CornerRadius="10" Padding="10">
            <Button Text="Submit" FontSize="Medium" HorizontalOptions="Center" />
        </Frame>
    </StackLayout>
</ContentPage>

Comparison Between ScrollView, Border, and Frame

Control	Purpose	Common Use Cases
ScrollView	Makes content scrollable.	Long forms, lists of items, large content that doesn’t fit on the screen.
Border	Adds a border around content.	Highlighting a particular control, adding visual separation.
Frame	Adds a border with optional shadow and rounded corners.	Creating card-like UI, grouping related elements with a visually distinct container.