Search This Blog

Tuesday 25 January 2022

.Net MAUI StackLayout, HorizontalStackLayout, VerticalStackLayout Demo



 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiDemo.MainPage" 
             BackgroundColor="{DynamicResource SecondaryColor}">
 
    <ScrollView>
        <StackLayout Margin="{OnPlatform Default='10',iOS='15',Android='10,20,10,15'}" Spacing="10">
            <Label Text="All Stack Layout Demo" FontSize="28" FontAttributes="Bold" TextColor="Black"  />
            <Label Text="Horizontal Stack Layout" />
            <HorizontalStackLayout Spacing="10" >
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Red" />
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Yellow" />
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Green" />
            </HorizontalStackLayout>
 
            <Label Text="Vertical Stack Layout" />
            <VerticalStackLayout Spacing="10">
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Red" />
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Yellow" />
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Green" />
            </VerticalStackLayout>
 
            <Label Text="Nest HorizontalStackLayout inside Vertical Layout" />
            <VerticalStackLayout Spacing="10">
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Red" />
                <HorizontalStackLayout Spacing="10">
                    <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Yellow" />
                    <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Green" />
                </HorizontalStackLayout>
            </VerticalStackLayout>
 
            <Label Text="Nest Vertical StackLayout inside Horizontal Layout" />
            <HorizontalStackLayout Spacing="10">
                <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Red" />
                <VerticalStackLayout Spacing="10">
                    <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Yellow" />
                    <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Green" />
                </VerticalStackLayout>
            </HorizontalStackLayout>
        </StackLayout>
    </ScrollView>
 
</ContentPage>
 

Wednesday 5 January 2022

Popular Posts