Using Silverlight Controls in ASP.NET

Latest Microsoft RIA platform, Silverlight is amazing. The Silverlight 2 Software Development Kit (SDK) Beta 2 includes two ASP.NET server controls.

1. MediaPlayer control
   The ASP.NET MediaPlayer control lets you integrate media sources such as audio (WMA) and video (WMV) into a Web site, without requiring any knowledge of XAML or JavaScript
2. Silverlight control.
   The ASP.NET Silverlight control enables you to integrate XAML and any supporting code (a managed-code assembly, a managed dynamic-language script module, or client JavaScript libraries) into a Web site.

Unlike the MediaPlayer server control, the Silverlight server control is generic and is not designed only to manage media files but other files as well. These controls are designed to seamlessly integrate with the Silverlight client plug-in to deliver Rich Internet Applications (RIA).

Prerequisites:

1.       Visual Studio 2008 with SP1

2.       Silverlight Tools for Visual Studio 2008 SP1

3.       Expression Blend 2 with SP1

Let's start step by step.

Open Visual Studio 2008- File->New->Project->Silverlight Application

Further it will ask how you want to host the Silverlight Application, select Add a new web to host the control.

The solution will look like below.

And the contents of the test page will look like following.

Change the Page.xaml with Visual Studio 2008 or you can use Expression Blend to modify the XAML contents. Click on menu item "Open in Expression Blend" to open file in Blend.

Here I am going to use Expression Blend.

In the left side you can see the tools. The bottom icon is for all the assets that you have in your Silverlight library.

And on clicking on this you will get the list of all controls you can use to create you page.xaml

Now drag drop TextBlock (provides a lightweight control for displaying small amount of flow content), TextBox (represents a control that can be used to display or edit unformatted text), Button (Represents a window button control, which reacts to the Buttonbase.Click event), Border (draw a border, background or both around another element) and StackPanel (arrange child elements into a single line that can be oriented horizontally or vertically).  Add Click Event to the button

After doing some formatting the resulting xaml will look 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"

    Width="800" Height="600">

    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="false">

        <Grid.RowDefinitions>

            <RowDefinition Height="10" />

            <RowDefinition Height="50" />

            <RowDefinition Height="50" />

            <RowDefinition Height="10" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="10" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="10" />

        </Grid.ColumnDefinitions>

        <Border BorderBrush="Black" BorderThickness="2" Grid.Row="2" Grid.Column="1" CornerRadius="5,5,5,5"/>

        <TextBlock Text="" Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom" FontSize="18" Margin="15,0,0,0" x:Name="TextBlock1" />

        <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal">

            <TextBox x:Name="TextBox1" Width="250" Height="30" Margin="15,0,0,4" VerticalAlignment="Bottom"/>

            <Button x:Name="Button1" Width="75" Height="30" Margin="20,0,0,4" Content="Button" VerticalAlignment="Bottom"  Background="Blue" FontWeight="Bold" FontSize="14" Click="Button1_Click" />

        </StackPanel>

    </Grid>

</UserControl>

Add the code to the button click event handler:

private void Button1_Click(object sender, EventArgs e)

        {

            TextBlock1.Text = TextBox1.Text;

     }

 

That's all. You are done. Run the application and you will see the result page as below.