1. 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.

2. 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.

3. Beautiful and Performant

4. 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. Loading Hidden Content with x:Load

6. Demo: x:Load

7. 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

8. Image Loading Optimizations

9. 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.

10. Demo: Loaded Image Surface

11. 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.

12. Adaptive Lights and Effects

13. 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

14. Demo: Adaptive Effects

15. Visual Layer: Relative Sizing and Offset

16. 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

17. Demo: Relative Sizing

18. 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

19. 5/2/2018 1:53 AM
Call to action
Tweet us your awesome and performant UI
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.

20. 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

21. 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.