In Universal Windows apps, XAML provides you with a flexible way to define your page layout by using panels, visual states, and different definitions for each device family to create good-looking, responsive UIs. We have already discussed responsive design techniques earlier in this chapter. So, let's start discussing layout patterns.

The XAML page layout pattern provides three levels of optimization techniques, which you can use to design your app screens:

• A fluid layout allows you to design your panels such that they can auto resize and position the children as per the available space. You can use Grid, Canvas, StackPanel, and RelativePanel to build such a fluid layout.
• An adaptive layout allows you to resize, reflow, reveal, or replace a part of your screen based on the window size. Visual states can be used to create an adaptive trigger to easily handle it.
• The tailored layout type allows you to optimize your screen for a specific device family or screen sizes. You can use a custom trigger and separate XAML files with a single or multiple code file for each device family to create a tailored layout.

In Chapter 3, Building Applications for Windows Using XAML Tools, we covered various XAML panels such as Grid, Canvas, StackPanel, and so on. So let's go to the next step and learn about RelativePanel and VariableSizedWrapGrid.