Customer Support in Silverlight

Imagine the following

  • You have built the world's best Silverlight twitter client, but every now and then your app crashes
  • You deployed your great Line Of Business Silverlight application, but you have no idea if people like it or not
  • Every now and then you get a phone call from your customer: "I cant see the details"

So what do you do?

Instead of having endless support calls, email conversations, tracing in log files, lookups in log-databases etc… use the below Feedback Control



With this Feedback control you will get:

  1. A screenshot of what the user is looking currently at
  2. All system information like
    1. OS version
    2. Last reboot
    3. Silverlight version
    4. Your application version
    5. …. and heaps more…


Demo of the control embedded in my awesome Silverlight demo app


Demo of my Silverlight demo LOB here (new window) 


How does it work?

1. Create a screenshot of the current Silverlight app with a WriteableBitmap

feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);

2. Collect system information in Silverlight with classes like

  • Environment
  • HtmlPage.Document
  • HtmlPage.BrowserInformation
  • Application.Current.Host
            // Collect system info
            StringBuilder sbStringBuilder = new StringBuilder();

            sbStringBuilder.AppendLine("OSVersion: " + Environment.OSVersion);
            sbStringBuilder.AppendLine("System start: " + Environment.TickCount.ConvertToNiceTime());
            sbStringBuilder.AppendLine("CLR Version: " + Environment.Version);

3. Upload the screen to your server by converting the WriteableBitmap to a PNG

                ImageTools.Image image = ImageTools.ImageExtensions.ToImage(_screenShot);

                using (MemoryStream writestream = new MemoryStream())

                    PngEncoder encoder = new PngEncoder();
                    encoder.Encode(image, writestream);

                    byte[] bytes = writestream.ToArray();

                    MemoryStream readStream = new MemoryStream(bytes);


The conversion to PNG is done via this nice ImageTools library from codeplex (PNGEncoder can be found there)


The file upload is done via a nice and easy HTTPHandler on the server side that receives PNG's and saves them to a specific folder
More info here in Tim Heuer's video about Uploading files in Silverlight with source code

    public class FileUploadReceiver : IHttpHandler
         private const string UploadFolder = @"C:\temp\Upload";

        public void ProcessRequest(HttpContext context)
            using (FileStream fs = File.Create(FileTools.GetUniqueFilename(UploadFolder, ".png")))
                FileTools.SaveFile(context.Request.InputStream, fs);

        public bool IsReusable
                return false;


All done!

What I didn't want

  • Hard to setup
  • Hard to maintain and fragile over time
    • 1 upload folder has to be writeable
    • Hint: Make the File upload (URL) global in your company ( and you don't have to worry about having the file upload handler in the same project
  • No heavy CPU lifting on the client NOR server
  • Hard to use user interface
  • Bad user experience because of copying and pasting screens or sysinfo from different places


How to use it in your own solution?

  1. Download from github
    1. Feedback control
    2. File upload handlers
  2. Copy the Feedback control to your Silverlight app
  3. Fix the Upload URLs

    string _baseUrl = "http://{0}/Silverlight-Feedback/UploadHandlers/";
  4. Download ImageTools library from codeplex and add 3 references to your Silverlight app
    1. ImageTools
    2. ImageTools.IO.Png
    3. ImageTools.Utils
  5. Insert the following code on your "Feedback" button or "About" button

    // Show window and we are done
    FeedbackWindow feedback = new FeedbackWindow();
    feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);

Done with Silverlight
In your web app

  1. Copy the Upload handlers to your Web app
  2. Fix the Upload folder in the web.config "FeedBackUploadFolder"

All done - Have fun!

Whole demo solution can be found here

And the current version as per 2010-06-06 here
Single zip file 600KB
some were worried to install git ;-)



Make sure to have a note about Privacy!


Add the upload folder test to your vsValidate page and check if the folder is writeable from your web app domain user

Figure: Make sure to verify that your upload folders is writeable on your zsValidate page. Do you have a zsValidate page to make sure your website is healthy?


Imagine the following scenario

  1. During a customer support phone call, you told your user to reboot his machine
  2. The user reboots his machine
  3. He sends you his feedback with sys info
  4. You look at the provided system information and see

Name: Jimmy the client
Comment: This is a great app! But crashes on me.

UserName: Jimmy Muster
Roles: Administrator
LOB Silverlight version:

OSVersion: Microsoft Windows NT 6.1.7600.0
System start: 6 h. 33 min. 6 sec.   <-----  YOU SAID YOU DID A REBOOT
CLR Version: 4.0.50524.0
Host.Source: http://localhost/Silverlight-Feedback/ClientBin/Silverlight-LOB-Demo-Application.xap
Host: localhost
Host.Port: 80
BrowserInformation.Name: Netscape
BrowserInformation.BrowserVersion: 5.0
BrowserInformation.Platform: Win32
BrowserInformation.ProductName: Firefox
BrowserInformation.ProductVersion: 3.6.3
BrowserInformation.UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv: Gecko/20100401 Firefox/3.6.3 GTB7.0
BrowserInformation.CookiesEnabled: True
Windowless: False
MaxFrameRate: 60
AverageProcessLoad: 0
AverageProcessorLoad: 0
GpuCollection.Count: 2
ID:1031,, 4318
ID:1031,, 4318


LEster CAlderon said...

nice application but i need to send a email with the image embedded,

Peter Gfader said...

There is no out-of-box way to send emails in Silverlight (no API).

Except: link to ""....
But that is not very nice.

I would definetely upload the content to the server and then send the email from the server. Easy!

Anonymous said...

this is great work!
I'm asking if it's possible to capture the screenshot of the entire user desktop instead only the application area.
I guess the line to be modified is
feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);
but I've not idea on how to modify it.

Peter Gfader said...

Hi Anonymous

Unfortunately this is not possible to do without a native API call. That native API is outside the Silverlight plugin which is not possible without some hacks and tweaks.

If you really want to go that route see the link below. I would not recommend that.

Quick explanation

How to use native CLR API

Peter Gfader said...

Here is the recording from ruiespinho

Anonymous said...

Hey Peter, great job!

One thing though, I went to the following URLS to get the sources of the Feedback and HTTP Handlers:

But I get the same VS project as the one you posted at this URL:

Please advice, thank you


Peter Gfader said...

Hi Manny

Yes the sources are the same.
The short URL was just a link to a zip file, for easier download.

Kiquenet said...

it's great, thansks, fails to me, not found

rams said...

great control. What's the licensing model?

Anonymous said...

Just grab the source and use it.
I guess the licensing model is: use it at your own risk ;-)

Anonymous said...

You can download the zipped source from here

Admirador said...

It's great. Any updates for WPF application too ?

Peter Gfader said...

Hi Admirador
It should be "easy" to adapt the Silverlight code to work in WPF and Winforms.
The other way around was hard ;-)


Post a Comment

Latest Posts

Popular Posts