Differences Between Container Controls

Containers are the building blocks for your app's layout and it is important to understand the various types of container controls and when to use them.

Container	Container Layout	Page Container
A single container which can hold controls and other containers within it Container	Container Layout helps you to build a complex layout with various sections ( containers). Container Layout	Page container can hosts another page in the current page Page Container
Grows based on the size of its contents	Has a fixed height. Width is grid based and will shrink and grow based on screen width	Grows based on the size of the nested page
Used to align a group of elements similarly Used to align a specific element different from that of other elements Nested containers are possible Nested containers are used if you want to align/position elements in the inner container differently from the outer one No limit of the number of nested containers. However, generally advised not to exceed 4 levels of nested containers for maintainability and performance	Used to create a layout (structure) for a page Not recommend to use within other containers/control other than page Using nested container layouts will lead to extra spaces and maintainability issues	Useful for reusing components in your app, eg: when you want to have a consistent header or consistent body across different pages of your app Helps in maintainability

Example on How to Align Controls Using Containers

The below example shows a simple form, where you want to collect the following information from the user - First Name, Last Name, Email & School. While Email & School input boxes can be one below the other, we wanted the First Name and Last Name available side by side. This can be accomplished by the following steps

• Add a new container
• Change the layout of the container to Horizontal

• Add the two text boxes within the container