Xamarin, Part 3: Layouts

Introduction

Hello, and welcome to the installment in my Xamarin article series. In Parts 1 and 2, I have explained what Xamarin is and how to install it. There wasn’t much practical information because you needed to understand various concepts first. That is what this article is for.

You will learn about the most popular Xamarin Layouts and Views. This includes how they differ from each other as well as how they work. If you have not yet read the previous two installments, I would advise you to do so now. You can find them here:

Practical

Ensure you have installed and set up Xamarin and its Emulators properly, as outlined in the previous two articles, before continuing.

Start Visual Studio and create a new Xamarin.Forms Cross-Platform application, as shown in Figure 1.

Cross-Platform App
Figure 1: Cross-Platform App

After you have supplied a name for your project and clicked OK, a screen like Figure 2 will appear.

Template
Figure 2: Template

Select Blank template and Shared Project as the Code Sharing Strategy, and click OK. Your project will be created. Add a few Pages (you can add as many pages as you want; you won’t have to run your project because you will see the design directly in design view after you have added the XAML code). Figure 3 shows the Add new Item screen from which you must select the topmost item “Content Page.”

Add New Item
Figure 3: Add New Item

AbsoluteLayout

Xamarin.Forms AbsoluteLayout positions (and sizes) its child elements proportional to its own size and position or by absolute values (static values). On any of your pages, add the following code:

    <StackLayout>
        <Label Text="AbsoluteLayout"
               FontSize="30"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <AbsoluteLayout BackgroundColor="LightSteelBlue"
                        VerticalOptions="FillAndExpand">

            <Label x_Name="text1"
                   Text="AbsoluteLayout"
                   TextColor="Black"
                   AbsoluteLayout.LayoutFlags=
                       "PositionProportional" />

            <Label x_Name="text2"
                   Text="AbsoluteLayout"
                   TextColor="Black"
                   AbsoluteLayout.LayoutFlags=
                       "PositionProportional" />
        </AbsoluteLayout>
    </StackLayout>

AbsoluteLayout.LayoutFlags specifies how values supplied in the layout bounds will be interpreted. Supplying PositionProportional means that the element will be scalable according to the value specified.

AbsoulteLayout
Figure 4: AbsoulteLayout

FlexLayout

Xamarin.Forms FlexLayout is based on the CSS Flexible Box Layout Module (flex layout or flex-box). FlexLayout arranges its children horizontally and vertically in a stack. But, FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column. It has many options for orientation, alignment, and adapting to various screen sizes. Add the following code:

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Screen 1" />
                    <Label Text="TEXT" />

                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Screen 2"/>
                    <Label Text="TEXT 2" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

        </FlexLayout>
    </ScrollView>

The FlexLayout is hosted inside a ScrollView which supplies scroll bars. The FlexLayout Direction property causes the children of the FlexLayout to be arranged in a single column of items. Figure 5 shows the previous code in action. You also can clearly see the difference between Portrait mode and Landscape mode while using FlexLayout.

FlexLayout
Figure 5: FlexLayout

Frame

The Xamarin.Forms Frame is an element that can contain children (see Figure 6). Frame provides options to draw borders around the controls it contains and add extra space between its bounds and the controls. Add the following to create a Frame.

    <StackLayout>
        <Label Text="Frame"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <Frame OutlineColor="Accent"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
            <Label Text="Frame Text" />
        </Frame>
   </StackLayout>

Frame
Figure 6: Frame

Navigation Page

This is technically not a Layout per se, but still a common way of structuring your page’s content. A Navigation Page works nicely when you want to provide a set of options from which to choose and each option navigates somewhere else. Here is how you would make a Navigation Page.

    <StackLayout>
        <Label Text="Navigation Page"
               FontSize="Large"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <StackLayout HorizontalOptions="Center">

            <Button Text="Page 1"
                    Font="Medium"
                    BorderWidth="1" />

            <Button Text="Page 2"
                    Font="Medium"
                    BorderWidth="1"
                    Clicked="EventHandler" />

            <Button Text="Page 3"
                    Font="Medium"
                    BorderWidth="1"
                    Clicked="OnButtonClicked" />

            <Button Text="Page 4"
                    Font="Medium"
                    BorderWidth="1"
                    StyleId="Style"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </StackLayout>

You host a StackLayout object inside a parent StackLayout object. Inside the child StackLayout, you host the buttons (for example) with their respective properties and event handlers. Figure 7 shows this code in action.

Navigation Page
Figure 7: Navigation Page

RelativeLayout

Xamarin.Forms RelativeLayout positions and sizes views relative to properties of the layout or sibling views (see Figure 8). RelativeLayout does not have the concept of the moving anchor and does not have facilities for positioning elements relative to the bottom or right edges of the layout as does AbsoluteLayout.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Text="RelativeLayout"
               Grid.Row="0"
               FontSize="30"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

        <RelativeLayout Grid.Row="1"
                        Margin="10">

            <Label x_Name="LabelCenter"
                   Text="Center"
                   RelativeLayout.XConstraint="{ConstraintExpression
                       Type=Constant,
                       Constant=0}"
                   RelativeLayout.YConstraint="{ConstraintExpression
                       Type=RelativeToParent,
                       Property=Height,
                       Factor=0.5,
                       Constant=-17}" />
            <Label x_Name="LabelAbove"
                   Text="Above"
                   RelativeLayout.XConstraint="{ConstraintExpression
                       Type=RelativeToView,
                       ElementName=LabelCenter,
                       Property=Width}"
                   RelativeLayout.YConstraint="{ConstraintExpression
                       Type=RelativeToView,
                       ElementName=LabelCenter,
                       Property=Y,
                       Constant=-34}" />
            <Label x_Name="LabelBelow"
                   Text="Below"
                   RelativeLayout.XConstraint="{ConstraintExpression
                       Type=RelativeToView,
                       ElementName=LabelCenter,
                       Property=Width}"
                   RelativeLayout.YConstraint="{ConstraintExpression
                       Type=RelativeToView,
                       ElementName=LabelCenter,
                       Property=Y,
                       Constant=34}" />
            <BoxView Color="Yellow"
                     RelativeLayout.XConstraint="{ConstraintExpression
                         Type=Constant,
                         Constant=0}"
                     RelativeLayout.YConstraint="{ConstraintExpression
                         Type=Constant,
                         Constant=0}" />
            <BoxView Color="Violet"
                     RelativeLayout.XConstraint="{ConstraintExpression
                         Type=RelativeToParent,
                         Property=Width,
                         Constant=-40}"
                     RelativeLayout.YConstraint="{ConstraintExpression
                         Type=Constant
                         Constant=0}" />

        </RelativeLayout>
    </Grid>

RelativeLayout
Figure 8: RelativeLayout

StackLayout

StackLayout organizes views in a stack, either horizontally or vertically. Objects (or Views) in a StackLayout can be sized based on the space in the layout using layout options (see Figure 9). Positioning of the views is determined by the order in which they were added to the layout. Add the following code:

    <StackLayout>
        <Label Text="StackLayout"
               FontSize="30"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <StackLayout Spacing="0"
                     VerticalOptions="FillAndExpand"
                     Margin="10">
            <Label Text="StackLayout"
                   HorizontalOptions="Start" />

            <Label Text="Center"
                   HorizontalOptions="Center" />

            <Label Text="End"
                   HorizontalOptions="End" />

            <Label Text="Start"
                   HorizontalOptions="Start" />

            <Label Text= "CenterAndExpand"
                   VerticalOptions="CenterAndExpand"
                   HorizontalOptions="End" />

            <StackLayout Spacing="0"
                         Orientation="Horizontal">

            </StackLayout>
        </StackLayout>
    </StackLayout>

StackLayout
Figure 9: StackLayout

You have been using StackLayout throughout this article. The preceding code segment just includes a few more options.

Conclusion

Mastering Xamarin.Forms Layouts is crucial in building beautiful interfaces. There are many more Layouts and Views which I will cover in my next installment. Until then, happy coding!

Hannes DuPreez
Hannes DuPreez
Ockert J. du Preez is a passionate coder and always willing to learn. He has written hundreds of developer articles over the years detailing his programming quests and adventures. He has written the following books: Visual Studio 2019 In-Depth (BpB Publications) JavaScript for Gurus (BpB Publications) He was the Technical Editor for Professional C++, 5th Edition (Wiley) He was a Microsoft Most Valuable Professional for .NET (2008–2017).

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read