Take Away’s:

1. Do not use the built in ProgressBar straight up, use Jeff’s template
2. When you’re done with an indeterminate ProgressBar, make sure to toggle IsIndeterminate to False and Collapse the bar
3. General: Always make sure to stop animations / remove animating controls when they’re no longer needed

Some Background:

Due to a bunch of different reasons the shipping ProgressBar control is suboptimal and will actually be UI thread bound – meaning that if your UI thread is stuck working, your ProgressBar will be stuck as well. Not a great situation for a ProgressBar, huh?

That said, we’re not leaving you high and dry. Jeff Wilcox has a great solution which changes the template for the ProgressBar to only run on the Render thread – meaning that it will continue ticking, even when you’re doing your heavy loading work on the UI thread. That said, it still comes with a gotcha – don’t forget to set IsIndeterminate to False and to Collapse the bar once your done (instead of just setting Visibility to Hidden) so that the ProgressBar doesn’t continue to tick in the background, eating up Render thread cycles.

As a general rule, highlighted especially by the ProgressBar, you should always make sure to stop animations (not pause) and remove / collapse animating controls when they’re no longer needed.

Remember: just because you can’t see a animation / control doesn’t mean that it isn’t there doing work.

I’m kicking off a series of posts about Silverlight perfofmance under Windows Phone 7 with a a kind of obvious one, but one that is important to keep in mind from the get go.

Tip:

• Test your code on device as much as possible

But the Emulator is awesome?!?

True, the emulator, otherwise known as the x86 Device Emulator, or simply XDE, is awesome, but it is still not an accurate representation of a device. In fact since the XDE is usually so smooth, it’s extremely easy to fall into the trap of adding more features “because it works on the emulator”.

The Hardware

The emulator restricts itself to one core, adds artificial Sleep()’s and limits the amount of memory it is happy to eat up (so it won’t just chew through whatever is available), but that still isn’t enough.Chances are that even running at one core the emulator is still running faster than the device (most cores today are going to be running faster than 1GHz and chances are you are going to have less things running on that core than the device does). Throw in a desktop GPU which beat a mobile GPU handsdown and you’ve got a winning combination. If you happen to have an older machine, then the XDE will simply run like a dog – and you won’t be able to tell if your app crawls because of your code or because of your machine.

But I don’t have a device!

Common problem, especially in these trying, pre-release, times. Fear not though! Your local Microsoft office most likely has some devices and can help hook you up. Shoot them an email and let them know that you are working on an app, include a description and some screenshots from the XDE (to sweeten the deal) and they should be able to help.

It’s one of those bugs… If you’ve tried profiling Silverlight lately and you’ve run into a consistent crash in Silverlight which brings down the browser, but only on specific projects then this bug is for you.

Basically, profiling any Silverlight app (plugin or OOB) that takes advantage of Shaders will cause Silverlight (and its container) to crash. The only current workaround is to remove the shaders before profiling (possibly with an #ifdef if you are so inclined). This is slated to be fixed in an upcoming version of SL 4 (though no release dates yet).

Note: people often get scared of crashes since they can indicate a security bug – but this is not a security issue (the profiler puts us into a bad state, causing the crash).

Cross-posted from msdn.

Here’s a small tip for those of you who want to debug performance in a Windows Phone Silverlight app with the frame rate counters, but have the System Tray visible – hide it.

The counters currently show up behind the system tray (since technically the tray is a system overlay which is drawing over the surface available to your Silverlight app), so hiding the tray will show the counters.

Don’t forget: to re-enable the system tray when you’re done!

Here’s an awesome gotcha when moving from a desktop Silverlight application to a Windows Phone 7 application – make sure that your media (wmv) files are set to “Build Action” = “Content” and not “Resource”.

You’ll notice that if you do something like:

<MediaElement Source="somevideo.wmv"/>

Where “somevideo.wmv” is set to “Content”, then the Windows Phone Developer Tools (ie. Visual Studio) will underline the "Source" attribute and recommend that you set it to “Resource”. This is a hangover from the desktop and is something that I hope will go away – you can safely ignore this warning (it won’t appear in your build windows).

What’s Wrong With “Resource”?

For those that want more, here are the potential problems you can run into when setting your media to “Resource”:

1. When a video file is compiled as a Resource it incurs an extra space and performance hit every time you play it, since Silverlight does extra processing to extract the video from your assembly (DLL). In the case of “Content” the file can be read directly from disk (or memory) and you’ll get instant start playback.
2. Anything that makes your DLL larger is evil (from my point of view) – you want your assemblies to be small (think “quick and nimble”). Although the size doesn’t always directly affect load and memory time (there are a couple of other factors at play here) this helps eliminate one more possible bottleneck.

An often overlooked performance tuning feature of Silverlight are the “Frame Rate Counters” and “Redraw Regions” options – Profiling, step aside! In this post I’ll explore the general options and how to enable them, I’ll follow up with a further post on how to use them to help identify performance bottlenecks.

This post is based off the awesome talk that Seema Ramchandani gave at Mix ‘10.

Note: To test these out either open an existing Silverlight application, or start a new one. The screenshots in this post are mostly from the Windows Phone 7 Emulator (XDE) so will vary slightly to the desktop version.

Frame Rate Counters

• Enabling
  Open up App.xaml.cs and add the following bolded line to your App() constructor:
  

  public App()
  {
      UnhandledException += new EventHandler(Application_UnhandledException);
      InitializeComponent();
  
      App.Current.Host.Settings.EnableFrameRateCounter = true;
  }
  

• What you’ll see
  In the top left corner of the screen you should see the following counters:
  

  Silverlight Framerate Counters

  
  Note: On the desktop counter A & B are merged into one counter.

• I don’t see the counters! (mobile)
  This means that you are running without hardware acceleration. Either the machine running the emulator does not support hardware acceleration (DirectX 10 for the early refreshes) or you’ve run into a bug (there are a number of them which are currently being zapped) which has caused your device / emulator to run out of video memory. Restart the device / emulator and you should be right.

  Note: To tell if your emulator supports hardware acceleration (or if your device has run out of video memory) look at your screen as you launch a XAP – if it does the page flip animation then you’re ok, otherwise if the app just appears then you are in software.

• What do they mean?
  I’ve added letters to indicate the different fields as so:

  

  1. Render Thread Framerate (fps) (mobile only)
  2. UI Thread Rate Framerate (fps)
  3. Amount of VRAM used by App (kb)
  4. Total number of textures on GPU
  5. Number of intermediate textures

Redraw Regions

• Enabling
  Open up App.xaml.cs and add the following bolded line to your App() constructor:
  

  public App()
  {
      UnhandledException += new EventHandler(Application_UnhandledException);
      InitializeComponent();
  
      App.Current.Host.Settings.EnableRedrawRegions = true;
  }
  

• What you’ll see
  In this example I’m using the default Windows Phone list application and clicking through the list options and then back with the hardware back button.
  

  Redraw Regions highlighting redrawn areas as we transition between pages

• What am I looking at?
  Redraw regions highlights (tints) every part of the screen as it is redrawn, either due to a user initiated action (say, scrolling a non-cached list box) or some code (animation). Cached Objects that are being animated / moved / scrolled etc (BitmapCache) will not be redrawn, but as soon as the object is modified (say, you change its colour as it moves), it will be redrawn – and you will see this highlighted by EnabledRedrawRegions.

  As regions are redrawn the colours will cycle through Blue, Yellow, Pink (Purple) so that you can see the transition – there is no significance to the specific colours.

Silverlight is now into its fourth version (woo!) and with each iteration the platform becomes more solid, more mature and easier to develop for. One of the newer features that is now supported “out of the box” with Silverlight 4 is the ability to profile your Silverlight application, but you wouldn’t know it from just digging around the menus of Visual Studio. In this post we’ll explore the process of collecting a profile from your XAP (both in and out of browser) and we’ll touch on common troubleshooting techniques for failed profiles.

What You’ll Need

1. Visual Studio 2010 Ultimate or Premium (check out the product comparison, under “debugging”, to see if your version has profiling support)
2. Silverlight 4 for Developers (includes the tools for Visual Studio)
   Note: you can’t profile the normal version of the Silverlight plugin (there’s a bit of registry and file magic that will be missing)

Ready, Set, Profile!

Here’s the quick and easy way to profile – open an elevated Visual Studio 2010 Command Prompt (pre configured with useful Visual Studio commands) and run the following:

VSPerfClrEnv /sampleon
VSPerfCmd -start:sample -output:somefile.vsp
VSPerfCmd -globalon
VSPerfCmd -launch:"c:\Program Files (x86)\Internet Explorer\iexplore.exe" -args:""
VSPerfCmd -shutdown
VSPerfClrEnv /off

This will create a VSP (Visual Studio Profile) file in the current directory, which you can then open in Visual Studio.

Note: If you plan on profiling Internet Explorer 8 (and up) you must disable its per-tab process feature (otherwise you’ll end up profiling the iexplore container process instead of the process that is hosting Silverlight). You can find more information here.

Tips & Tricks / FAQ (Recommended Reading)
Take a couple of minutes and run through the following, since you are most likely going to run into one of these issues on your first go…

• Can I Profile Silverlight 3 Projects?
  You can only profile a Silverlight 3 project if it is running under the Silverlight 4 plugin. There are moves to release the supporting files to allow profiling of Silverlight 3, but now that Silverlight 4 is out the point is perhaps moot.
• Associate VSP Files with Visual Studio
  This one makes it easy to open VSP files directly from the command prompt (and aides in symbol resolution) – try to open a VSP from Explorer and when it asks you which program to use, select devenv.exe
• Symbols Fail to Resolve when opening VSP
  If the missing symbols are in Microsoft DLLs, make sure you have selected the public symbol server in your debugging options in Visual Studio under Tools->Options->Debugging->Symbols.

  If the missing symbols are in your own DLLs (like from your own XAP) then make sure to either launch the VSP from the directory that has your PDB files (see the above suggestion regarding associating VSP files with Visual Studio), or add the directories with your PDB files to your symbol path by adding them under the same tool window as above.

• Can I Start Profiling After Launching my Target?
  Sure – you just need to change the order a bit:

  VSPerfClrEnv /sampleon
  VSPerfCmd -start:sample -output:somefile.vsp
  VSPerfCmd -launch:"c:\Program Files (x86)\Internet Explorer\iexplore.exe" -args:""
  VSPerfCmd -globalon
  VSPerfCmd -shutdown
  VSPerfClrEnv /off

• Can I Stop Profiling Without Closing the Target?
  You bet!

  VSPerfClrEnv /sampleon
  VSPerfCmd -start:sample -output:somefile.vsp
  VSPerfCmd -globalon
  VSPerfCmd -launch:"c:\Program Files (x86)\Internet Explorer\iexplore.exe" -args:""
  VSPferfCmd -detach
  VSPerfClrEnv /off

• My profile doesn’t have any of my functions!
  This is probably the most common problem and there are a couple of things to check:
  1. With the VSP open pull up the “Modules” view – if there are some GUIDs in the list of modules, then your code was picked up, but Visual Studio couldn’t find your symbols – continue to the next step
  2. Pull up the Output window (usually Alt+2, View->Output) and you’ll see a list of symbols that were loaded:
     

     Loaded symbols for C:\Windows\SYSTEM32\ntdll.dll.
     Loaded symbols for c:\Program Files\Microsoft Silverlight\4.0.50401.0\npctrl.dll.
     Loaded symbols for c:\Program Files\Microsoft Silverlight\4.0.50401.0\agcore.dll.
     Loaded symbols for C:\Windows\system32\WINMM.dll.
     ...

     You may also see one of the two following possible warnings:
     

     Failed to load symbols for C:\Windows\System32\nlaapi.dll.

     The most common problem – Visual Studio has found the DLL that it profiled, but it can’t find the symbols for it. You’ll need to adjust your symbol path to find the PDB files for your project and then reload the VSP.
     

     Warning VSP2701: Kit3D.dll could not be found when looking for symbol information.

     This is what you’ll see if you’re profiling a XAP from the internet – Visual Studio can’t find the DLL that it profiled (because it was in the XAP that was downloaded) and thus can’t load it to find corresponding PDBs. Load the VSP from the directory that has your DLLs in them (or add that to your global PATH), or download the XAP and extract the DLLs and this warning will go away. Note that if you don’t have the PDBs then the warning will just morph into the above “Failed to load symbols”.

  3. Your DLLs are not in the list: Make sure that you launch the command to profile from the Visual Studio Command Prompt. Failure to do so will result in a bunch of native DLLs being profiled, but no managed code.
  4. Your code isn’t doing enough work: Although a little less likely for heavy apps, some simple apps simply don’t do enough work. The profiler is sample based, meaning that it will take a snapshot (sample) of the call stack every so often. If the time spent in your code is extremely little, due to your code being so fast, it is likely that the profiler will simply miss your code. You can increase the amount of collected samples, to increase the likelihood of hitting your code by running something like:
     

     VSPerfCmd -timer:5000000

     This controls how often we sample by specifying the number of cycles before sampling (default is 10,000,000). You can also play around with -pf (sample of every n page faults) and -sys (sample on every n system calls). See -? for more info…

• Can I attach to a Running Process?
  Yes & No. You can attach to any process that was started within an environment that had the profiling variables set (so for example, any program you launch from a command prompt after running “VSPerfClrEnv /sampleon”). If you attach to a process that wasn’t started within the correct environment you will only get native call stacks and no managed code. To attach to a PID use:
  

  VSPerfCmd -attach:PID

• Which Modules are Silverlight Itself?
  Silverlight is made up mainly of native code which can be found in two DLLs, agcore.dll and npctrl.dll. Can you guess why the ag?
• Why isn’t Silverlight support baked into the IDE?
  Stay tuned (both for a stopgap and a final solution).
• When will we see debug symbols MS?
  This was a question on Maxim’s blog – I’m not sure what the poster was actually getting at though. Microsoft publishes symbols for all released versions of Silverlight (and some select pre-release versions). These symbols are always the retail symbols – there are no CHK builds (or similar) for Silverlight with extended symbols. All of the information that you would want should be in the public symbols – I would love to hear about something that is missing…
• I Want More Options!
  This is an important one – check out:
  

  VSPerfCmd -?

  For a wide range of options, a lot of which I haven’t touched on here.

26/4/2010 Edit: Maxim has a great post which walks you through profiling an actual app using similar steps to those described here – worth checking out!
28/4/2010 Edit: Updated FAQ with some questions from Maxim’s blog
29/4/2010 Edit: Added note about IE8