Simple Talk is now part of the Redgate Community hub - find out why

Silverlight Skinnable User Interfaces

John Bower demonstrates more of the features of Silverlight, and Expression Blend, and shows how one might write an application that avoids UI pitfalls by placing your design responsibility squarely on your users' shoulders. If it looks bad, it's their fault!

Back in 1997, I had my first encounter with User Interface design while I was working for a web development company in London.

I used to watch with awe as one of our senior C++ developers spent hours every day carefully shifting his buttons and textboxes around with neurotic precision, one pixel at a time. He spent more time fiddling about with the UI of the application than actually programming the thing. He also had a tendency to swear loudly every so often and stare at co-workers with a psychotic twitch in his left eye, which I’ve since found to be  a mannerism that’s prevalent among many senior C++ developers.

I couldn’t help but think to myself, “it might look good to him as a programmer… but I wonder how quickly an office blood-bath would ensue if even one client emailed him saying the UI looks awful, and he wants it all different!” After all, you can’t please everyone, especially if they’re customers.

My desk was the one that was closest to his, I didn’t like that twitch and I was highly-strung. – I worried that I’d probably be the first to sustain collateral damage from a frenzied attack, and posthumously provide a Pollock-style splatter effect to the décor of the office. It was this bone-chilling fear of impending doom that first led me to contemplate the self-preserving benefits of a customizable User Interface.

Although Silverlight is quite capable of meeting most of your programming needs on its own, one of its common uses is simply as a front-end for a more advanced server-based application. This is where all of Silverlight’s multimedia power can be harnessed to create quite elaborate user interfaces. You could use this to make your web application feel more unique to users by allowing them to fully customize how it looks. For example: If, for whatever reason, a user found the colour Green repugnant – why would they want to use your bright Green application? Why not give them the opportunity to change it to Red? Or Purple? Or any other colour?

I wouldn’t necessarily advise such a thing but it makes a useful demonstration of Silverlight’s versatility, and gives us an excuse to use Expression Blend.

In this article we will create a Silverlight application that uses colour data retrieved from a Cookie in order for us to create a customizable User Interface, unique to each user.

We will cover:

  • Creating and loading User Controls
  • Editing User Controls in Expression Blend
  • Updating colour properties
  • Reading and writing Cookies on the user’s computer
  • Passing data from the host document to Silverlight

1. Getting Started

For anyone who has been following this series of articles, we’re finally going to use Expression Blend! If you haven’t got Expression Blend yet, go to and download the latest preview version. As of the time of writing, it will be the December Preview.

Before we get to the drawing though, create a new Silverlight project in Visual Studio 2008. Give it a convenient name and then open the Solution Explorer.

Now we have our new blank project we can add a new User Control by right-clicking in the Solution Explorer and then selecting “Add > New Item…”

In the Add New Item window, select Silverlight User Control and enter a name for it, (I’ve cunningly called mine “button.xaml”), then click Add.


You’ll be presented with the XAML code for our blank User Control, but we won’t be editing it here. You could create your button using pure XAML code but it’s much faster, more precise, and far easier to edit it in Expression Blend.

To do this, right-click on the new Control and select “Open in Expression Blend…”


You’ll probably be asked if you want to save the project at this point. Just click the “Yes” button and Windows will start Expression Blend with the project ready to be edited.

2. Creating a button in Expression Blend

Expression Blend makes editing XAML mercifully simple. The only problem being that Blend can appear daunting at first-glance. If you’ve previously done any graphical work in Flash, you should find it fairly easy to get your head around once you know where everything is.

If you haven’t ever used Flash, don’t worry. Although you’ll probably find it a bit tougher to grasp, it actually follows a vaguely similar layout to Visual Studio with the addition of a few graphics, and animation features.

Either way, we’ll start from the very beginning for this tutorial. You should now be presented with a window similar to this one:


Here’s a quick tour of the four main sections shown above:

  1. The Objects and Timeline pane shows the layers of objects (Paths, Images, etc.) in your Control and changes to show the timeline of your Silverlight Control, if you add a Storyboard, enabling you to create key-frames for animation. At the moment we have a single Canvas acting as the root object of our Control.
  2. Preview pane shows what your Control looks like. You can draw new objects into this pane in a similar way to most graphics programs.
  3. The Project tab lists all the files contained within your project. Next to it is the Properties tab (which isn’t selected in the above image).
  4. The Code pane displays the XAML code behind your Control. This displays exactly what is within your XAML file and it’s pretty much just a text editor.

Obviously I’m just scratching the surface here, there’s much more to Expression Blend’s interface than these four panes, but these are the main sections we’ll be working with for this tutorial.

For the purposes of our project, let’s make a funky glass button using a few Path layers and some transparent gradients.

The first thing we need to do is specify the size of the button. Click on the White area in the Preview pane. This is our Control’s Canvas, and you should notice that clicking it selects the relevant section of XAML code and also the “[Canvas]” layer in the Objects and Timeline pane.

Click on the Properties tab and find the Layout category. Then change the Width and Height properties to 250, and 100 respectively. As our button will have rounded edges it’s a good idea to make the Canvas transparent allowing the background of the application show through, so drag the A (alpha) slider down to 0% in the colour editor.


Setting the Opacity for our Canvas will affect all its child objects, so make sure it’s left on 100%. You could use this parameter to fade the Control in and out if you wanted to, but let’s not go too crazy just yet.

Ok, let’s start drawing. Click the Rectangle tool from the tool box on the left-hand side of the screen and draw it into the preview window, making sure you leave a bit of blank space round the edges. In the top-left corner of the rectangle there are two anchor points which you can drag in order to round-off the corners.

The rounding effect is specified by the RadiusX and RadiusY properties in the Appearance category so as you drag the anchor points they will both change automatically. The alternative, of course, is to type the values in manually.


When you’re happy with the roundness of your corners select a nice garish red colour for the background, and keep the Stroke, (outline), colour as Black.

This is the Rectangle we will change the colour of in our application, so we also need to give it a name to refer to later. At the top of the property pane change the Name property from “<No Name>” to “btnBG”.

Excellent! Now it’s time to get all arty and create the glass effect using gradients. Aesthetically, this section of the tutorial is completely up to you as long as you follow a few basic rules; but we’ll get to them in a sec.

Copy and paste the rectangle you’ve just created, change the Stroke alpha to 0%, and select Gradient as the fill type.


You can add colours to the gradient by clicking on the gradient bar underneath the colour square, and then dragging them along to edit the transitions between them. Just make sure you only use White and Black so we don’t end up with a button that looks strange when we change its background colour later. Each colour you add can have independent alpha values for transparency.

I made a gradient going from semi-transparent Black, to fully-transparent White, and then reduced the Rectangle’s overall Opacity to 77%.


Now let’s create a layer to give the button a highlight. Copy and paste the last rectangle you made and edit the gradient again. Then fade it out a lot more using the Opacity slider and alpha values.


Don’t worry if it doesn’t look that great. The secret to being a good graphic designer is to assume that everything you do is brilliant no matter how bad it actually looks.

When you’re happy with your button hit CTRL+S to save the project and then go back to Visual Studio. You should be confronted with a message box telling you that some of the project files have changed and asking if you would like to reload them. Just click “Yes”, and we’re ready for some programming.

3. Creating and Reading Cookies using ASP

I won’t go into too much detail about Cookies here because we’d be digressing from the main topic too much. All we need to do is create three Cookies that store colour information. This will be the colour Silverlight will use for our button Control. We’ll also create three text boxes in a moment so we can specify which one we want for our application. For the purposes of this demonstration, we’ll set the cookies to be ephemeral. We’ll set the expiry to be tomorrow. If you were doing it for real, you’d want something a lot more permanent!

Rename “TestPage.html” to “TestPage.asp” and add the following lines of code above the <html> tag:

When that’s done, save the file.

4. Creating and populating Form elements using ASP

Again, this is quite simple. We just need to create a standard HTML form with three text boxes, one submit button, and three hidden form elements.

Open “TestPage.asp” again, and add these lines of code within the <body> tags:

Save the file, and we’re done with Cookies.

The hidden form elements will be the ones our application reads when it loads to get the colour for the button. The text boxes will allow us to specify which colour values we want, and they’ll be saved to our Cookies when the user hits the submit button.

5. Creating our User Control button object at run-time

This is actually a very similar process to the one we used for our High-Speed Loop in my previous article, so if you get lost here you should probably read through that one before continuing.

In order to create our button object, we first declare a variable using the New keyword. Open “Page.xaml.vb” and add the following line:

The button type is a direct reference to our “button.xaml” file. If you called your User Control something other than “button.xaml”, you’ll have to change this accordingly.

We then need to set up a variable to point to our main Canvas object.

Now we have our variables, we need to alter the Page_Loaded function to add our button to the Canvas when the application loads. Find the Page_Loaded function and add the following highlighted lines of code:

Once that’s done, save the file.

6. Changing parameters for our UI object

We’ve already covered updating Silverlight object parameters in the previous two articles, so I’ll try to avoid repeating myself again. All we need to do is set the colour parameter for the button UI object we created in Expression Blend. To do this, we’ll create sub-routines within the button object so we don’t clutter up the main section of code for the application.

Expand “button.xaml” in the Solution Explorer, if it isn’t already, and then open “button.xaml.vb”. Then add a variable we can use to point to our background rectangle.

We’ll also need three Byte variables to store the colour the button should be:

Next, let’s write a sub routine that does our colour changing. The Colour change method we’ll create will take 4 byte values and use them to change the Rectangle.FillProperty value of bg.

We’ve made this sub routine public so we can call it from “Page.xaml” later.

To create a MouseOver event, to apply our colour change, let’s create two new functions. The first one is called mOver, and the second is called mOut.

mOverchanges the colour of our button to the values of our r, g, and b variables. mOut returns it to Black when the mouse leaves the button.

Something to watch out for when developing Silverlight applications is the order in which functions are called. At certain points of the loading process you will find that some methods return an error, simply because the object you’re trying to reference doesn’t exist yet. The easiest way to get around this is to use the “Loaded” property on the object you want to work with, and use it to call a function that will only work when that object has been created.

Let’s create a sub routine that will point our bg variable to the rectangle we need to change the colour of, and then call our Colour change function to make our background rectangle Black when the application starts:

The sender parameter will point to the object that called this sub routine. In this case it will be the rectangle we want to change the colour of. For this to work, we now add a Loaded parameter to our rectangle in “button.xaml”.

Open “button.xaml” and find the first rectangle tag inside the Canvas tags. Then add the following highlighted segment of code:

Now find the last rectangle tag in the Canvas and add the following highlighted bit of code:

Hit F5 and see what happens.

Your button should be displayed in the top-left hand corner of the application, and it should be Black! Move your Mouse cursor over the button and it will remain Black… for now.


7. Passing data from the Document to Silverlight

Now the button is being displayed, we just need to pass the data from our ASP page to Silverlight and we’re good to go.

Well… to be more precise, we’ll suck the data from the page using the HtmlDocument and HtmlElement objects from within Silverlight.

To do this we need to first Import the System.Windows.Browser namespace. So, open up “Page.xaml.vb” and add the following line to the very top of the file:

Then we need to create a variable that will point to our application’s host document:

We nearly have full access to the document and all the elements within it. We only need three elements though: The Red, Green, and Blue hidden form elements we created earlier. Once we are able to access those we need to populate the public r, g, and b variables within our button.

Add the following highlighted lines of code to the Page_Loaded function:

Setting the document variable to HtmlPage.Document opens up the host page for us to read through and get data from. For each of the three elements we’re interested in, (r, g, and b), we need to get the value attribute and populate our button’s r, g, and b variables.

Now, when you run the application, you will be able to specify and store the colour you want the button to change to when you move your mouse over it!



Changing the colour parameters for one button object is just the tip of an extremely large iceberg. Obviously, You could store all sorts of information, in various ways, and subsequently change any number of properties allowing your users to create their most comfortable working environment. Your users could have a field-day customising the entire look of the application; be it position, colour, or style.

Your application could well become your company’s equivalent to MySpaceâ¢; a veritable treasure-trove of elaborately awful design layouts.It’s completely up to them and, more importantly, you can’t be blamed for it!

More importantly, I hope I’ve shown how easy it is to use Expression Blend in the design of your application. Hopefully, there will be fewer hours spent obsessively moving buttons around the screen!

If you would like to see this project in action, go to:
…and all the source code, in both VB and C#, is in the download below.

How you log in to Simple Talk has changed

We now use Redgate ID (RGID). If you already have an RGID, we’ll try to match it to your account. If not, we’ll create one for you and connect it.

This won’t sign you up to anything or add you to any mailing lists. You can see our full privacy policy here.


Simple Talk now uses Redgate ID

If you already have a Redgate ID (RGID), sign in using your existing RGID credentials. If not, you can create one on the next screen.

This won’t sign you up to anything or add you to any mailing lists. You can see our full privacy policy here.