5/2/2018 1:53 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Tips and Tricks for Creating Performant UI in UWP 5/2/2018 1:53 AM P4173 Tips and Tricks for Creating Performant UI in UWP David Li, Program Manager Robert Mikhayelyan, Software Engineer © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Beautiful and Performant

Tips and Tricks Images and Lazy Loading Lazy Loading with x:Load Image Loading Optimizations LoadedImageSurface Effects, Lights, and Capabilities Smart Creation of Lights and Effects Composition Capabilities Battery Saver Relative Size / Offset in the Visual Layer RelativeSize Adjustment RelativeOffset Adjustment

Loading Hidden Content with x:Load

Demo: x:Load

Loading Hidden Content with x:Load Before: Setting visibility hidden on groups of visual content Expensive, especially if some content never gets loaded All the cost is paid upfront when the app is first launched and loaded After: x:Load A replacement for x:DeferLoadStrategy Defer elements that are not visible in the first frame For ListView scenarios, use x:Bind and x:Phase to increase scrolling performance Reduction of Visual Tree Size You don’t pay the cost for creating elements until the user needs them Turn on UI Analysis in VS to see where this might be helpful

Image Loading Optimizations

Some refreshers on XAML image practices Microsoft Build 2017 5/2/2018 1:53 AM Some refreshers on XAML image practices Ideally use vector graphics when possible to avoid adding multiple large image assets to your project SVGs are now supported for the Creator’s Update When loading bitmap images, remember to specify the decode pixel width and decode pixel height In lists and grids, remember x:Phase – prioritize loading of most important content first © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo: Loaded Image Surface

Microsoft Build 2017 5/2/2018 1:53 AM Loaded Image Surface Now takes much less code, and it’s optimized for speed No need to handle device lost, and XAML handles caching and integration of PLM for you for freeing up video memory while app is suspended Avoid creating a second D3D device and associated memory overhead © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Adaptive Lights and Effects

Adaptive Lights and Effects New XAML Effects and Lights in Creator’s Update OnConnected and OnDisconnected overrides should be used for creating and disposing Composition objects When it comes to blur, lights, and shadows – less is more Blur, spotlights, and animated masked shadows are powerful effects that can have power and performance implications if overused Composition Capabilities APIs for hardware that do not support the most powerful effects Power Management and Energy Saver Status APIs for tailoring brushes / effects experience for users who might want to save battery

Demo: Adaptive Effects

Visual Layer: Relative Sizing and Offset

Visual Layer: Relative Sizing and Offset For those working in the Visual Layer, we’ve introduced RelativeSizeAdjustment and RelativeOffsetAdjustment These APIs add the ability to more easily arrange Visuals Benefits: Easier to code than manually handling size changed Faster – an optimized solution that directly targets the pattern we see of developers using expressions to handle layout More responsive as the resizing happens on the system level Avoid creation of Expression Animation objects for simple scenarios

Demo: Relative Sizing

Tips and Tricks Images and Lazy Loading Lazy Loading with x:Load Image Loading Optimizations LoadedImageSurface Effects, Lights, and Capabilities Smart Creation of Lights and Effects Composition Capabilities Battery Saver Relative Size / Offset in the Visual Layer RelativeSize Adjustment RelativeOffset Adjustment

5/2/2018 1:53 AM Call to action Tweet us your awesome and performant UI creations @WindowsUI Play with the sample code on our GitHub repository Re-visit Build session recordings on Channel 9 Continue your education at Microsoft Virtual Academy online #MSBuild © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Related Content BUILD 2017 Talks B8037: Explore the next generation of innovative UI in the Visual Layer B8100: What’s new and coming for Windows UI: XAML and composition P4078: Vector Iconography: Using SVG images in your app Performance articles on Windows Dev Center Includes content on optimizing background activity, ListView / GridView optimizations, keeping UI thread responsive, optimizing layout, and more Optimizing your xaml app for performance (10 by 10) #MSBuild

5/2/2018 1:53 AM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.