LayoutsPage.xaml

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

    <ScrollView VerticalOptions="FillAndExpand">
        <StackLayout Margin="10">

            <!--  StackLayout: يمكن استخدامه لترتيب العناصر بشكل خطي، إما عموديًا أو أفقيًا.  -->
            <StackLayout
                Margin="10"
                BackgroundColor="LavenderBlush"
                IsVisible="False"
                VerticalOptions="FillAndExpand">

                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />
                <Label Text="Hi Form Stacklayput" />

                <HorizontalStackLayout BackgroundColor="White" Spacing="20">
                    <Button BackgroundColor="Aquamarine" Text="Click me" />
                    <Button Text="Click me 2" />
                </HorizontalStackLayout>

            </StackLayout>




            <StackLayout
                Margin="20"
                Padding="20"
                BackgroundColor="LightGray"
                Orientation="Vertical"
                Spacing="10"
                VerticalOptions="FillAndExpand">
                <Label
                    BackgroundColor="Red"
                    FontSize="20"
                    HorizontalOptions="FillAndExpand"
                    HorizontalTextAlignment="End"
                    Text="StackLayout Properties Example" />
                <Button
                    BackgroundColor="LightBlue"
                    HorizontalOptions="Fill"
                    Text="Button 1" />

            </StackLayout>

            <!--  VerticalStackLayout: محسّن لترتيب العناصر عموديًا فقط.  -->
            <VerticalStackLayout
                Padding="20"
                BackgroundColor="HotPink"
                Spacing="10"
                VerticalOptions="FillAndExpand">
                <Label
                    FontSize="20"
                    HorizontalOptions="Center"
                    Text="Vertical Stack Layout Properties Example" />
                <Button
                    BackgroundColor="LightBlue"
                    HorizontalOptions="Fill"
                    Text="Button 1" />
                <Button
                    BackgroundColor="LightBlue"
                    HorizontalOptions="Fill"
                    Text="Button 1" />


            </VerticalStackLayout>

            <!--  HorizontalStackLayout: محسّن لترتيب العناصر أفقيًا فقط.  -->
            <HorizontalStackLayout
                Padding="20"
                BackgroundColor="LightCyan"
                HorizontalOptions="FillAndExpand"
                Spacing="10"
                VerticalOptions="FillAndExpand">
                <Label
                    FontSize="10"
                    HorizontalOptions="Center"
                    Text="Horizontal Stack Layout:" />
                <Button
                    BackgroundColor="LightCoral"
                    HorizontalOptions="Fill"
                    Text="BTN 3" />
                <Button
                    BackgroundColor="LightCoral"
                    HorizontalOptions="Fill"
                    Text="BTN 3" />
            </HorizontalStackLayout>

        </StackLayout>
    </ScrollView>


</ContentPage>