Set Specific DeviceFamily XAML Views In Windows 10 UWP

The new Universal Windows Platform introduced a new feature DeviceFamily specific views(UI) which allows developers to define specific XAML page for specific device families (Desktop, Mobile.etc).

If we want to have different view for different device families. There are three ways to set specific device family XAML view.

Let's see the steps

First one, Using DeviceFamily-Type folder

Create new windows 10 blank project and give a suitable name.

This method is the most common way to perform this task. Create a new folder in your project, called “DeviceFamily-Type”. The type is the name of the device family type (Mobile, Team, Desktop, IoT).

So in our sample I have created mobile specific view and it looks like the following screen,



In our sample we will create a new folder called DeviceFamily-Mobile for specific view on mobile device.

Let us take the MainPage.XAML in the project, with blue background we want this specific XAML view for a mobile device family.

The next step would be adding a XAML view called the same as the page so in this case, MainPage.xaml will be added into the folder DeviceFamily-Mobile and looks like the following,



This MainPage.XAML won't have any code-behind, it will use the code-behind of the main MainPage.xaml.cs file.

Now run the app on a mobile device it will load the XAML from DeviceFamily-Mobile/MainPage.xaml. For any other device family type, it will load the MainPage.xaml from the main folder.

Change the grid background colour to green like the following,

<Grid Background="Green">
</Grid>

Second one is DeviceFamily-Type in file name.

The second method to perform the same thing is to create a new XAML View with again the same name, but with DeviceFamily-Type extension in our MainPage, it would mean adding a new XAML view file called MainPage.DeviceFamily-Mobile.xaml to the main folder. Here's the screenshot,



Depending on the device family, one of the two XAML files will get loaded.

Now run the app in desktop and mobile and see the output looks like the following screen,

Mobile view



Desktop view