Scribd
Upload
40 views

Embedding Multiple Silverlight Custom Controls in An Asp - Net Page

This document provides steps to embed multiple Silverlight user controls in the same ASPX page. The steps include: 1. Creating a Silverlight application project and adding two user control files (LoginControl.xaml and HelloWorld.xaml) 2. Modifying the application startup code to determine which user control to load based on an initialization parameter 3. Updating the ASPX page to host both Silverlight controls, setting a unique initialization parameter for each.

Uploaded by

Girish PS
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views

Embedding Multiple Silverlight Custom Controls in An Asp - Net Page

This document provides steps to embed multiple Silverlight user controls in the same ASPX page. The steps include: 1. Creating a Silverlight application project and adding two user control files (LoginControl.xaml and HelloWorld.xaml) 2. Modifying the application startup code to determine which user control to load based on an initialization parameter 3. Updating the ASPX page to host both Silverlight controls, setting a unique initialization parameter for each.

Uploaded by

Girish PS
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Embedding multiple silverlight user controls in the same aspx page

Using Visual Studio 2010

Step by step instructions:

1. Create a new silverlight application project and name it – “MultipleUserControl”.

2. In the next window that appears select the check box “Host the silverlight application in a new
website”.
3. Right click the solution and click on “Add New Item” and select “Silverlight User Control”. Create
2 such controls – “LoginControl.xaml” and “HelloWorld.xaml”
4. Now the solution folder looks life this.
5. HelloWorld.xaml

<UserControl x:Class="MultipleUserControl.HelloWorld"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

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


<StackPanel Height="100" HorizontalAlignment="Left" Margin="93,44,0,0"
Name="stackPanel1" VerticalAlignment="Top" Width="200">
<TextBlock Name="textBlock1" Text="Hello, World!" />
<Ellipse Height="46" Name="ellipse1" Stroke="Black" StrokeThickness="1"
Width="140" Fill="#FF62CF62" />
<Button Content="Click" Click="FirstButton_Click" Height="23"
Name="FirstButton" Width="75" />
<StackPanel.Resources >
<Storyboard x:Name="FirstStoryBoard">
<DoubleAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Width" To="1" AutoReverse="True" Duration="00:00:01">

</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</Grid>
</UserControl>
6. HelloWorld.xaml.cs
7. LoginControl.xaml

<UserControl x:Class="MultipleUserControl.LoginControl"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<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>
</UserControl>
8. LoginControl.xaml.cs

9. App.xaml.cs

Modify the Application_Startup function for handling multiple user controls

private void Application_Startup(object sender, StartupEventArgs e)


{
if (e.InitParams.ContainsKey("ControlId"))
{
if (e.InitParams["ControlId"] == "1")
this.RootVisual = new MainPage();
else
this.RootVisual = new Login();
}

}
10. MultipleUserControlTestPage.aspx to be modified as given below.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>MultipleUserControl</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}

var errorType = args.ErrorType;


var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {


return;
}

var errMsg = "Unhandled Error in Silverlight Application " + appSource +


"\n" ;

errMsg += "Code: "+ iErrorCode + " \n";


errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}

throw new Error(errMsg);


}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">

<div id="silverlightControlHost1">
<object id="Hello" data="data:application/x-silverlight-2," type="application/x-
silverlight-2" width="50%" height="50%">
<param name="id" value="Xaml1" />
<param name="initParams" value="ControlId=1" />
<param name="runat" value="server"/>
<param name="Source" value="ClientBin/WorkingModel.xap"/>
</object>
</div>

<div id="silverlightControlHost2">
<object id="Login" data="data:application/x-silverlight-2," type="application/x-
silverlight-2" width="50%" height="50%">
<param name="id" value="Xaml1" />
<param name="initParams" value="ControlId=2" />
<param name="runat" value="server"/>
<param name="Source" value="ClientBin/WorkingModel.xap"/>
</object>
</div>

</form>
</body>
</html>
Voila! Now when we run the MultipleUserControl.Web we get both the user controls in the
same aspx page as shown below.

You might also like