advanced silverlight

Advanced SilverlightDoing more with Silverlight

Pandurang NayakClient Platform EvangelistMicrosoft Corporation

Sumeet JindalSenior DeveloperVectorform

Why are we here?

Learn the inner workings of SilverlightUnderstand rendering pipelines

Find tips and techniques for building great SL applicationsLearn performance best practicesUnderstand how to profile your apps

Peek into few advanced features in the upcoming Silverlight 3

Information Sources

Silverlight Performance TeamSilverlight Product TeamTop Silverlight Bloggers and ExpertsInternal MS Silverlight CommunitiesMy Own Experience with Customers

Silverlight Architecture

Managed InteropCoreC

LRProperty System Layout Text Media Gfx Deep

Zoom Image

Controls

User Code

Interaction between pipelines via brushes

Graphics Pipeline

Cross-PlatformDevelop once, run anywhere

Retained Mode Graphics System

dirty rectangle

The UI Thread

On The UI Thread

User CodeControl CodeAnimationsLayout

On the Non-UI Thread

Frame RasterizationMedia Decoding

Master Tip

Silverlight is hosted in the browser. So, the (single) UI Thread belongs to the browser!

The Animate Loop

TickAny

Property Changes?

LayoutQueue up Rendering Changes

Rasterize in back buffer

Ask browser to show frame

Event Handlers

By default,

60fps

Animation Basics

Frequency is the plugin’s framerate Real-Time Animation (vs. Frame-based)Types of animations:

Interpolation AnimationsColorAnimation, PointAnimation, DoubleAnimation

Splines, KeyFramesObjectAnimation

http://silverlight.net/quickstarts/ blend_quickstart/part3_animations.aspx

Knowing Animations

We only redraw the dirty rectangleAvoid large scale animationsText redraw triggers the font hinting algorithm

Master Tip

When in doubt, use:agControl.settings.EnableRedrawRegions = true;

Using EnableRedrawRegionsDEMO

The Update Loop

TickAny

Property Changes?

LayoutQueue up Rendering Changes

Rasterize in back buffer

Ask browser to show frame

Event Handlers

Layout and Draw

Designed for NestingTwo Passes:

Measure & ArrangeExtensible

ListBox

ScrollViewer

Grid

ScrollBars

StackPanel

ListBoxItemSom

e Stuff

Master Tip

Nested flow layout that changes often is expensive.

The Update Loop

TickAny

Property Changes?

LayoutQueue up Rendering Changes

Rasterize in back buffer

Ask browser to show frame

Event Handlers

Rasterization

All changes for a frame are drawn at onceIdentify what causes a framerate drop

Master Tip

Measure maximum framerate to tune your application:sender.settings.EnableFramerateCounter = true;sender.settings.MaxFrameRate = 1000;

Integrate codepaths via Brushes

Brushes

A brush maps a screen position to a colorBrushes in Silverlight

SolidColorBrushLinearGradientBrushRadialGradientBrush

ImageBrushVideoBrush

Master Tip

When mixing pipelines, brushes are cheap!

Image and Video Brushes in SilverlightDEMO

Rasterization and Anti-Aliasing

Vector Graphics - Anti-aliasedAnimation - Anti-aliased

Rasterization and Anti-Aliasing

Blurry Image RenderingCause: Interpolation

Rasterization and Anti-Aliasing

Blurry Thin LinesCause: non-int positions

Rasterization and Anti-Aliasing

SeamingCause: non-int positions

c = .5(.5*cbkgrd + .5*ctop) + .5(.5*cbkgrd + .5*cbottom)

Rasterization and Anti-Aliasing

In Silverlight 2 RTM,

•Already Correct BehaviorVector Graphics

•Already Correct BehaviorAnimation

•Layout Rounding NEW!!!Image Rendering

•Layout Rounding NEW!!!Sharp Lines•Overlap edges•Change Background ColorSeaming

Non-Integer positioning mainly arises from Text and “Center”

Media Rendering

halo.wmv is 300x400. Which is least expensive?

<MediaElement Source=“halo.wmv”

a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />

Decode

YUV Convert

Resize

(opt)

Blend

(opt)Draw

Rinse & Repeat, at the video framerate

Media: Every Pixel, Every frame!

Encode at the minimum framerate that you need.Encode at the desired sizeBlending with media is expensive

Master Tip

Let the media pipeline decide the best framerate

Media Rendering

halo.wmv is 300x400. Which is least expensive?

<MediaElement Source=“halo.wmv”

a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />

Media Rendering

halo.wmv is 300x400. Which is least expensive?

<MediaElement Source=“halo.wmv”

a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />

Shrinking video causes(Ex: 300x400 to 225x300)

Extra bandwidth for extra 75x100pxDecoding extra 75x100pxInterpolation of every pixel in the 225x300 grid

Pretty awesome interpolation, but never as good as native rendering

Profiling Silverlight Applications

Steps:1. Observe2. Hypothesize3. Develop Testing Protocol4. Experiment5. Make Conclusion

Debugging SettingsSys.Silverlight.createObjectEx({ source: "xaml/Scene.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "500", height: "500",

isWindowless: false, background: "FF000000", framerate: "10000" }, events: { onLoad:onLoadHandler} }); function onLoadHandler() { agControl = document.getElementById("SilverlightControl"); /* To see the framerate displayed in the browser status bar */

agControl.settings.EnableFrameRateCounter = true; /* To see the redraw regions*/

agControl.settings.EnableRedrawRegions= true; }

Your Animation is stuttering What is the first step to debug?a. Decrease the framerateb. Identify the resource constraintc. Turn on Redraw Regions

Master Tip

While debugging render issues, always try to identify what is blocking the UI thread.

xperf

ETW – Event Tracing for WindowsTracing mechanism for both user-mode & kernel-mode appsSilverlight & CLR have embedded ETW events

Analyzes unmanaged callstackDescribes CPU cycles over time

xperfStep 1: Install Microsoft Windows Performance Toolkithttp://msdn.microsoft.com/en-us/performance/default.aspx

Step 2: Admin-level CMD prompt

Step 3: xperf –on base

Step 4: Run scenario try to make all parts fully visible.

Step 5: xperf –d myprofile.etl

Step 6: xperfview myprofile.etl (or open Performance Analyzer)

Step 7: set _NT_SYMBOL_PATH= srv*C:\symbols*http://msdl.microsoft.com/downloads/symbols

Step 8: Trace > Load Symbols

Step 9: Select Graph, right-click and choose Summary

Step 10: Run again to make sure results were sampled correctly

xperfDEMO

What happens on NavigationNavigate Download

HTMLDownload

JS

Create Plug-in

Control.Source is

XAP

Launch CLR

Extract Manifest

Load Assemblie

s

Create App

Object

Object Creates

Tree

Set Visual Root

XAML Parsing Uncovered!

URI-based resources are loaded when added to tree

AsynchCached via Browser

Build unique tree for each ControlPull in Text Stack

Text StackTextBlock & TextBoxGlyph CapabilitiesText Stack

Cross-OS consistencyGlyph rendering is optimized for readingAnti-aliasing, H/V dropout, Gamma Correction

These paths can be hit each tick if one is not carefulAccepted Fonts

Cross-OS, common set already on OSEA fonts, only if installed on machine

Silverlight Spy

View Visual Tree for Silverlight applicationsAlong with .NET Reflector, can show you entire structure and code of Silverlight applications

Master Tip

Confidential stuff should always reside on server! ANYTHING on the client can be exposed.

Silverlight SpyDEMO

References

Performance Bloggershttp://blogs.msdn.com/seema http://blogs.microsoft.co.il/sasha http://blogs.msdn.com/tess/ http://blogs.technet.com/markrussinovich/

Silverlight Spy http://silverlightspy.com/

Session Resources

Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance

Silverlight http://www.silverlight.net

More Advanced Sessions http://2009.visitmix.com

धन्यवा�दઆભા�ર ধন্য�বা�দ

ਧੰ�ਨਵਾ�ਦ

ଧନ୍ୟ�ବା�ଦ

நன்றி�

ధన్య�వాదాలు� ಧನ್ಯ�ವಾ�ದಗಳು

നി�ങ്ങള്‍‌ക്ക്� നിന്ദി�

question & answer

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