Search code examples
xamarinlayoutxamarin.formsgrid-layout

Xamarin.Forms Universal App 2 Column Layout independent of device size

I am very new to Xamarin.Forms to create universal app. Actually I have to migrate a large native app to Xamarin.Forms technology.

I have to create a two column layout (e.g. Registration Page) which is independent of device size.

I am trying to achieve the same using RelativeLayout. Code for the same is below:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage">
    <ContentPage.Content>
        <RelativeLayout>
            <StackLayout x:Name="mainLayout" BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=0}">
                <RelativeLayout>
                    <BoxView x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.48, Constant=0}"
                    />
                    <BoxView BackgroundColor="Green" HeightRequest="30"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=10}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Y, Factor=1, Constant=0}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=0}"
                    />
                </RelativeLayout>

            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

result of the above code

Please suggest is this the correct way to achieve two column layout or is there any other correct way.

Solution

  • Use a grid. Grids can have as many columns or rows as you need, and you can size them to their contents, or to the available space. In your case you can have a gird with two star sized columns - this gives two columns of equal width that fill the available space, essentially two columns each half the width of the screen.

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage">
    <ContentPage.Content>
        <Grid BackgroundColor="Maroon">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="0" x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"/>
            <BoxView Grid.Column="1" BackgroundColor="Green" HeightRequest="30"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

    You can read about the different grid sizes here:

    https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/