Three ways to display different XAML for device sequences in WINDOWS10-UWP [3]

Read the catalogue:

1. Overview
2. Devicefamily-type folder
3. Devicefamily-type extension
4. InitializeComponent overloading
5. Conclusion

Overview

WINDOWS10-UWP (Universal Windows Platform) Adds a new feature device sequence (devicefamily)-specific view that allows the developer to define the specified XAML display for the specified device sequence (Desktop, Mobile , tablet, IoT, and so on). It is useful if you want to display more than one UI for different device sequences. Of course, the use of Relativepanel, visualstatetriggers is also very useful. But if your UI is very different, the XAML code becomes bloated. You can then use a full XAML page alone, and then share the background logic code with other XAML pages.

There are three ways to set a specific XAML view for a device sequence. The following is a simple mainpage page to describe, using a blue background and some text, when you want to use a different background and different text, to set the specified XAML view for the mobile device sequence.

<Pagex:class= "Devicefamily.mainpage"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local= "Using:devicefamily"xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"XMLNS:MC= "http://schemas.openxmlformats.org/markup-compatibility/2006"mc:ignorable= "D"><GridBackground= "Blue">    <TextBlockForeground= "White"Text= "This is desktop."FontSize= " the"VerticalAlignment= "Center"HorizontalAlignment= "Center" /></Grid> 

Assuming there is a very complex layout, we want to make a new layout for the mobile device sequence. :)

Devicefamily-type folder

Most ways to implement a new layout are to specify a new folder in the project, called Devicefamily-type, whose type represents the name of the device sequence type, such as Devicefamily-mobile, or replaced with team, Desktop, and IoT. In the case of appeal, you should create a folder called Devicefamily-mobile.

The next step is to add a XAML view called the same name (as in the example MainPage.xaml).

This file cannot have back-end code, it and desktop share the MainPage.xaml.cs backend code.

So if you run the app on a mobile device (here with the emulator), it will load the interface you want to use from Devicefamily-mobile/mainpage.xaml.

This definition of a new view is the most used. Other blogs also have many introductions, such as this one, creating a devicefamily specified layout in the UWP (Creating devicefamily specific layouts in a Universal App.)

Devicefamily-type extension

The second way you can achieve the same effect by creating a new XAML view, using the same name, but Devicefamily-type is extended. Like the mainpage page, it means adding a new XAML view file called Mainpage.devicefamily-mobile.xaml, which is placed in the same folder as MainPage.

Note If you use both Method 1 and Method 2, there is a compilation error:

Error processing Resources failed with Error:duplicate Entry.

As above, MainPage will load one of the 2 XAML files according to your device sequence.

InitializeComponent overloading

Interestingly, when you add a specified view to the Devicefamily-type folder and compile, the compiler generates a new InitializeComponent overload in Mainpage.g.i.cs.

 Public voidInitializeComponent (Global:: System.Uri resourcelocator) {if(_contentloaded)return; _contentloaded=true;if(Resourcelocator <mark>NULL) {Resourcelocator=New Global:: System.Uri ("Ms-appx:///mainpage.xaml");}Global:: Windows.UI.Xaml.Application.LoadComponent ( This, Resourcelocator,Global:: Windows.UI.Xaml.Controls.Primitives.ComponentResourceLocation.Application);}

This method takes a URL parameter, so you can explicitly specify the XAML view you want. If you do not specify any page, it will use the default page. For example, you have a major and minor mainpage view:

You can use any logic in the page constructor to decide which page layout you want to use.

 PublicMainPage () {if(AnalyticsInfo.VersionInfo.DeviceFamily </mark>"Windows.mobile")    {        if(useprimary) {InitializeComponent (NewUri ("Ms-appx:///primarymainpage.xaml", Urikind.absolute)); }        Else{InitializeComponent (NewUri ("Ms-appx:///secondarymainpage.xaml", Urikind.absolute)); }    }    Else{InitializeComponent (); }}

Let's look at the effect of using devicefamily to specify the view, first the mainpage.xaml of the desktop.

If you use the simple Way 1 and Mode 2, for the mobile device sequence arbitrary selection of a mainpage.xaml to interact (with a simple different background and text to distinguish)

The emulator then loads the XAML view:

If you add a fixed primary/secondary mobile view using mode 3, then the results (depending on which view you use in your InitializeComponent) are as follows:

Supplemental-single page internal status trigger

This article is about creating a multi-page XAML view. State triggers are still useful if you want to modify some of the display in a single-page XAML view based on Devicefamily. Using a status trigger is very simple, you can write your own trigger, or you can use an existing Windowsstatetriggers class library.

Windowsstatetriggers devicefamily Sample

Conclusion

devicefamily XAML view features are a great way to create different pages for different device sequences. It avoids the hassle of defining these types of devices in a large XAML page, allowing us to design apps for a variety of device sequences. Another good thing is that there are multiple ways to handle different UIs, and even manually reload InitializeComponent to implement them.

Full code on GitHub

Translated from: http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/

Three ways to display different XAML for device sequences in WINDOWS10-UWP [3]