1 / 21

Tips and Tricks for Creating Performant UI in UWP

Tips and Tricks for Creating Performant UI in UWP. David Li, Program Manager Robert Mikhayelyan, Software Engineer. P4173. Beautiful and Performant. Tips and Tricks. Images and Lazy Loading Lazy Loading with x:Load Image Loading Optimizations LoadedImageSurface.

liddell
Download Presentation

Tips and Tricks for Creating Performant UI in UWP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tips and Tricks for Creating Performant UI in UWP David Li, Program Manager Robert Mikhayelyan, Software Engineer P4173

  2. Beautiful and Performant

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

  4. Loading Hidden Content with x:Load

  5. Demo: x:Load

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

  7. Image Loading Optimizations

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

  9. Demo: Loaded Image Surface

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

  11. Adaptive Lights and Effects

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

  13. Demo: Adaptive Effects

  14. Visual Layer: Relative Sizing and Offset

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

  16. Demo: Relative Sizing

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

  18. 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 atMicrosoft Virtual Academy online #MSBuild

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

More Related