How to work with multiple xaml file in a single Silverlight application

SheoNarayan
Posted by in Silverlight category on for Intermediate level | Views : 41107 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article, I shall try to explain how to work with multiple .xaml file in a single Silverlight application.
Getting Started
Before I proceed further, let me take this opportunity to let the beginners of Silverlight know that from where they can install the pre-requisite softwares of start developing Silverlight application. Please download the pre-requisite softwares from http://silverlight.net/GetStarted/. After installing these softwares you will have Silverlight as Project Type in your Visual  Web Developer or Visual Studio and you will be able to create Silverlight application.

How to work with multiple .xaml file
Now let us come to the main topic of this article. By default, when we create Silverlight application by choosing File > New Project ... > Silverlight (Project type) and Silverlight Application (Templates) > Add a new ASP.NET Web proejct to host Silverlight (radio button), you will get a web project and a SilverlightApplication project with App.xaml and Page.xaml file.

App.xaml file contains application specific events such as Application_Startup, Application_Exit etc. In general, you don't need to change any code into this page.

Page.xaml file contains a default template for the Silverlight page. By default, this page is set to display on the .aspx or html pages.

There are scenarios when you want to add multiple .xaml file into your Silverlight project for different purposes, in this case you need to show them on button click or other events. I have described three scenarios here in which I have used multiple xaml file and I shall also show how to call other .xaml page from the current .xaml page.

Scenario 1 - Replacing current .xaml page content with another .xaml page contents

If your requirement is to replace current .xaml file contents from another .xaml file contents, you can do this in following way. Create a button like below.

<Button x:Name="menu5" Content="Load Another Page" Click="New_Click"  Width="120" Height="25" Canvas.Left="410"></Button>
On click of this button, New_Click event will fire, write following code for this event.

private void New_Click(object sender, RoutedEventArgs e)
{
    this.Content = new TabControl();
}
Here TabControl is my another xaml file. In this case, the current content of the .xaml file will be replaced with the another .xaml file contents. 

Get solutions of the .NET problems with video explanations, .pdf and source code in .NET How to's.


Scenario 2 - Specifying xaml file in the Silverlight tag in .aspx or .html page

There might be a scenario, when you do not want Page.xaml file to be displayed as your startup page for the Silverlight application OR you want to use your Silverlight object at different places and display different startup pages based on the place it is being used.

By default, it is not allowed to specify the .xaml file name in the Silverlight tab in .aspx or .html pages. However, there is a work around. We can specify "InitParameters" in the Silverlight tag and handle this parameter in the appl.xaml.cs file in the Application_Startup event. Lets see how to do that.

Specifying InitParameters in the Silverlight tag in .aspx or .html page
<asp:Silverlight ID="Xaml1" runat="server" InitParameters="PageID=1" Source="~/ClientBin/SilverlightApplication.xap" MinimumVersion="2.0.31005.0" Width="600" Height="400"></asp:Silverlight>
Now, handle the value of InitParameters in the app.xaml.cs file like this.

private void Application_Startup(object sender, StartupEventArgs e)
{
if (e.InitParams.Count > 0)
{
if (e.InitParams["PageID"].Equals("1"))
this.RootVisual = new Page();
else
this.RootVisual = new MainPage();
}
else
this.RootVisual = new MainPage();

}
In the above code, I have first checked for the Count of InitParams, if it is more than 0 then InitParameters value has been specified in the Silverlight tag of .aspx or .html pages and I should check for that otherwise not. Based on the PageID value, I am specifiying RootVisual value to the new instance of required .xaml file. Here, Page, MainPage is the name of my .xaml file.


Scenario 3 - Working with Menu/Tab based structure

There is scenario, where you do not want complete content of the parent xaml file to be overridden by another xaml file. You want menu or tab like structure ie. If I click first button on the parent xaml page, 1st xaml file content should be displayed below the menu/tab and if I click 2nd button of the parent xaml page, content of 2nd xaml file should be displayed below the menu/tab and so on. In this case we can use following approach.

.xaml code
<Canvas>
<Canvas Margin="2" Background="AliceBlue">
<Button x:Name="menu1" Content="Misc" Click="Misc_Click" Width="50" Height="25" Canvas.Left="10"></Button>
<Button x:Name="menu2" Content="Data" Click="Data_Click" Width="50" Height="25" Canvas.Left="60"></Button>
<Button x:Name="menu3" Content="Web Service" Click="WebService_Click" Width="100" Height="25" Canvas.Left="110"></Button>
<Button x:Name="menu4" Content="Tab Control" Click="TabControl_Click" Width="100" Height="25" Canvas.Left="210"></Button>
</Canvas>
<StackPanel x:Name="MainPlaceHolder" Canvas.Top="50"></StackPanel>
</Canvas>

In the above code snippet, I have placed 4 different buttons for 4 of my .xaml file contents. Every button has click event attached to them. Notice that I have placed a StackPanel control also just below the canvas placeholder of the buttons (I am calling them menu/tab). My approach will be to load the xaml file contents into this stack panel based on which button has been clicked. See the following code snippet.

        private void Misc_Click(object sender, RoutedEventArgs e)
{
MainPlaceHolder.Children.Clear();
MainPlaceHolder.Children.Add(new Page());
}

private void Data_Click(object sender, RoutedEventArgs e)
{
MainPlaceHolder.Children.Clear();
MainPlaceHolder.Children.Add(new SilverlightControl1());
}

private void WebService_Click(object sender, RoutedEventArgs e)
{
MainPlaceHolder.Children.Clear();
MainPlaceHolder.Children.Add(new WebServiceAccess());
}

private void TabControl_Click(object sender, RoutedEventArgs e)
{
MainPlaceHolder.Children.Clear();
MainPlaceHolder.Children.Add(new TabControl());
}
Here, "MainPlaceHolder" is the name of the stack panel. In this case what I am doing is that first I am clearing any children controls that might be in the stack panel then adding new children control as my xaml file. As my stack panel is below the buttons controls so my menu/tab button will still be visible but the below content will change based on which button has been clicked.

Hope this article will be useful and you enjoyed reading this article. Please feel free to write your feedback or comments. Thanks for reading and Happy Coding !!!


Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)