Responsive Layout in Xamarin.Forms

xamarin.forms responsive

Make your Xamarin.Forms layout responsive.

Hi everyone, I’m sure most of you reading this have already felt the need of making your Xamarin.Forms application adapt according to screen sizes on various devices like tablet, or most especially when your app is running on a PC with UWP. Well, I’m sure this is very common especially for those who care a lot about the beauty of the front end side of their app.

Thanks to the simplicity of Xamarin.Forms and Xaml, accomplishing this is not complicated at all. I was going through the demo application built by Microsoft for connect 2017 which took place on November. Here is the app. It has a lot of features for every .Net developer (Front end and Back end), who are willing to learn from a high quality app ready for a production. I saw this little trick to adjust the layout when screen size changes.

Sign up to stay updated for any new post

[zc4wp_za2]

Adjusting the layout.

Since this is just a small demo, I think it can easily be accomplished by anyone without necessarily having a demo code to help. If this is not the case, check the link above for the demo app I mentioned.

Let’s say you have an application with a Xaml page and controls in a container like the Grid, what you should do in subscribe to size changes events from your page and adjust controls in the grid, and the control visibility when ever this size changes. Check the layout below.

<ContentPage.Content>
        <Grid x:Name="MainGrid" Color="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <BoxView x:Name="Box1" Color="Blue" WidthRequest="700"
                     Grid.ColumnSpan="2" Grid.Column="0" 
                     HorizontalOptions="CenterAndExpand"/>
            <BoxView x:Name="Box2" Color="Red" WidthRequest="300"
                     Grid.Column="1" HorizontalOptions="CenterAndExpand"/>

        </Grid>
    </ContentPage.Content>

<ContentPage.Content>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<BoxView x:Name="Box1" Color="Blue" WidthRequest="700"

Grid.ColumnSpan="2" Grid.Column="0"

HorizontalOptions="CenterAndExpand"/>

<BoxView x:Name="Box2" Color="Red" WidthRequest="300"

Grid.Column="1" HorizontalOptions="CenterAndExpand"/>

</Grid>

</ContentPage.Content>

Here is the demo content for the page. Look at the the box views the first one is wider than the second and spans 2 colums. This makes the second box to hide its self when the screen size is small.

Let us look at the code behind where the trick is found.

public partial class TestPage : ContentPage
    {
        private const double MinWidth = 720;

        public TestPage ()
    {
      InitializeComponent ();
    }


        protected override void OnAppearing()
        {
            this.SizeChanged += Page_SizeChanged;
            base.OnAppearing();
        }

        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            AdaptLayout();
        }

        private void Page_SizeChanged(object sender, EventArgs e)
        {
            AdaptLayout();
        }

        private void AdaptLayout()
        {
            if (Width < MinWidth)
            {
                Box2.IsVisible = false;
                Grid.SetColumnSpan(Box1, 2);
            }
            else
            {
                Box2.IsVisible = true;
                Grid.SetColumnSpan(Box1, 1);
            }
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            this.SizeChanged -= Page_SizeChanged;
        }

    }

public partial class TestPage : ContentPage

{

private const double MinWidth = 720;

public TestPage ()

{

InitializeComponent ();

}

protected override void OnAppearing()

{

this.SizeChanged += Page_SizeChanged;

base.OnAppearing();

}

protected override void OnSizeAllocated(double width, double height)

{

base.OnSizeAllocated(width, height);

AdaptLayout();

}

private void Page_SizeChanged(object sender, EventArgs e)

{

AdaptLayout();

}

private void AdaptLayout()

{

if (Width < MinWidth)

{

Box2.IsVisible = false;

Grid.SetColumnSpan(Box1, 2);

}

else

{

Box2.IsVisible = true;

Grid.SetColumnSpan(Box1, 1);

}

protected override void OnDisappearing()

{

base.OnDisappearing();

this.SizeChanged -= Page_SizeChanged;

}

We set the minimum width at which the page changes at 720 pixels. We subscribe to the size change event of the page. When the page’s size is allocated or when the page’s size changes we adapt the layout. Make the second box visible or not, and make the first box to span one or two columns accordingly.

With this simple ad short demo, I think making a layout which is more responsive will be easy from here. I sincerely hope this post helps anyone reading it anywhere in the world.

If you liked this post, or it was useful to you, please like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.

Build a beautiful high quality apps with reactive ui and Xamarin.Forms get started here.

Sign up to stay updated for any new post

[zc4wp_za2]

Follow me on social media and stay updated

2 comments

Mirco Støpke
January 22, 2023
The Propertyname for the (Background)color of a BoxView is just Color, not BackgroundColor.
Better edit this, because it confuses the viewer, who types your code 🙂
Loading...
- Damien Doumer
  January 28, 2023
  This post dates back to several years, manythings must have changed in Xamarin.Forms, Thanks for the suggestion I’ll verify and edit.
  Loading...