Responsive styling in Xamarin.Forms

PieterjanDeClippelPieterjanDeClippel USMember ✭✭
edited January 17 in Xamarin.Forms

Hi,

I'm looking for a way to make my XF app responsive.
It would be nice if I could just use some BootstrapCSS alike system so that on a small screen all elements are positioned below one another and on a wide screen the elements would be wrapped in 2 columns.
I've already searched for this and read posts about how to do this using the Grid, but that seems a little messy by maniplulating grid columns from page code-behind.

Approach using StackLayout
https://blog.xamarin.com/adaptive-ui-xamarin-forms/

Documentation
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/index
But there doesn't seem to be a device-width selector.

I also know about using CSS but it might be a little late to implement this in my app.
I've also considered using Device.Idiom, but than again you have to use this in code-behind.

This is another interesting article but I don't know if this is easy to implement:
https://blog.xamarin.com/adaptive-mobile-designs-with-flexlayout/#adaptingtotabletlayout

Also in android you can define multiple versions of a layout, depending on device-width, resolution, orientation, ...
For xaml pages this is off course not quite possible...

What is the best way of dealing with this?

Tagged:

Best Answer

Answers

Sign In or Register to comment.