The course is part of this learning path
Building a Xamarin Forms UI - Layout Containers is a practical deep dive into the basics of using Xamarin Forms to design and lay out a mobile app's user interface. Xamarin Forms offers several built-in layout frameworks for positioning UI elements on a screen. We look at four of the most common ones to see how they work and the pros and cons of using each. We start with StackLayout, then move on to AbsoluteLayout, Grid layout, and finish with RelativeLayout.
Xamarin forms applications use XAML, a declarative markup language, to define the user interface. XAML uses XML notation and can be likened to HTML. In Xamarin forms, a window or screen is specified with a content page defined in a single file. A content view is also defined in its own file and can be nested either within a content page or another content view. A content view is used to group UI elements and is a way to define custom UI controls. Content pages and views are made of two files. One contains the XAML UI definition, and the other, known as the code behind file, contains the C# code associated with the user interface elements. Pages and views can only have one root element.
Mobile device screens come in many sizes and can be rotated. Xamarin forms have several built-in layouts for arranging UI elements allowing maximum developer flexibility when designing the user interface.
Stack layout, the default layout type for boilerplate content pages and views, is a reactive layout type where UI elements are stacked vertically or horizontally, shrinking and expanding as the screen real estate allows.
Absolute layouts are defined using a coordinate system of X and Y for position and width and height for size. The position and size can be absolute pixel numbers, proportions of the UI element's parent, or a combination of both.
Grid layout is where the screen is divided into rows and columns, and UI elements are placed in a grid cell by specifying and row and column coordinates. Row and column indexes start at zero, and UI elements can span rows and columns. The grid is defined by specifying the row height for each row and column width for each column. Column widths and rows heights can be defined using pixel numbers or an asterisk. Asterisk mode sets the row height or column width to be the grid's height or width divided evenly by the number of rows or columns. The asterisk can then be multiplied by a number to size the row or column proportionally.
Relative layout positions and sizes UI elements by specifying constant or proportional relationships between the element's parent or another named control. A relative layout constraint, X, Y, width, or height, is defined with a constraint expression. A UI control's position and size can be defined using constant and proportional expressions relative to the parent and another control.
I have dealt with each layout type separately in this course, but you can combine and nest different layout types as needed.
My name is Hallam Webber, and I hope you've found this course informative and helpful. Please join me for the next Xamarin forms course, where we add navigational functionality to the app.
Hallam is a software architect with over 20 years experience across a wide range of industries. He began his software career as a Delphi/Interbase disciple but changed his allegiance to Microsoft with its deep and broad ecosystem. While Hallam has designed and crafted custom software utilizing web, mobile and desktop technologies, good quality reliable data is the key to a successful solution. The challenge of quickly turning data into useful information for digestion by humans and machines has led Hallam to specialize in database design and process automation. Showing customers how leverage new technology to change and improve their business processes is one of the key drivers keeping Hallam coming back to the keyboard.