Developing an Adaptive Layout in UWP and Windows 10

Developing a great adaptive layout has changed a bit for .NET developers since the launch of UWP and Windows 10. Let's look at best practices for creating a flexible, responsive app in XAML and UWP. In Windows 8, a Universal Application could be displayed in one of the four states: full, filled, portrait or snapped. To reflect all these states in your application, you'd handle the Window.SizeChanged event and use VisualStateManager to switch visual states defined in your XAML. By contrast, Windows 10 application windows can be re-sized, as in any desktop application. Also, your Windows 10 app can run on devices of different form factors, so you need more flexible ways to handle it. UWP platform gives you a good set of new features for adaptive layout. In most cases, you don't need any code-behind—almost everything can be done from XAML.

Defining Adaptive Layout

In this example, we'll look at Scheduler for UWP (C1Scheduler), and show how the application layout can be changed to handle different screen sizes. First, I wanted to make my application similar to Windows 10 Calendar app, something like this: A wide-layout Windows 10 Calendar app All buttons for switching C1Scheduler views and import/export appointments are placed over the empty area near the C1Scheduler navigation UI. It's perfect for big screens, as it gives more space to show individual days and appointments. But if the end user resizes the application to a smaller width, both C1Scheduler navigation UI and buttons don't fit into screen. For such cases, we'll place the buttons above the C1Scheduler controls, so that it looks more like the toolbar in desktop applications: A medium-width Windows 10 calendar app If the application window is very narrow, or running on a mobile device, there's probably no need to run Week views. To properly show appointments, let's show no more than one day at a time. For such case, we can hide some buttons; then we'll add two more buttons to the bottom app bar for quick navigation and switching between Month and Day views: Mobile layout for the calendar app We've designed three layouts. Let's see how to implement this.

Use Adaptive Triggers

We can handle all three layouts with adaptive triggers dependent on window width. Here are the widths we'll be working with:

• 1024px or more: Wide layout
• Between 540px and 1024px: Medium layout
• Smaller than 540px: Narrow layout

Coding the Wide Desktop Layout

I placed C1Scheduler control and StackPanel with buttons into a grid with two rows. The first row has Height Auto, so if we don't place anything into it, it won't take any screen space. For default wide cases, we need to place StackPanel with buttons over the C1Scheduler control, and both elements into the bottom grid row:

The adaptive trigger for wide layout uses MinWindowWidth 1024, and doesn't use any setters, as it's the default case. It should display exactly as defined in XAML.

Coding the Medium Tablet Layout

For the medium case, we'll use MinWindowWidth 540. We'll move the StackPanel with buttons to the top grid row:

You can play with it; maybe it's worth changing toolsPanel HorizontalAlignment to Left here.

Coding the Narrow Mobile Layout

For the narrow case, we'll also place toolsPanel into the top grid row. And in addition to this, let's hide the buttons for Week and Work Week views.

The attached sample also defines app bar buttons for quick navigation. You'll see that they're visible in the narrow layout. On a desktop application, it's additional overhead, but it looks really native if you run this application on mobile device: A native look for mobile layout That's it. You can find full source code and XAML in DefaultView page in attached sample: ScheduleSamples.

To run the sample you'll need to download and install our UWP Edition.

Learn more about C1Studio UWP Edition