Dashboard in Silverlight 4

Introduction

 

In this article we will see how we can make a Dashboard in Silverlight 4.

 

 

Create Silverlight Application
 

Fire up Visual Studio 2010, and select Silverlight Project from the templates. Name the solution as DashboardSample.
 

 

A Dashboard is a page that contains brief description of a large content or any tool on the page. For example igoogle. It consists of varieties of gadgets, that can be added or removed.
 

We will see how to start with a Dashboard.
 

I am going to add couple of RSS feeds from some sites, twitter tweets and a Calculator to the Dashboard.
 

Before that we need to have a Widget Control that can hold the Content or Tool.
 

Widget Control
 

Widget control is a control with fixed size and style, which can contain the widget inside it.
 

Add a Silverlight User Control name it as WidgetControl.
 

 

Open up Expression Blend 4 and design it. I have designed it as displayed below.
 

 

 

 
 

If you look into above Objects in the panel, you could see we have a Title Text, 3 Image Buttons, and a Border to contain the widget.
 

A Dependency Property called TitleProperty is added.
 

 

Then we have the Routed events for minimizing and restoring the widget.
 

 

Calculator Control
 

This is a calculator with simple operations.
 

Add a User Control to the Silverlight project and name it as UCCalculator.
 

 

As I said it is a simple calculator, and you can design it in either of the tools (Expression Blend or VS 2010).

 

You can refer the source code, for the calculator user control code, as it is commonly used code.
 

RSS Feeds Control
 

Add a new user control to the Silverlight project and name it as UCRSSFeeds.
 

 

Let's create a class named RSSFeeds which would have the below properties.

 

 

 

We will have a ListBox to display the feeds.

 

 

The following is for loading RSS Feeds. As you can see we have created an overloaded constructor through which we can pass the RSS Feed url.

 

 

 

Twitter Control
 

Add a new user control to the Silverlight project and name it as USTwitter.
 

Add a class named Twitter which would contain the following properties.
 

 

We need to add a ListBox to display the data from the Twitter api call.
 

Following is the xaml code for the data template of the ListBox.

 

Add the following code for getting the feeds from twitter api.
 

 

Authentication Issue
 

In Silverlight 4 we cannot have the RSS Feeds or twitter api call directly, for that we need to have the application running in OOB mode as well as with Elevated Privilege. 

 

 

 

Adding Widgets
 

As per requirement we can have widget panels defined. For example 3 column widget panel or 2 column widget panel.

In our case I have taken two panels such as Left Panel and Right Panel.
 

The MainPage.xaml has the following two panels.

 

We can add the Widgets to the WidgetControl and then to the columns as following.

 

That's it now we can run the application and see the Dashboard.
 

 

Hope this article helps.