- ~ Posted by Deepak Kamboj on October 15, 2009
A User Control is a composite of existing elements. You add elements to a User Control to achieve the desired functionality. User control can be consumed more than one time in any application.
This article explains how to create and use a usercontrol control in Silverlight using XAML and C#.
Creating a UserControl
Step 1: Create the project in the Visual Studio 2008 name as SilverlightUsrCtrlApp. Un Check the host the Silverlight application in new a website.
Step 2: In the solution Explorer select the project SilverlightUsrCtrlApp and right mouse click and add New Item. Select the Silverlight User Control from the template list.
Figure 1: to add the user control file
Step 3: Name the Usercontrol xaml file as “LoginControl.xaml” in the above window and hit Add Button.
Step 4: Add the other UI Elements/controls in the user control in the LoginControl.xaml as follows.
<Grid x:Name="LayoutRoot" Background="BurlyWood" > <Grid.RowDefinitions >
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="lblID" Text="User ID:" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBox x:Name="txtUserID" Text="" Grid.Row="0" Grid.Column="1"></TextBox>
<TextBlock x:Name="lblPassword" Text="Password:" Grid.Row="1" Grid.Column="0"></TextBlock>
<PasswordBox x:Name="txtPassword" Password ="" Grid.Row="1" Grid.Column="1" PasswordChar="*"></PasswordBox>
<StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="btnLogin" Margin="10,10,10,10" Content="Login" Width="50" Click="btnLogin_Click"></Button>
<Button x:Name="btnCancel" Margin="10,10,10,10" Content="Cancel" Width="50" ></Button>
</StackPanel>
</Grid>
I added the btnLogin click event handler, so that some functionality could be called. You can call the WCF webservice to authenticate and athurise the use user.
Consume the User Control In Silverlight 3.0:
Step 1: add the Silvelight page where we want to comsume the user control. In this tutorial we are taking the default page called MainPage.xaml.
Step 2: Open MainPage.xaml and add the name space which the silverlight user control is using as follows as shown in italic:
<UserControl x:Class="SilverlightUsrCtrlApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:uc="clr-namespace:SilverlightUsrCtrlApp"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
Step 3: Now add the LoginControl tag in the layout as follows as shown in italic:
<Grid x:Name="LayoutRoot">
<uc:LoginControl ></uc:LoginControl>
</Grid>
Step 4: run the application, you have consumed the user control created in Silverlight.
Type a in userid text box and password and hit ok.
Backtrack: http://www.a2zdotnet.com/View.aspx?id=130