Microsoft Ignite 2016 6/19/2018 2:35 AM Optimising Universal Windows Platform Applications for a Multitude of Devices and Screens NET331 Nick Randolph – Built to Roam © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What is a ‘great user experience’ ? 6/19/2018 2:35 AM What is a ‘great user experience’ ? © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Intuitive and effective Layout is clean and effective Usage is intuitive Adapts well to different screen sizes and displays Adapts to user input method …and beautiful Uses animations effectively Pleasing to the eye

How to build a great user experience Microsoft Ignite 2016 6/19/2018 2:35 AM How to build a great user experience Good Design Intelligent Controls Responsive UI Tailoring for platform © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Building Multi-Platform Apps 6/19/2018 2:35 AM Building Multi-Platform Apps © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Brief History of … Windows Desktop/Tablet, Phone Windows Mobile Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP XPlatform Brief History of … Desktop/Tablet, Phone Windows Mobile Windows 8 MacOS iOS Windows 10 Xbox 360 Windows Hololens/VR PocketPC Surface Hub Windows Phone Android Continuum XboxOne Watch © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

How We Built Windows Apps Microsoft Ignite 2016 6/19/2018 2:35 AM How We Built Windows Apps Technology: Windows Forms or WPF Architecture: 2-tier, 3-tier at best Design: Utilitarian based on Windows theme Windows 9x (lots of grey)  Windows XP © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Sharing Code and Reusing Experiences Windows Microsoft Ignite 2016 PocketPC 6/19/2018 2:35 AM Sharing Code and Reusing Experiences Binary compatibility Share files between projects Compiler directives Portable class libraries Shared projects Device family UX - specific XAML files .NET Standard libraries © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Code Management for Multi-Platform Apps Microsoft Ignite 2016 6/19/2018 2:35 AM Demo Code Management for Multi-Platform Apps © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

The Basics of Visual States Windows Microsoft Ignite 2016 PocketPC Phone 6/19/2018 2:35 AM The Basics of Visual States Use visual states to define controls/page states Often used to define workflow © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Visual States 101 Microsoft Ignite 2016 6/19/2018 2:35 AM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Basic Input Keyboard + Mouse Accelerator keys Focus v's selected item Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Basic Input Keyboard + Mouse Accelerator keys Focus v's selected item Touch © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Accelerator Keys and Focus State Microsoft Ignite 2016 6/19/2018 2:35 AM Demo Accelerator Keys and Focus State © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Form Factors Physical size v’s Resolution Viewing distance 360 x 640 Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 Form Factors Physical size v’s Resolution Viewing distance 360 x 640 1366 x 768 1920 x 1080 1024 x 640 1’ 10’ Standard Device Resolutions © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Visual States with Triggers Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 Visual States with Triggers Screen size Device family …and more… https://github.com/dotMorten/WindowsStateTriggers © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Triggering Visual States Microsoft Ignite 2016 6/19/2018 2:35 AM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Different Inputs Controller/Remote Virtual keyboard Windows PocketPC Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne Different Inputs Controller/Remote Virtual keyboard © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Controller and Multi-Pen Input Microsoft Ignite 2016 6/19/2018 2:35 AM Demo Controller and Multi-Pen Input © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Inputs Pen/Multi-pen Ruler/Custom ruler OCR Windows PocketPC Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP More Inputs Pen/Multi-pen Ruler/Custom ruler OCR © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Visual State Management Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP Visual State Management View model with visual states Sync between visual states on page and view model © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo View Model and Visual States Microsoft Ignite 2016 6/19/2018 2:35 AM Demo View Model and Visual States © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Code Architecture Project/Solution structure Traditional Xamarin Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP XPlatform Code Architecture Project/Solution structure Traditional Xamarin PCL – core Platform – UX Xamarin.XForms XForms – UX Platform – head/target © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Cross Platform Design Visual Studio design experience UWP iOS Android Windows Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP XPlatform Cross Platform Design Visual Studio design experience UWP iOS Android XForms © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Cross-Platform Application Structure and Design Microsoft Ignite 2016 6/19/2018 2:35 AM Demo Cross-Platform Application Structure and Design © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Beyond Windows Surface Studio Surface Hub Watches HoloLens Microsoft Ignite 2016 PocketPC Phone Xbox 6/19/2018 2:35 AM Win8 XboxOne UWP XPlatform Beyond Windows Surface Studio Surface Hub Watches HoloLens Surface Dial Other…. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Continue your Ignite learning path 6/19/2018 2:35 AM Continue your Ignite learning path Visit Channel 9 to access a wide range of Microsoft training and event recordings https://channel9.msdn.com/ Head to the TechNet Eval Centre to download trials of the latest Microsoft products http://Microsoft.com/en-us/evalcenter/ Visit Microsoft Virtual Academy for free online training visit https://www.microsoftvirtualacademy.com © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6/19/2018 2:35 AM Thank you Chat with me in the Speaker Lounge Find me @thenickrandolph or nick@builttoroam.com © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.