Create User Control in Silverlight

The purpose of a user control is to provide the ability to reuse common user interface functionality across our web applications.

A Silverlight user control enables us to build a new control from existing controls. The purpose of a user control is to provide the ability to reuse common user interface functionality across our web applications.

Steps to create and use a Silverlight user control

Step 1: Start with VS 2008 IDE-New-> Project-> Silverlight-SilverlightApplication or open an existing SilverlightApplication from our IDE.

Step 2: Right-click on the SilverlightApplication Project->Add->New Item.



Figure 1: Add UserControl

We will see the diagram above and give an appropriate name for the user control; here I am giving it the name FirstSilverlightControl.xaml. ".xaml" is the extension of a Silverlight user control. Click on the Add button to create our user control.

Step 3: We will now write some xaml code in FirstSilverlightControl.xaml for User interface design. Here I create a UserControl that works. Take a name from the user and after clicking the button it displays a name.

The Silverlight UserControl FirstSilverlightControl.xaml UI code is:

<UserControl x:Class="UserControlExample.FirstSilverlightControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.00" Color="Orange" />
                    <GradientStop Offset="0.50" Color="White" />
                    <GradientStop Offset="1.00" Color="Green" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" ></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Name" Grid.Row="0" Grid.Column="0" Height="50" FontSize="18"></TextBlock>
        <TextBox x:Name="txtname" Grid.Row="0" Grid.Column="1" Width="100" Height="30"></TextBox>
        <Button x:Name="btnsubmit" Content="Click Me" Click="btnsubmit_Click" Height="50" Grid.Row="0" Grid.Column="2" Width="100" ></Button>
        <TextBlock x:Name="txtmessage" FontSize="24"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"  HorizontalAlignment="Left"></TextBlock>
    </Grid>
</UserControl>

In the above code UserControlExample is the Silverlight ApplicationName and namespace. FirstSilverlightControl is the user control name and class name that inherits UserControl class.

Step 4: Implemantation of UserControl.

In the MainPage.xaml page we first add the namespace of the user conrtol FirstSilverlightControl .xaml. We write the following code in MainPage.xaml:

xmlns:uc="clr-namespace:UserControlExample"

In the above code we include UserControl namespace in MainPage.xaml page. It can be after any xmlns line MainPage.xaml. In the above I am using "uc" prefix tag for UserControl. We can use another prefix tag for it; it is not necessary that it be "uc". But here we are using "uc" then we call our user control with the "uc" prefix tag.

Now call our user control FirstSilverlightControl .xaml in MainPage.xaml.

<uc:FirstSilverlightControl Width="400"></uc:FirstSilverlightControl>

"uc" is the prefix tag for a UserControl definition and "FirstSilverlightControl" is the UserControl name and class name of our user control in the above code.

Step 5: In the MainPage.xaml Grid container we add our Silverlight UserControl. That will be displayed as the application output.

<UserControl x:Class="UserControlExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:uc="clr-namespace:UserControlExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <uc:FirstSilverlightControl Width="400"></uc:FirstSilverlightControl>
    </Grid>
</UserControl>

Step 6: We use points 4 and 5 for implementation of a user control but we have another easy alternate of that. That is used in the code behind file. We write some code in MainPage class constructor after the InitializeComponet() method call.

public MainPage()
        {
            InitializeComponent();
            FirstSilverlightControl firtscontrol = new FirstSilverlightControl();//create an instance of user control
            LayoutRoot.Children.Add(firtscontrol);//add user control in Grid

        }

OUTPUT:

The above points 4 and 5 or 6 gives the same output.



Figure 2 Output of code