Join Mark Smith for an in-depth discussion in this video Layout in Xamarin.Forms, part of Introduction to Xamarin.Forms.
- [Narrator] You might have noticed that the content page only allowed for a single piece of content to be displayed. It must be a view such as one of the controls we looked at in a previous video. If you want to display multiple views on a page, you must use a layout container. In Xamarin.Forms, much like in Android and WPF and Silverlight, we manage layout with different layout containers, selecting the container based on how we want the content to be organized visually.
You add child views into the layout containers and it will then organize that content based on the type of container you use. Rather than specifying positions with coordinates, you use layout containers to control how views are positioned relative to each other. This provides for a more adaptive layout which is not as sensitive to dimensions and resolutions. Xamarin.Forms ships with several layout containers, each of which enforces a specific style on all child views you add to them.
Let's take a look at those containers now. StackLayout is one of the most common layout containers you will use. It organizes content in one of two ways: top to bottom or vertically, and left to right or horizontally. You can control this through the orientation property. The orientation of a stack layout is set to be vertical by default. When you set the property to horizontal, it will stack the views left to right.
AbsoluteLayout provides pixel positioning where you define the exact placement of each child. This is similar to the Android container with the same name and the canvas panel in WPF and Silverlight. This is also the container closest to how you would program in iOS. This container has a feature that XAML does not. It supports proportional positions and sizes. RelativeLayout allows you to define the position and size for each child using relationships based on the container.
The position and size are calculated at runtime using delegates that the code must supply in the form of constraints. These constraints can be fixed values, dynamically calculated values, relative to the container or relative to the sibling. A Grid container organizes its children in a table format, similar to the HTML table, except this is strictly for layout purposes. WPF and Android also have this container style. ScrollView provides a scrollable container.
If the single piece of content added to the ScrollView is larger than the viewable surface, then the ScrollView provides touch-based scrolling in the horizontal or vertical directions, or both. To add or remove views to a layout container, you insert and remove them from the children collection. This is a property exposed by each layout container. You can add or remove views at runtime to dynamically change how the UI appears. The order the views appear in the collection determines the order they are drawn and appear on the screen.
This is particularly important with containers that allow for overlapping views, such as Grid, RelativeLayout, and AbsoluteLayout, as it determines which view is on top. The child elements can request specific sizing and spacing when hosted in a managed layout container. These are actual properties defined on the control, the layout container, or the page itself. Vertical options and horizontal options determine how child content is stretched or positioned.
It can be used on any view type, but most often is set on layout containers. Spacing is used with the stack layout container. It adds spacing between child elements and is rendered in the platform measurement system. Padding can be added to any page type. It adds padding around each element. In a similar fashion, controls can request a specific width or height, or a minimum width or height using properties on the view base class.
Width request and height request request a specific width and height for the element. These will override the measured size of the element. Minimum width request and minimum height request request a minimum width and height. Views can be made larger to fit the content if necessary. Most of the layout containers respect these properties. In fact, for unmanaged containers, you must supply a width or height request, or the control may not be rendered. You cannot set width or height properties directly.
They will just report the actual or final width and height. Bounds is similar to the iOs frame property. It reports the position of an element relative to the parent.
This course was created by Xamarin University. We are honored to host this training in our library.