A website may usually have more than one page. These pages may be related and need to accessible from the other pages. We will see how this can be done in Silverlight.
In this lesson, we are going to develop a Multi-Page application, keeping the following goals in mind.
1. Creating new pages.
2. Adding content to page.
3. Navigating between pages.
4. Conditional Navigation.
Step 1. Creating a new Page.
Create a new Silverlight Application Project in Visual Studio. Name it Lesson 2. Now go to solution Explorer and right click on Lesson2. Go to Add -> Add New Item.
Now Add a new Silverlight Page from the available options.
By default, it is Page1.xaml. You can rename it if you want. I am going to rename it to Home.xaml
Similarly add two more pages , and name them Page1.xaml and Page2.xaml
Step 2. Adding Content To Pages
On the main page, add three buttons . -> Right click on the buttons -> go to Properties ->In the properties pane to the right side, change the Content to them Home, Page1 and Page2 (respectively).
We will try to display the three pages in the MainPage.xaml. For that , we need to add a Grid control to the MainPage.xaml , and resize it to a bigger size.
To Home.xaml , Add a TextBlock control . Change its content to Home Page. Similarly for the other 2 pages, add TextBlock control and rename their content respectively.
In the XAML view, you can change the dimensions of the newly added pages. Modify the d.DesignWidth to 300 and d.DesignHeight to 300 , for all the three pages.
Step 3. Navigating between the pages.
In the MainPage.xaml, double click on the Home button.
The default click event handler is generated , and there we need to enter the following code.
grid1.Children.Clear();
grid1.Children.Add(new Home());
The grid which was added to MainPage.xaml is named grid1. grid1.Children contains all the items present in the grid. The clear() method removes any existing content .
New Home() creates an object of the Home page. We are essentially adding the home page to the grid using the above code.
Similarly, add the Page1.xaml and Page2.xaml to the other 2 buttons respectively.
Now Run the project by pressing F5
So we are able to navigate to other pages here .
Step 4. Conditional Navigation.
This conditional navigation can be better understood from this example.
Suppose a user wants to log in to our system. If the username or password both are correct, he has to be redirected to the home page, or else, he has to be directed to another page.
So we’ll create a new Silverlight Application.
Name it Lesson2Login.
Add Two pages HomePage.xaml and ErrorPage.xaml , and rezise them to have height and width 300. To each Page, add a TextBlock and name it Home and Error respectively.
Add two TextBlocks, Two TextBoxes, a Button and a Grid to the MainPage.xaml.
Position and rename them appropriately , as shown
Lets assume the correct username and password are Silverlight and Silver.
Double click on the mouse and enter the following code.
if (textBox1.Text == "Silverlight" && textBox2.Text == "Silver")
{
grid1.Children.Clear();
grid1.Children.Add(new HomePage());
}
else
{
grid1.Children.Clear();
grid1.Children.Add(new ErrorPage());
}
As you can see, we are checking the value of username from textbox1.text and the value of password from textbox2.text . When they match, the HomePage is displayed. Else , the Error Page is displayed.
This is a simple example of conditional Navigation. A more detailed application, exploring many other controls , is built and explained in this video.
