David Palfery's Live Space

One of the first road blocks I hit in SilverLight 2 was the lack of a ComboBox. I made some early attempts at creating one that was databindable but kept running into issues with getting the list part of the comboBox to lay on top of the other items on the page. I used the popup control but then could not figure out how to place the horizontal and vertical offsets. While working on a UI intensive project I discovered the solution. The following is a User Control that works as a workable comboBox solution.

The User Control is made up of 4 basic control elements, a TextBox, a Border(Button), a ListBox, and a popUp control. What is shown above is just the TextBox and the Border. I am using a custom button made using a border element so I can handle the MouseLeftButtonDown event a button will swallow the ButtonDown event and it is needed here to get the location of the comboBox.

To use this User control copy the ucCombo.xaml and ucCombo.xaml.vb into your project. To load it set the ValueMemberPAth, DisplayMemberPAth and the ItemsSource. the selected item will be in the SelectedValue property.

To download it click here

I think that the SilverLight and WPF visual effects have and will continue to change the way we look at UI and application development. The graphics stuff is cool and I love adding a designers UI to an app I am working on, it makes it work better and puts the user in a better mood. However this is not what excites me about SilverLight. I am excited about the performance and compatibility aspects of it.

With SilverLight I have my own sand box that installs on almost all operating systems and my / or the designers forms look and work the same everywhere --
Ok if you’re the Adobe / Java guy in the room saying yea but flash has had this for years… Good for you I code in .Net.
and with Expressions blend 2.5 I almost have drag and drop design time like in win forms but with the visual inheritance of the web with styles and templates. Oh and there are plans for 508 compliance.

Let’s look at some code. To start with I used LINQ as a data access layer I simply add a LINQ to SQL classes object

Drag my table on it from the server explorer

Now I am ready to write a business layer… I created some custom types to pass down through WCF to SilverLight because in Beta 1 I had some issues trying to bind to the LINQ objects. I think I read that they fixed this in Beta 2. This had a good side affect though it removed the LINQ disconnected entity problem.

Important note: when creating these classes to be used with WCF make sure to mark the Classes with <DataContract(Name:="ClassName")> and the properties with <DataMember(Name:="PropertyName")>

I then created some managers to populate the collections. It is important to note that the collection classes inherit from ObservableCollection(Of T) this helps support some of the databinding in silverlight.

Next I created a WCF Service Application

First thing here is to change the binding type to basicHttpBinding. Someday SilverLight will support a more secure method of transferring data, when it does and I figure out how I will update this post.

The web service I have created is nothing more than a facade calling through to the business layer and returning the data to silverlight.

Next I created a new Silverlight Application

If you do not see this in your list of templates you probably have not installed the tools. Go to http://silverlight.net/GetStarted/ and follow the instructions.

Next I added a Service Reference to my WCF web service

Click add Service Reference and then click discover. Select you service and give it a name. Here is I spent hours pulling my hair trying to find out why SilverLight could not find my service. I kept getting this error message

Turns out when Visual Studio creates the config file it forgets to fully qualify the contract name and so SilverLight can’t find it. The fix is to go into the “ServiceReferences.ClientConfig” file and add the root name space to the contract property. See below

Next go into the page.xaml file that is added by default and remove the root layout object <Grid></Grid> from the xaml. This is so we can support multiple pages.

Next I added a new xaml UserControl and called it recipes.

Then I went back to the Page.xaml.vb code file and added the following

This allows me to switch pages later. On the recipes.xaml file I added a list box that I bound a collection of recipes to. The xaml looks like this

Important to note here is the clickMode=”Press” this makes the button click event fire correctly. Also notice the text=”{Binding <PropertyName>}” property in the TextBlock controls this is how the Binding works in SilverLight. To bind get the recipes collection and Bind it to the list box you need the following code

In the Page constructor I call the GetRecipesListAsync method this makes the call for recipes to the service. Then you need to add a listener for the response by handling the GetRecipesListCompleted event. Here I set the listbox.ItemsSource property equal to the e.Result and when the page loads we get the following:

Ok now we need to handle the edit button. In the previous code block I showed the btnEdit_Click event handler. First I create a RecipesItem object and set it equal to the sender.DataContext, this gives me the recipesItem that was bound to that row of the listbox. Second I create an instance of the Page class and set it equal to the parent of the current page. This lets me access the Navigate function we added to the first page. Third I instantiate the Details page and set its DataContext equal to the Item object I created in the first step, I will show how I created details page next. Then I call page.Navigate and we switch pages. The new button works pretty much the same way except passing a new blank recipe item.

Next I created the details page. I created this page mostly with expressions blend and mostly with drag and drop, or using the mouse. I had not used expressions blend much before creating this page, although I have been working on a WPF app at work so I am familiar with xaml. I was able to create this page in about an hour, half the time it would take me to create it in HTML and CSS and it works on all browsers. I would guess that a page like this in a full scale app with styles and such could be created in less than 15 minutes. The xaml that Expressions Blend 2.5 creates is not as clean as I create myself but it does not add much overhead and is worth the time savings.

The comboBoxes on this page are my own user control and are a bit week at the moment. SilverLight does not currently ship with a ComboBox control, I have almost created one here with the exception that the popup that holds the listbox of items sets it x and y coordinates absolutely from the top left corner of the page. My user control does not know where it is on the page at any given time so I can’t pass to the popup where it should be. I am working on this and will update the post if I find any solutions. There are of course third-party comboboxes you can buy if you need one. As far as the saving and populating of the comboboxes it is done the same way as the items on the first page.

The source code can be downloaded here

Some helpful links that I have found to get started are:

• Swiss MSDN Team Blog
  • http://blogs.msdn.com/swiss_dpe_team/archive/2008/03/17/silverlight-2-beta1-wcf-linq-to-sql-a-powerfull-combination.aspx
  • http://blogs.msdn.com/swiss_dpe_team/archive/2008/04/04/crud-operations-with-optimistic-locking-using-silverlight-2-beta1-wcf-and-linq-to-sql-inserts-updates-and-deletes.aspx
  • http://blogs.msdn.com/swiss_dpe_team/archive/2008/04/11/crud-using-silverlight-2-beta1-wcf-and-linq-to-sql-part2.aspx
• Scott Guthrie’s blog http://weblogs.asp.net/scottgu/pages/silverlight-posts.aspx
• http://Silverlight.net
• Karen Corby’s blog http://scorbs.com/2008/03/09/mix08-creating-rich-dynamic-user-interfaces-with-silverlight-2-controls/

I hope this post will help people get started with SilverLight as an intranet application platform please leave your comments good and bad.

Thanks