Microsoft Silverlight Performance on Windows Phone

1. SESSION CODE: WPH309 Microsoft Silverlight Performance on Windows Phone Yochay Kiriaty Senior Technical Evangelist Microsoft Corporation yochayk@microsoft.com ; twitter @yochayk Windowsteamblog.com/wpdev

2. Learning Windows Phone http://learningwindowsphone.com/

3. Performance

4. Windows Phone Is Already Optimized

5. SL Performance on Windows Phone • Silverlight for Windows Phone • Understand the architecture and Concepts • Monitor • Performance Counters • Understand the tools • Plan Ahead • Less is more • Leverage Render thread • Leverage GPU • Caching • Imaging/Media

6. What is Silverlight for Windows Phone? Starts with Silverlight 3 plus… • Performance tuning • Input integration • H/W media and sensor integration • OS application model integration • Relaxed sandbox constraints

7. Concepts and Architecture

8. Silverlight Rendering

9. Silverlight Threading (on the phone) • One UI thread • One Render Thread • Many worker threads • User threads • Media decoding threads

10. Silverlight Threading (on Phone) UI thread Render Thread Simple Animations Only “double” Animations for simple Properties Render Transforms Opacity Perspective Transforms Rectangular Clip • Input (touch) • Layout • Measure and arrange • User code • E.g. per-frame callbacks • E.g. Blocking on Network • Animations not done in Render thread

11. Silverlight Threading (on the phone) • Show my Frame UI Thread Render Thread • Animate

12. UI Thread Vs. Render Thread Render thread demos Demo

13. Animation System • Frame-based Animation when CPU bound • Time-based Animation when CPU bound

14. Tools and Counters

15. The Emulator • Leverages GPU on your PC • Often much more CPU than on device • Uses a single core • Requires DirectX 10 capable hardware

16. Performance Counters Application.Current.Host.Settings.EnableFrameRateCounter = true; Render Thread frame rate (fps) UI Thread frame rate (fps) Amount of VRAM used by App (kb) Total # of Textures on GPU # of Intermediates

17. Dirty Regions Application.Current.Host.Settings.EnableRedrawRegions= true; • Visually indicates the elements thatare being redrawn with each frame (texture rasterized by the UI thread)

18. Dirty Regions Demo

19. Cache Visualizations • Application.Current.Host.Settings.EnableCacheVisualization = true; • Applies a color overlay to visuals that are not GPU accelerated

20. Planning for Performance

21. Practices to drive performance 1. Identify potential problem areas Startup? Memory? Framerate? 2. Monitor as changes are made Framerate, Size of Dirty Regions 3. Test on device, often. 4. Include designers early and often

22. Performance Strategy • Less is more • Minimize UI thread work • Leverage Off-thread • Leverage GPU • Rinse and Repeat (1-4)

23. Less is more • Slim Visual Trees • Virtualization • Collapse items that are not visible • Z order doesn’t count • Use redraw regions to measure impact to tree • Events • Layout • Rendering • Avoid Small property changes or use “render thread“ animation.

24. Leverage GPU & Render Thread • Use simple animations of Simple properties • Cache • Avoid large textures

25. Caching • CacheMode = BitmapCachewill cache the rasterized (textures) version of a UIElement and its children • Tips: • Know your tree. Must have no SW-only features in self or parent. • Silverlight auto-caches animations when possible. Don’t count on it, verify it.

26. Know Your Tree – SW Rendering of Parent Demo

27. Quiz • In the next demo, what allows the blue ellipse (including its opacity mask) to animate on the Render thread and not the UI thread? (with the same outcome) Use BitmapCache on the ellipse to cache it once and then let the render thread have fun 1 Add the ellipse as child to a canvas that is animated and use BitmapCache 2 Remove the replace OpacityMask with Opacity 3 I have no idea 4

28. Caching = BitmapCache Demo

29. Media • Video ( MediaElement ) • Rendered in Render thread • Must be cached. CacheMode required in earlier builds, not required later, but it is being applied. • Still, less is more: • Right size • Minimum frame rate possible. • Images • Decoded in software.

30. Start-up • Use a splash screen • Include applicationsplashscreen.jpg • Delay loading resources at start-up.

31. Performance pitfalls • SW-only features: • Non-rectangular clips • Opacity mask – DO NOT use it! • Large textures ( > 2K pixels either way) • Not simple animations (e.g. ColorAnimation)

32. Conclusion • Windows Phone comes optimized. • Your app should take advantage of the architecture and the hardware • Avoid SW rendering • Know your tree

34. Windows Phone Resources Questions? Demos? The Latest phones? Visit the Windows Phone Technical Learning Center for demos and more… • Business IT Resources www.windowsphone.com/business • Developer Resources developer.windowsphone.com • Experience Windows Phone 7 on-line and get a backstage pass www.windowsphone7.com

35. Win a Windows Phone Contest Hat Contest* How do you enter? Enter by visiting the Windows Phone booth, accepting a free Windows Phone branded hat, and wearing that hat during the Event. How am I selected? Each day of the event, a Windows Phone representative will randomly select up to 5 people who are observed wearing their Windows Phone branded hat Session Contest* During each Windows Phone session the moderator will post a question. The first person to correctly answer the question and called on by the moderator will potentially win Questions? Go to the WPH Information Counter at the TLC * Restrictions apply please see contest rules for eligibility and restrictions. Contest rules are displayed in the Technical Learning Center at the WPH info counter.

36. Related Windows Phone Content – Breakout Sessions Mon &Tue Monday WPH301WP7: Deploy Microsoft Forefront Unified Access Gateway for Access Control to SharePoint, Exchange and more. WPH202 Deploying Windows Phone 7 with Exchange Server and SharePoint Server Tuesday WPH203 Overview of the Windows Phone 7 Application Platform WPH313 Windows Phone 7 Architecture Deep Dive WPH304 An In-Depth view at Building Applications for WP7 with Silverlight (Part 1) WPH305 An In-Depth view at Building Applications for WP7 with Silverlight (Part 2) WPH306 Developing Occasionally Connected Applications for Windows Phone 7

37. Related Windows Phone Content – Breakout Sessions Wed &Thu Wednesday WPH310 Designing and Developing for the Rich Mobile Web WPH311 Developing Mobile Code Today that will run on WP 7 Tomorrow WPH309 Silverlight performance on Windows Phone WPH307 Building Windows Phone Games with XNA WPH308 Building a High Performance 3D Game for Windows Phone Thursday WPH303 Understanding the Windows Phone 7 Development Tools WPH314 Learn Windows Phone 7 Development by Creating a Robotic T-Shirt Cannon WPH312 Understanding Marketplace and Making Money with WP7 Applications

38. Related Windows Phone Content – Interactive Session & HOL Windows Phone Interactive Sessions Windows Phone 7 Demo Only! Microsoft’s Next Generation Mobile Enterprise Application Platform (MEAP) Windows Phone 7 Application Performance Prepare for Windows Phone 7 Development! Coding practices you should start using now in Windows Mobile Windows Phone Hands On Labs Hello Windows Phone - Building Your first Windows Phone Application Microsoft Silverlight for Windows Phone Microsoft XNA Framework 4.0 for Windows Phones Using Push Notifications and Windows Communication Foundation (WCF) Services

39. Required Slide Resources Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet • http://microsoft.com/msdn

40. Required Slide Complete an evaluation on CommNet and enter to win!

41. Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st http://northamerica.msteched.com/registration You can also register at the North America 2011 kiosk located at registrationJoin us in Atlanta next year

42. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

43. Quiz • In the next demo, what allows the blue ellipse (including its opacity mask) to animate on the Render thread and not the UI thread? (with the same outcome) Use BitmapCache on the ellipse to cache it once and then let the render thread have fun 1 Add the ellipse as child to a convenes that is animated and use BitmapCache 2 Remove the replace OpacityMask with Opacity 3 I have no idea 4