1. Microsoft Silverlight Performance on Windows Phone
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
SESSION CODE: WPH309
Microsoft Silverlight Performance on Windows Phone
Yochay Kiriaty
Senior Technical Evangelist
Microsoft Corporation ;
Windowsteamblog.com/wpdev

2. Learning Windows Phone

3. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Performance

4. Windows Phone Is Already Optimized
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Windows Phone Is Already Optimized

5. SL Performance on Windows Phone
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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?
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Silverlight Rendering
PhoneApplicationPage
LayoutRoot
(Grid)
TitleGrid
textBlockPageTitle
textBlockListTitle
Content Grid
Your content

9. Silverlight Threading (on the phone)
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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
Input (touch)
Layout
Measure and arrange
User code
E.g. per-frame callbacks
E.g. Blocking on Network
Animations not done in Render thread
Simple Animations
Only “double” Animations for simple Properties
Render Transforms
Opacity
Perspective Transforms
Rectangular Clip

11. Silverlight Threading (on the phone)
UI Thread
Render Thread
Event Handlers
Tick
Any property changes?
Layout
Queue up rendering changes
Rasterize in back buffer
Show my Frame
Animate

12. UI Thread Vs. Render Thread
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
The Emulator
Leverages GPU on your PC
Often much more CPU than on device
Uses a single core
Requires DirectX 10 capable hardware

16. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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 that are being redrawn with each frame (texture rasterized by the UI thread)

18. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
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. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Caching
CacheMode = BitmapCache will 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
An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Know Your Tree – SW Rendering of Parent
Demo

27. Tech Ed North America 2010
8/3/2018
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 3
Remove the replace OpacityMask with Opacity
I have no idea 4
© 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.

28. An Introduction to Developing Applications for Microsoft Silverlight
8/3/2018
Caching = BitmapCache
Demo

29. Media Video ( MediaElement ) Images 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 Delay loading resources at start-up.
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
Developer Resources
developer.windowsphone.com
Experience Windows Phone 7 on-line and get a backstage pass

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
WPH301 WP7: 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. Resources Learning Required Slide www.microsoft.com/teched
Tech Ed North America 2010
8/3/ :14 AM
Required Slide
Resources
Learning
Sessions On-Demand & Community
Microsoft Certification & Training Resources
Resources for IT Professionals
Resources for Developers
© 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.

40. Complete an evaluation on CommNet and enter to win!
Tech Ed North America 2010
8/3/ :14 AM
Required Slide
Complete an evaluation on CommNet and enter to win!
© 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.

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

42. Tech Ed North America 2010
8/3/ :14 AM
© 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.
© 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. Tech Ed North America 2010
8/3/2018
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 3
Remove the replace OpacityMask with Opacity
I have no idea 4
© 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.