Pages

Thursday 1 December 2011

Lesson2 : Your First multi page Silverlight application

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.   

No comments:

Post a Comment