Project Files: SilverlightApplication1.zip (487.22 kb)

At first glance, Silverlight applications have some similarities to WPF.  In reality, Silverlight is a stripped down version of WPF. As such, there are some limitations to what you can do in Silverlight.  In the future, I hope that Microsoft will add more functionality from WPF into Silverlight.

The following tutorial is using Visual Studio 2008 and Silverlight 2.0 Beta 2.  I assume that you are not new to Visual Studio, so I won't go through every step that's not Silverlight-specific.

1.  Create a new Silverlight application.

Once the Silverlight files have been installed, you can create a new Silverlight project just like you'd create a WPF application project.

Silverlight applications must run in a web browser.  Because of this, when you create a new project, Visual Studio 2008 will ask you whether you want to create a web application for the project.

  In this case, I usually go with the default choice of creating a new web application to host the control.  However, you can add the new Silverlight application into an existing project if that is what you require.  In the end, moving the Silverlight application from one project to another is quite easy:  you just need to modify some HTML.  Below is my project newly created in Visual Studio 2008.

2.  Create a new Silverlight User Control

Add to your project a new Silverlight User Control.

A user control is not a fully custom control: it is a control which groups/displays existing controls in a reusable collection.  This is useful if you want to create a "dialog" to display to the user.  You can create a user control which represents the dialog and place the controls (text boxes, buttons, checkboxes, etc.) on the user control that you need.

We are going to place a button and a text box on our control and link them together.  First, you need to edit your user control's Xaml file.

<UserControl x:Class="SilverlightApplication1.SilverlightControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White"
          HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal">
            <TextBox Width="200" Height="30" />
            <Button Content="Push Me" Width="100" Height="50"/>
        </StackPanel>
    </Grid>
</UserControl>

What I changed from the default user control generated:

1. I added a StackPanel, which has a Horizontal orientation
2. To the StackPanel, I added a TextBox and a Button
3. I made the grid centre-aligned
4. I removed the width and height from the UserControl itself so that it will "fit" around the controls.

My control looks like this in the Visual Studio 2008 visualizer:

3.  Place the new control on your page

Placing your control on your page is a 2 step process:

1. Add the namespace for your control to your page.  This is done by adding the following attribute to your page's Xaml:

   xmlns:local="clr-namespace:SilverlightApplication1"

   Visual Studio's IntelliSense helps you out a bit with this one.
2. Insert the control into your page's grid:

   <Grid x:Name="LayoutRoot" Background="White">
       <local:SilverlightControl1 />
   </Grid>

My page's Xaml looks like this:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:SilverlightApplication1"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <local:SilverlightControl1 />
    </Grid>
</UserControl>

and the visualizer shows:

If we compile and run the application now, we'll get the text box and button in our browser.  However, they don't do much.

4.  Do something when the user clicks the button

I want the text box data to convert to uppercase when I click the button.  There are a couple of ways to do this.  It can be done with data binding, but I'm going to do it with C# code.

In order to access the text box, we must give it a name:

<TextBox Width="200" Height="30" x:Name="MyText"/>

On my user control, if I start typing "Click=" in my button, Visual Studio 2008 IntelliSense will prompt me to create a new event handler.

The Xaml looks like this:

<Button Content="Push Me" Width="100" Height="50"
    Click="Button_Click"/>

and a new function was created in the C# code:

private void Button_Click(object sender, RoutedEventArgs e)
{

}

Just like in a WPF application, or a Windows Forms application, we just need to add code to this function to perform the actions for when the user clicks the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
    string sText = MyText.Text;
    sText = sText.ToUpper();
    MyText.Text = sText;
}

Notice that we are accessing the text box data by the name that we gave the text box in the Xaml code.

Now, when we run this in the browser, we get:

and clicking "Push Me" will produce:

There you have it.  You now have a custom User Control that pretty much does nothing useful.  But the steps here should give you an idea of what's needed to customize your own user control for your Silverlight application.

In an upcoming tutorial, I will go through creating a "true" custom control (or in-as-much as you can with Silverlight 2.0).