One app to rule them all Zero to hero with the Universal Windows - PowerPoint PPT Presentation

One app to rule them all Zero to hero with the Universal Windows Platform development Bluefragments blendrocks Daniel Vistisen Deani Hansen Senior consultant Developer & UI designer

Daniel Deani Senior developer at Windows app engineer Bluefragments. at Slack. Architect & developer UI designer and developer

One hour from m now.. .. Fundamentals of the Universal Windows Platform Responsive UI <RelativePanel /> < VisualStates /> < Triggers /> Continuum and different target devices Q/A

Demo app Desktop Phone IoT 4K video Image 720p video

Classic Desktops 2-in-1s Phone Phablet Small Tablet Large Tablet Laptop & All-in-Ones (Tablet or Laptop) Windows 10 Surface Hub Xbox Holographic IoT

Window dows s device ce famil ilies

Univers rsal App != Univers rsal App Window ows s 10 Window ows s 8.1 Full Screen Resizable Windows Portable Class Libraries (PCL) XAML + PCL Windows Runtime (WinRT) Core API + WinRT One binary per target One Binary Overall Intermediate Language .NET Native

Re Relat ative ive resoluti utions ns

Re Relat ative ive Panel A new XAML layout control, which arranges its children by declaring relationships between them. <RelativePanel > … </ RelativePanel>

Re Relat ative ivePane anel, , on MSDN https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.relativepanel https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.relativepanel

DEMO Layout and <RelativePanel /> 4K video

Visual al states s based d on WindowS owSiz ize – Pre UWP public MainPage() { this.InitializeComponent(); this.SizeChanged += (s, e) => { var state = “Default" ; if (e.NewSize.Width > 500) state = “Narrow" ; else if (e.NewSize.Width > 750) state = “Normal" ; else if (e.NewSize.Width > 1000) state = “Full" ; VisualStateManager.GoToState(this, state, true); }; }

Visual al states s with adaptive ptive triggers s (UWP) WP) <VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth =“720" /> </VisualState.StateTriggers> </VisualState> MinWindowHeight (Minimum height for state) MinWindowWidth (Minimum width for state)

DEMO Responsive UI with <VisualState /> 720p video 4K video

Window dows s 10 on Raspb pberry y Pi 2 Model l B Low cost (less than 300 DKK) Low hardware specs HDMI Video Out1 GB memory & A7 Limited resources 900 Mhz (ARM) running Windows10 Can only run one app at a time Runs Windows 10 ! Don’t do this at home HD video Lots of pictures Huge lists without item virtualization

Device ce family ly specif ific ic code bool isHardwareButtonsAPIPresent = Windows.Foundation.Metadata.ApiInformation .IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"); Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += TestView_BackRequested; var qualifiers = ResourceContext.GetForCurrentView().QualifierValues; string currentDeviceFamily; qualifiers.TryGetValue("DeviceFamily", out currentDeviceFamily); // currentDeviceFamily == ”IoT”

Device ce family ly specif ific ic VisualS alStat ate trigger er By building a simple custom trigger we can get rid of the code behind check. More UI logic contained in XAML

DEMO Custom trigger & Raspberry Pi 4K video 720p video Image

Projecti ction on API & Continuu inuum

Continuu inuum Very powerful for product companies - high enterprise value – you’re already there with adaptive UI

Projecti ction on Manag ager r API

Projecti ction on Manag ager r API private async void StartProjecting_Click(object sender, RoutedEventArgs e) { //Check whether there is already active connection to an external display if (ProjectionManager.DisPlayAvailable) { int thisViewId; thisViewId = ApplicationView.GetForCurrentView().Id; var thisDispatcher = Window.Current.Dispatcher; await CoreApplication.CreateNewView().Dispatcher.RunAsync(CoreDispatcherPriority.Normal,()=> { // Display the page in the view. Not visible until “ StartProjectionAsync ” called var rootFrame = new Frame(); rootFrame.Navigate(typeof(ProjectionViewPage), initData); Window.Current.Content = rootFrame; Window.Current.Activate(); }); // Show the view on a second display await ProjectionManager.StartProjectingAsync(rootPage.Id, thisViewId); } } private async void StopProjecting_Click(object sender, RoutedEventArgs e) { await ProjectionManager.StopProjectingAsync(rootPage.ProjectionViewPageControl.Id, thisViewId); }

Wr Wrapp pping ing up UWP platform – one binary to rule them all feat. device families Responsive UI is king Really really high reusability Bonus: One unified store for all apps with all device families

Daniel Vistisen @danielvistisen Deani Hansen @deanihansen