Introduction

There are several posts about how to implement the master page feature in Silverlight. The question is do we really need this master page feature in Silverlight. If there is an advantage to using the master page features in ASP.NET, then I can’t see a reason why Silverlight can’t take advantage of this as well. This article will demonstrate how to build a traditional master page style application in Silverlight.

System Requirements

This application requires the user to have a copy of Visual Studio 2008

Design Requirements

Just like traditional web pages, the login page is in start up as Fig 1. The login control consists of two text boxes, a combo box, and two button controls. The text boxes collect the username and password information from the user, the combo box is used to determine which environment to login. The Cancel button will remove the data in the text boxes and the Login button is used to submit the information for authentication.

Fig. 1. Login page

After clicking the login button, the MainPage will display as in Fig. 2.

Fig. 2. MainPage

The MainPage has two main sections: master page section and sub page section, as in Fig. 3. The master page section has a command buttons bar across the top and a tree view menu on the left side. The sub page section has a content area on the right.

Fig. 3. Master Page section and Sub Page section

The master page consists of:

Form Title Label: to display sub form ID

User ID Label: to display the current user

System Label: to display system environment name

Date Label: to display current date

Count Label: to display data record count

Status Label: to display current state

Tree view: to dynamically change the content in the content area

11 command buttons: to do action in sub page

Fig. 4. Details of master page and sub page

The 11 command buttons include the following:

Search: to trigger the Search state

Execute: to extract the server data back to the client and also trigger the Modify state

Edit: to enable editable field controls

Delete: to delete the current record

Save: to update changes

First Record: go to the first record

Previous Record: go to the previous record

Next Record: go to the next record

Last Record: go to the last record

Excel: to export data to Excel

Exit: to exit and close the browser

Fig. 5. The 11 command buttons description

There are four kinds of states:

INITIAL: Search button is enabled, as in Fig. 6.

Fig. 6. Initial state

SEARCH: Search and Execute is enabled, as in Fig. 7.

Fig. 7. Search state

MODIFY: All buttons are enabled except the Execute button, as in Fig. 8.

Fig. 8. Modify state

CUSTOM: You can decide which buttons to enable/disable, for example, you can enable all buttons, as in Fig. 9.

Fig. 9. Custom state

The tree view can be expanded or reduced, as in Fig. 10.

Fig. 10. Expanding the tree menu

Brief of Each Project

There are four projects:

DataObjectCollection: Data structures that are used by the service to communicate with the client.

CommandInMasterDaoWcf: The service to pass data from the server side to the client.

CommandInMasterDemo: The Silverlight application project.

There are three main Silverlight controls that needs to be addressed:

LeftTreeViewMain - Tree view menu

Login control – Login page

TopToolBar - Control contains 11 command buttons

CommandInMasterDemo.Web: This is created as you create the Silverlight application. It will host the Silverlight controls to run in the browser.

Fig. 11. Projects

Using the Code

Before we start to look into the sample, there are a few methods I need to address first.

App.xaml.cs

To classify four states, Initial, Search, Modify, and Custom.

publicenum WorkState
{
INT,//Initial State
SEA,//Search State
MOD,//Modify State
CUS,//Custom State
}

I am using Reflection to create an instance of the user control. For example, the MainPage has the namespace CommandInMasterDemo and the class name MainPage, therefore I can use Reflection to create the CommandInMasterDemo.MainPage object and then convert it into the UserControl type. If the user control is not null, I set the CurrentFormID to strName then add the user control into the current Application.RootVisual.

GetUserControl also uses Reflection to create a user control instance. The only difference between Navigate and GetUserControl is preparing the namespace. All sub pages have their own sub group folder, such as CHM, FCM. Therefore we need to add a sub group name in the namespace. For example, the FCM201 user control has the namespace CommandInMasterDemo.FCM and the class name FCM201, therefore we use type.Namespace + "." + strName.Substring(0, 3) + "." + strName to create its instance.

Moving Forward

I am placing this code into the public domain without restrictions. It doesn't have the best pattern in design or coding style. You can use it for any purpose, including in commercial products. If you can improve the code or even make it more clear, please let me know. I will update the code to make it more useful. Thank you all.

License

Share

About the Author

I came to Australian at year 1989. After I finishing my master’s degree in New South Wales University in Sydney, I started my first database designer role in Sydney Water. After working for a few years for several different companies, I had chance to work in Australia’s leading financial company AMP (www.amp.com.au). My role at AMP was an internet banking developer. My main tasks included the design of middle-tier, security, transaction processes, database and front end. Currently, I am working with Taiwan Microsoft as vendor. I have strong software development knowledge in banking/financial institution. My current certifications include MCP, MCSE(Microsoft NT 4.0), MCDBA(Microsoft SQL SERVER 2000), MCSD(Microsoft Visual Studio 6.0), MCAD(Microsoft .NET, Charter Member - one among the first 5000 developers worldwide) and MCSD(Microsoft .NET).

i gone through your code it is really good.so i am going to impliment same like this one product in my company..the architechture what you followed i.e., WCF with silver light is nice because it is very flexible for all types of applications.