multiple xaml file in a single Silverlight application

http://www.codeforasp.net/tag/multiple-xaml-file-in-a-single-silverlight-application

multiple silverlight xaml controls in one aspx page

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

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.