Tailored views or one more way to create Universal interfaces

If you visit what's new for developers in Windows 10 page you can see the following sentence there:

“XAML provides new support for defining tailored views (.xaml files) that share the same code file.”

Of course this feature can be very useful because in some cases it’s not easy to create really universal pages. For example, you can adopt all controls but you need to remember that phone users usually use just one hand to work with applications. So, you need to adopt not just layout but user experience as well.

That’s why I tried to investigate what this sentence means. Looks like this feature is still in development and you will not find any docs about it but you already can test existing implementation.

In current version of UWP you already can create separate XAML for desktop and mobile pages. In order to do it you need to add a new XAML View to your project.

You can see that XAML Veiw template will create XAML page only without code behind file. Of course, it’s not enough and in order to associate a new view with page by default you need to select one of the two approaches:

  • You can place the view to the same folder with the initial page and you need to call the view using the name of the initial page and add a prefix. I discovered two prefixes right now – DeviceFamily-Mobile and DeviceFamily-Desktop. I didn’t have a chance to test Xbox and I found that DeviceFamaly-IoT doesn’t work (and, probably, should not);
  • You can use the same name for the view which has the page by default but you need to place the view to the special folder - DeviceFamily-Mobile or DeviceFamily-Desktop;

That’s all. If you run our application on the phone and you will have a view under DeviceFamily-Mobile rule then the view will be applied but if you didn’t implement a new view around DeviceFamily-Mobile then XAML by default will be applied. The same things work for desktop.

Pay special attention that it’s in preview now and even no docs have been published.