CODEWITHSUNDEEP
xamarin.forms
developer9969
developer9969

Reputation: 5246

Flexlayout or grid for better screen sizes handling

Xamarin layout advice

Hi given the nature of mobile devices screen sizes as a rule of thumb when building screen would you say use "Flexlayout" all the time rather than a grid.

It is my understanding that the flexlayout is more suitable for adapting to various screens sizes without building complexity in your pages.

Still do not understand "Grow and shrink" despite reading few documentations.

How would you describe grow and shrink?

Sample one

<Grid 
        RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="6*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" BackgroundColor="Green">
            <Label Text="Header with logo" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
        <StackLayout Grid.Row="1" BackgroundColor="LightBlue">
            <Label Text="Content" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
        <StackLayout Grid.Row="2" BackgroundColor="Red">
            <Label Text="Footer" 
                   HorizontalTextAlignment="Center" 
                   VerticalTextAlignment="Center" />
        </StackLayout>
    </Grid>

VS

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="Large"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />


        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="Content"
                   FontSize="Large"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />
        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>

Upvotes: 1

Views: 1738

Answers (1)

Leon Lu
Leon Lu

Reputation: 9274

Grow setting of 1. This means that all the extra vertical space is allocated to this blank Label like these screenshot.

I add second label called content2, if I set grow 0, content2 will not fill extra vertical space

enter image description here

if I set grow 1, content2 will fill extra vertical space

enter image description here

shrink property plays a role when the Wrap property is set to NoWrap and the aggregate width of a row of children is greater than the width of the FlexLayout, or the aggregate height of a single column of children is greater than the height of the FlexLayout. Normally the FlexLayout will display these children by constricting their sizes. The Shrink property can indicate which children are given priority in being displayed at their full sizes.

enter image description here

You can download this demo, and test it by yourself.

https://developer.xamarin.com/samples/xamarin-forms/UserInterface/FlexLayoutDemos/

Upvotes: 1

Related Questions