Download source - 572.64 KB

Introduction

Imagine the following:

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

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:

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

Background

How To

We create a screenshot of the current Silverlight app with a WriteableBitmap:
```
feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null); 
```

We 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);

We upload the screen to our 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);

    UploadFile(readStream);
}

Once we have the screen and the system information on the server, we can send emails, create work-items in TFS or your favorite bug tracking system...

Using the Code

Copy the Feedback control to your Silverlight app.

Fix the Upload URLs

string _baseUrl = "http://{0}/Silverlight-Feedback/UploadHandlers/";

Download ImageTools library from Codeplex and add 3 references to your Silverlight app:
1. ImageTools
2. ImageTools.IO.Png
3. ImageTools.Utils

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);
feedback.Show();

All done - have fun!

Other Usages

On start up or log-off your Silverlight application, phone home and tell usage...
There is no user interaction needed to do this...
Make sure to include a privacy statement somewhere. ;-)

History

1^st upload from my blog entry at http://blog.gfader.com/2010/06/customer-support-in-silverlight.html
2010-06-08-07h59: Fixed spelling mistakes and added "Other usages" scenarios

Customer Support in Silverlight