- ~ 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
- ~ Posted by Deepak Kamboj on September 23, 2009
As we all know that Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. In order to work with Silverlight first you need to install the Silverlight plug-in. Please install the from Silverlight plug-in. To add Silverlight to your file, you need a reference to the Silverlight.js file into your, a xaml file that contains the behavior of the Silverlight and some JavaScript code to creates Silverlight plug-in instance.
Step - 1
If you are going to use Silverlight into your ASP.NET website, you need to add the reference of Silverlight.js file into your page (If you have master page, better to add the reference into it so that you don't need to add the reference to all your .aspx pages). Please note that the referecne of Silverlight should be placed between <head> and </head> tag and your code should look like <script src="Silverlight.js" type="text/javascript"></script>. Silverlight.js file can be found at this website too, however we suggest to get the latest from Microsoft website.
Step - 2
You need to create a placeholder for your Silverlight content inside your <body> </body> tag where you want your Silverlight content to appear. In general, you should create a div html element and specify its id property like this <div id="fundaSilverlightPluginHost"> </div>
Step - 3
Write the JavaScript code to call the initialization function of Silverlight object like this. You can write this code after your placeholder (Step-2).
<script language="javascript" type="text/javascript">
createSilverlightPlugin('fundaSilverlightPluginHost', '300', '200', 'YourXamlFilePath.xaml')
</script>
Here I am passing all the required value as a parameter. In this case the
1st parameter is the placeholder that I created in the 2nd step,
2nd parameter is the width of the Silverlight plug-in area
3rd parameter is the height of the Silverlight plug-in area
4th parameter is the .xaml file that specifies the behavior of the Silverlight object
Step - 4
Write JavaScript function to initialize the Silverlight object. In my case it looks like below. It can be placed inside the common JavaScript file of your website. In any case, this code must be rendered to the browse before last step (Step - 3) code otherwise browser may throw JavaScript error. Its always better to place this code between <head> and </head>.
function createSilverlightPlugin(placeHolder, width, height, xamlfile)
{
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById(placeHolder);
Silverlight.createObject
(
xamlfile, // Source property value.
parentElement, // DOM reference to hosting DIV tag.
placeHolder, // Unique plug-in ID value.
{ // Per-instance properties.
width:width, // Width of rectangular region of
// plug-in area in pixels.
height:height, // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#fecefe', // Background color of plug-in.
isWindowless:'false', // Determines whether to display plug-in
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null
); // Context value -- event handler function name.
}
Step - 5
Now, you have the placehoder object and function to initialize the Silverlight object. Its time to write the behavior of the Silverlight object. So create a .xaml file and write below code. Please note that you need to specify this file path as a 4th parameter of Step - 3 initialization function.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="200" Fill="LightGreen" Stroke="Red" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<TextBlock Canvas.Left="85" Canvas.Top="20" FontSize="15" FontFamily="Arial, Verdana" Text="DotNetFunda.com Silverlight Tutorials"
FontWeight="Bold" Foreground="Blue" TextWrapping="Wrap"></TextBlock>
</Canvas>
Instead of writing above code into a separate .xaml file, you may write it into your .aspx page as well. In that case your code should look like below.
<script type="text/xml" id="xamlScript2">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="400" Fill="Blue" Stroke="Red"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<TextBlock Canvas.Left="20" Canvas.Top="30" FontSize="20"
FontFamily="Arial, Verdana" Text="DotNetFunda.com Silverlight Tutorials"
FontWeight="Bold" Foreground="White" TextWrapping="Wrap"></TextBlock>
</Canvas>
</script>
Notice that if you have written the .xaml code into your .aspx page, your Step - 3 code should be slightly changed as below. Here, instead of specifying the .xaml file path in the 4th parameter of initialization function, you need to specify the id of the .xaml code preceeded by #.
<script language="javascript" type="text/javascript">
createSilverlightPlugin('divDemoSliverlight', '450', '100', '#xamlScript2')
</script>
Step - 6
Thats it!, Just run your page in the browser and you should see a Silverlight banner like below.
References: http://www.silverlight.net
Backtrack: http://www.dotnetfunda.com/tutorials/silverlight/