'What is the best approach to dealing with having major runtime UI layout changes

What is the best approach to dealing with having major UI layout changes in a single page? Something similar to how a Zoom/Google Meets UI changes when someone starts presenting - with the added complexity of having landscape and portrait mode.

My approach has been to do everything in the the code behind. Then I can keep track of state and then redo the layout whenever the state changes. I have 4 states:

  • Landscape Video Mode
  • Portrait Video Mode
  • Landscape Presentation Mode
  • Portrait Presentation Mode

Between each UI state change I do the following:

MainGrid.Children.Remove(ControlMenu);
MainGrid.Children.Remove(RemoteVideoContainer);
MainGrid.Children.Remove(LocalVideoContainer);
MainGrid.Children.Remove(CallControls);
//etc - there a lot more component here.            

MainGrid.RowDefinitions.Clear();
MainGrid.ColumnDefinitions.Clear();

Then I redefine the Row and Columns for the new layout and add the components to the correct place.

This approach is really clunky and makes it really hard to maintain and tweak the layout. Surely there is a better way to do this?

xamlxamarinxamarin.forms


Solution 1:[1]

Yes, it is important to consider how our application will be used and how landscape orientation can be incorporated to improve the user experience. And individual layouts can be designed to accommodate multiple orientations and best use the available space.

It is possible to design interfaces using the built-in layouts so that they transition gracefully when the device is rotated. And we usually consider the following general rules:

  • Pay attention to ratios – changes in orientation can cause problems when certain assumptions are made with regards to ratios. For example, a view that would have plenty of space in 1/3 of the vertical space of a screen in portrait may not fit into 1/3 of the vertical space in landscape.
  • Be careful with absolute values – absolute (pixel) values that make sense in portrait may not make sense in landscape. When absolute values are necessary, use nested layouts to isolate their impact. For example, it would be reasonable to use absolute values in a TableView ItemTemplate when the item template has a guaranteed uniform height.

The above rules also apply when implementing interfaces for multiple screen sizes and are generally considered best-practice.

We can use responsive layouts using each of the primary layouts(e.g. StackLayout,RelativeLayout ,Grid) in Xamarin.Forms.

So, we can use other different layout(e.g. StackLayout,RelativeLayout) than the grid. In this condition,you don't have to re-define the Rows and Columns for the new layout.

For more, you can check official document Device Orientation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jessie Zhang -MSFT

Related Questions