Build multi-device apps using adaptive triggers Source: MSDN

Universal Windows App Development Tools and Visual Studio 2015 help you target your UI to multiple devices in these ways:

• Universal controls and layout panels that optimize the UI based on the device they're running on
• A new VisualStateManager that dynamically applies changes based on the window size
• Tools to help you design a UI that can adapt to different screen sizes

This topic covers each of these techniques below, together with guidance and examples. Before you start, download and install Microsoft Visual Studio. Make sure that the Universal Windows App Development Tools are selected from the optional features list. Without these tools, you won't be able to create your Windows 10 universal apps.

Overview

The Universal Windows Platform supports several techniques to target an app to run across multiple devices. Here are the summaries of these techniques:

Technique	When to use
Fluid UI Using Controls and Layout to Adapt	This is the simplest approach and should be used by default when the UI design for your app is not overly complex
Responsive UI: Doing more with VisualStates and Adaptive Triggers	This works well where a small number of changes are needed against a single XAML file and code behind.
Tailored UX : Using MRT device families	Where more complex changes are needed you should consider using separate XAML files – these can be more fully tailored to the needs of specific device families.
Tailored UX : Using Multiple XAML files and Navigation	This approach is preferred where the implementation is also different for each device family supported.

This topic covers the first two techniques : Fluid and Responsive UI.

Build an Adaptive Universal Windows App

First create a Universal Windows project from Visual Studio.


Drag a CommandBar control from the toolbox into the designer.


Switch over to the XAML view and set your margins like this:

XML

Copy

 <Page.BottomAppBar>
        <CommandBar Height="50" Margin="0,0,0,0">
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

Now use the new device toolbar to view the page across a range of device sizes from the Windows Phone to the Surface Hub. This toolbar shows the physical size of device, its name (Phone etc), the advertised resolution (1920x1080), the orientation ( ) and a scale factor. This scale factor tells you how the effective resolution is calculated – so an Xbox with an advertised size of 1920x1080 and scale factor of 150% is actually 1280x720. This value is shown in the toolbar next to the device dropdown.

By viewing the designer at different sizes you can make sure your UI adapts correctly to the different sizes. In this case, you can check that you correctly anchored your command bar to the parent grid and cleared the margins. This is a simple example of applying our first technique: Fluid UI Using Controls and Layout to Adapt. For simple scenarios (such as a login page) this is sufficient – the layout mechanism will resize the child controls.
But, in the above example we now have a problem. The Windows Design guidelines suggest that for mobile devices, if you're placing just one command bar in your app, put it at the bottom of the screen for easy reachability. For larger screens, if you're placing just one command bar, we recommend placing it at the top of the screen. So how do you do this? Follow the steps in the next section.

Using Adaptive Triggers to build a Responsive UI

First, save your project. Right-click your project in Solution Explorer and choose Open in Blend. Blend for Visual Studio has some additional features for editing Visual States and Adaptive Triggers which you will need to make your page adapt. First switch the device toolbar to show desktop.

Note the effective resolution (1280 x 720) in the toolbar. We want to trigger the page to change when we reach this size. In order to do this we will create an adaptive trigger. From the View menu, choose States Window. Then add a Visual State Group.

Now add a visual state to that group. Click the add icon in the VisualStateGroup toolbar. Rename your visual state to Large1280. By naming states, it is easier to understand what each state does.

Click the lightning bolt icon next to your new visual state to add an adaptive trigger. The Adaptive trigger collection editor is now displayed. Next click Add to create an adaptive trigger.

Set the MinWindowWidth and MinWindowHeight fields to the size of the parent windows that will trigger the state. These are based on the effective resolution, so you must use the effective size. Set the MinWindowWidth trigger to 1280 – this means that the state you are creating will be triggered when the parent window is bigger than 1280.

Click OK, and now return to the designer. Note that the designer is showing a red highlight to tell you that you are in record mode – so any changes you make to the designer will be recorded into the new visual state which you have just created.
Now set the CommandBar to be collapsed like this:

Now switch to the XAML view and you should see this:

XML

Copy

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Large1280">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1280"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MyCommandBar.(UIElement.Visibility)" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>

To test this, use the device toolbar and change the device sizes. Note that the commandbar visibility changes between phone and desktop. You can also build the app and pick a different emulator and see the XAML respond to the different sizes.
To finish the scenario, you need to now create a commandbar for the top of the page. Add the following to your XAML:

XML

Copy

 <Page.TopAppBar>
        <CommandBar x:Name="topCommandBar" Height="50" Margin="0,0,0,0">
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.TopAppBar>

Now we want to hide this by default, so set its visibility to be collapsed. Now to show it again we will edit the adaptive trigger we just created in the state pane – select the trigger, and enter record mode. Now set the top command bar visibility field to visible.
Use the device preview to switch between different size devices to test your UI. Notice that the state pane shows if the adaptive trigger is activated by placing an eyeball next to it.
Finally, build and run the app. Resize it dynamically on your desktop and you can see the triggers fire correctly. For a mobile device they are at the bottom of the screen; for a larger desktop they are at the top.

Next Steps: Targeting different devices from a Universal Windows App

With visual states and adaptive triggers, you target a universal experience by doing more purposeful sizing and positioning of UI elements to make the app adapt.
In these scenarios controls may be moved around and hidden using the VisualStateManager which can trigger on different window sizes. This means that your universal app projects no longer require separate project heads or UI definitions for small and large windows.
Adaptive visual states allow you to change the visual state in response to changes in the width of the window based on MinWindowWidth and MinWindowHeight. The chart below shows the breakpoints that are commonly used to target phone, tablet, and desktop devices.


Here are the values for each device for a Universal Windows app:

Adaptive trigger	What is targeted
<AdaptiveTrigger MinWindowWidth="320"/>	Phone
<AdaptiveTrigger MinWindowWidth="720"/>	Tablet
<AdaptiveTrigger MinWindowWidth="1024"/>	Desktop
<AdaptiveTrigger MinWindowWidth="1280"/>	XBox
<AdaptiveTrigger MinWindowWidth="1920"/>	Surface Hub