XAML page contains one or more elements that control the layout and
behavior of the page.You arrange these elements hierarchically in a
tree.
System.Windows.Application derived class named App with the
associated App.xaml and App.xaml.cs files; as well as a
System.Windows.Controls.UserControl derived class called Page with
the associated Page.xaml and Page.xaml.cs files.
The App class takes care of the initialization and basically you
assign a new instance of your Page class to the App.RootVisual
property and through the power of Silverlight it appears on your
screen. you can set RootVisual as many times you want. So
Application_Startup can be used to call multiple Silverlight
controls.
In this project there are two xaml files and they will be added to
one aspx page(i.e. Default.aspx page)
My Application Name multipleXaml
Xaml Pages are
Page.Xaml
calender.xaml
Page.Xaml Code will look like
<UserControl x:Class=”multipleXaml.Page“
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”200″ Height=”200″>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Ellipse Fill=”Beige”></Ellipse>
</Grid>
</UserControl>
calender.xaml code will look like
<UserControl
xmlns:basics=”clr-namespace:System.Windows.Controls;assembly=System.W
indows.Controls” x:Class=”multipleXaml.calender“
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”200″ Height=”200″>
<Grid x:Name=”LayoutRoot” Background=”White”>
<basics:Calendar></basics:Calendar>
</Grid>
</UserControl>
Remember xaml control names
(multiplexaml.calender remove applicationName multiplexaml. then it remains calender so calender.xaml name is calender)
calender.xaml name is calender
Page.xaml name is Page (multiplexaml.Page)
Note : Before adding this two controls in Default.aspx page you have to modify
App.xaml.cs file modify the code in Application_Startup method. This will call all xaml controls using
initParams
//remember InitParams key name is ControlId using this silverlight controls will display in Default.aspx page. In Default.aspx design code you will observer use of ControlId term in Silverlight control it look like InitParameters=”ControlId=calender”
<asp:Silverlight ID=”Silverlight1” runat=”server”Height=”200px” Width=”200px” InitParameters=”ControlId=calender”
Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″></asp:Silverlight>
code will look like
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page();
if (e.InitParams.ContainsKey(”ControlId“))
{
switch (e.InitParams["ControlId"])
{
case “calender”: //this calls from calender.xaml page
this.RootVisual = new calender();
break;
case “Page”:
this.RootVisual = new Page();
break;
//add more pages like this
//case “dropdown”:
// this.RootVisual = new dropdown();
// break;
}
}
}
Now goto Default.aspx Page Add Two Silverlight control from Toolbox.
(In Toolbox Silverlight Tab name contain Silverlight,Pointer and
MediaPlayer control).
Add ScriptManager above of the Default.aspx Page
Sample Design code look like
Default.aspx Page Design
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<table align=”center”>
<tr>
<td>
<asp:Silverlight ID=”Silverlight1” runat=”server”
Height=”200px” Width=”200px” InitParameters=”ControlId=calender”
Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″>
</asp:Silverlight>
</td>
</tr>
<tr>
<td>
<asp:Label ID=”Label1″ runat=”server”
Text=”Label”></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Silverlight ID=”Silverlight2” runat=”server”
Height=”200px” Width=”200px” InitParameters=”ControlId=Page”
Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″>
</asp:Silverlight>
</td>
</tr>
</table>
</div>
</form>
Now Run the application .In Default.aspx Page ,the Page.Xaml control
and calender.xaml control will appear.
Happy coding
