Tuning Animations in Silverlight Apps

Url: http://wilderminds.blob.core.windows.net/downloads/funwithperf.zip

When you start creating Silverlight applications with some level of animation you can get yourself into a situation where performance issues are hard to track down. There are a couple of not well known flags in the Silverlight plugin that you can use to help debug them.

First up: EnableFramerateCounter. The Silverlight plugin supports a target framerate (which defaults to 60 frames a second). You can adjust this depending on your need, but this framerate is only a target framerate. Depending on the machine, Silverlight may not be able to reach the framerate. That’s where the Framerate Counter comes in. To enable it, you can use either the object tag syntax or the Silverlight ASP.NET Control

Silverlight Control

<asp:Silverlight ID="Xaml1" runat="server" 
                 Source="~/ClientBin/FunWithPerf.xap" 
                 MinimumVersion="2.0.31005.0"
                 Width="537px" Height="436px" 
                 EnableFrameRateCounter="true" />

Object Tag

<object type="application/x-silverlight-2" 
        width="537px" 
        height="436px">
  <param name="source" value="/ClientBin/FunWithPerf.xap"/>
  <param name="minRuntimeVersion" value="2.0.31005.0" />
  <param name="enableFramerateCounter" value="True" />
</object>

With the flag enabled, you can see the actual framerate in the status bar of the browser as shown below:

Redraw Regions

Another tool is enabling redraw regions.  As the screen is re-drawn, you can have the plugin color the screen to show what parts of the screen. This can help you see how often and how much of the screen is being redrawn at any time.  For example a bouncing ball animation is shown here and shows the different redrawing as it happens:

You can enable this in both the ASP.NET Silverlight control or the Object Tag.

Silverlight Control

<asp:Silverlight ID="Xaml1" runat="server" 
                 Source="~/ClientBin/FunWithPerf.xap" 
                 MinimumVersion="2.0.31005.0"
                 Width="537px" Height="436px" 
                 EnableRedrawRegions="true" />

Object Tag

<object type="application/x-silverlight-2" 
        width="537px" 
        height="436px">
  <param name="source" value="/ClientBin/FunWithPerf.xap"/>
  <param name="minRuntimeVersion" value="2.0.31005.0" />
  <param name="enableRedrawRegion" value="True" />
</object>

You can get the source code of my examples here: FunWithPerf.zip.