Develop Different UI For Different Device Family In UWP

In this article I've tried to cover most of all the possible ways to develop different UI for different device families while making apps for Windows 10 UWP. There are couple of ways and we'll elaborate each of those possibilities here.

Using <VisualStateManager> in XAML

This method is more useful when the UI differences between a Windows phone and the desktop (other bigger devices) are not major. Because if the UI of the phone and desktop are entirely different then the code in the XAML file will be more complex and will be hard to maintain for future changes.

Let's take a simple example to understand this. In our project we have a page named MainPage. And in that we took a TextBlock to display the device name.

Here in VisualStateManager we're using AdaptiveTrigger for the app's  minimum windows width and through that we're judging if the app is running on phone or desktop.

Take a look at the code of our MainPage.xaml file.

<Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="visualStateMobile">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="tb.Text" Value="Mobile App" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="visualStateDesktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="tb.Text" Value="Desktop App" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <TextBlock x:Name="tb" Text="Desktop App" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

VisualStateManager must always be put on the root grid of any specific page. Here's the output of running this page in desktop and phone.

Using DeviceFamily-Type Folder for each DeviceFamily

To makea  completely different UI for phone and desktop, you can use different XAML views for different DeviceFamily.

For that first of all create a folder in your project and name it as "DeviceFamily-type" here type is the DeviceFamily type you're making the design for i.e. Mobile, Desktop, IoT, Team etc.

To understand this way of creating UI we're going to build a sample in which the mobile UI will be majorly different then Desktop UI.

In UWP if any app is providing "Options," or say "Menu," then the place of that menu should be according to the device on which the app is running.

For example if the app is running on Windows phone then the menu should be in the bottom app bar. And if the app is running on a bigger device like a desktop or tablet then the menu should be in the SplitView Pane (Hamburger Menu). We'll build a sample for that.

• Add a page named "MyPage.xaml" in your project which represents the default Page.
  
  
• And then add one "XAML View" with the same name but this time add it to the folder we've created "DeviceFamily-Mobile". Remember here in the DeviceFamily-Mobile folder we're adding a "XAML View" instead of "Page".
  
  
• So what happens here when the App is running on the Mobile Devices, It will show the XAML view UI from the "DeviceFamily-Mobile" folder and it'll share the Code behind of MyPage.xaml.cs Page we've added in the Project.

Code of MyPage.xaml View -> for Mobile view,

<Page>
  x:Class="SampleApp.MyPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:SampleApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton x:Name="appbarBtnHome" Icon="Home" Label="Home" Click="appbarBtnHome_Click" />
            <AppBarButton x:Name="appbarBtnSettings" Label="Settings" Icon="Setting" Click="appbarBtnSettings_Click" />
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Name="appbarBtnAbout" Label="About" Icon="Import" />
                <AppBarButton x:Name="appbarBtnFeedback" Label="Feedback" Icon="Mail" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Mobile App" FontSize="26" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Page>

Code of MyPage.xaml Page -> for Desktop,

<Page>
    x:Class="SampleApp.MyPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:SampleApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <RelativePanel Background="#FFDEDEDE">
            <Button x:Name="btnHamburger" Content="" FontSize="36" FontFamily="Segoe MDL2 Assets" RelativePanel.AlignLeftWithPanel="True" Click="btnHamburger_Click" />
            <TextBlock Text="Desktop App" FontSize="26" RelativePanel.RightOf="btnHamburger" Margin="12 0 0 0" RelativePanel.AlignVerticalCenterWithPanel="True" />
        </RelativePanel>
        <SplitView x:Name="splitView" Grid.Row="1" OpenPaneLength="200">
            <SplitView.Pane>
                <ListView>
                    <TextBlock Text="Home" FontSize="22" />
                    <TextBlock Text="Settings" FontSize="22" />
                    <TextBlock Text="Feedback" FontSize="22" />
                    <TextBlock Text="About" FontSize="22" />
                </ListView>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Text="This is Content" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" />
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

Code for shared MyPage.xaml.cs file,

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace SampleApp
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MyPage: Page
    {
        public MyPage()
        {
            this.InitializeComponent();
        }
        private void btnHamburger_Click(object sender, RoutedEventArgs e)
        {
            splitView.IsPaneOpen = !splitView.IsPaneOpen;
        }
        private void appbarBtnHome_Click(object sender, RoutedEventArgs e) {}
        private void appbarBtnSettings_Click(object sender, RoutedEventArgs e) {}
    }
}

Now try running the app on desktop and mobile --  you'll get BottomAppBar in Mobile and a Hamburger Menu in Desktop or Tablet.

Naming the Page file with extension ".DeviceFamily-Type"

This way is more similar to the previous one. Previously we've added a folder with the naming convention "DeviceFamily-Type" and put device specific UI views in there. And here instead of adding a folder for each DeviceFamily, we're going to rename the XAML View File with that same naming convention.

For example if we want to achieve the same thing as discussed inthe previous example, then first we'll add a Page with the Name "MyPage.xaml" which includes code behind as well and will act as Default View. Now we'll add one XAML View in the project folder itself and name it as "MyPage.DeviceFamily-Mobile.xaml" for Mobile UI. Also in this way the XAML View will share the code behind with the page we've added.

Now copy and paste the code we wrote in the MyPage.xaml view in previous example. You'll get the same result.

Note:

Here if you combine both ways you'll add a folder named "DeviceFamily-Mobile" and add the XAML view MyPage.xaml in that folder with that you'll also add another xaml view named "MyPage.DeviceFamily-Mobile.xaml" in the project's root folder, then the compiler will fire an exception and your app will crash. So make sure you incorporate only one of these methods.

InitializeComponent Overload Method

This way is one of the least known conceps about making DeviceSpecific UI. But believe me this is the most amazing way because it's so flexible that you can make even two UI for same page and same DeviceFamily. Let's explore this with an example.

Have you noticed as soon as you add new XAML view in DeviceFamily-Type folder or by creating new XAML view with extension of ".DeviceFamily-Type," you'll get one overloaded method of "InitializeComponent" in MyPage.g.i.cs file auto generated by Compiler.

We can use that overloaded InitializeComponent method to show different UI for same page and even for same DeviceFamily.

Check below code written in the Page's constructor to do that.

bool showDefaultView = true; // to see another view change it's value to 'false'
public MyPage()
{
    // In below if condition we're checking wheather the app is running on Phone or desktop
    // to do that you can also use this condtion check
    // -----if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile")-----
    if (ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        if (showDefaultView)
        {
            InitializeComponent(new Uri("ms-appx:///MyPage.xaml", UriKind.Absolute));
        } else
        {
            InitializeComponent(new Uri("ms-appx:///MyPageAnother.xaml", UriKind.Absolute));
        }
    }
    this.InitializeComponent();
}

Here I've already added two pages as shown in this image,

Output will look like this:

Conclusion:

So there are mainly four ways to customize the UI according to the DeviceFamily,

• using <VisualStateManager>.
• Creating DeviceFamily specific folder with naming convention: "DeviceFamily-Type" and add XAML Views into it.
• Creating XAML views with naming convention as "FileName.DeviceFamily-Type.xaml".
• Using InitializeComponent Overloaded method.

I've tried to combine as many things as possible to make it a one stop solution for DeviceSpecific UI creation. If you guys have anything to add, please comment.

 

Read more articles on Universal Windows Platform:

• Create Your First Universal Windows App
• Develop Windows 10 App Using JavaScript