Beginning Silverlight 4 in c#-navigation

In Silverlight, the navigation framework allows developers to implement a way to jump to different pages in a Silverlight application, just like a different page on a Web site. This framework also allows developers to create history to combine with the browser, allowing users to navigate forward and backward using the browser.

Frame and Page objects

The two main objects of a navigation frame are the frame and page objects. Frame is very similar to ContentPlaceHolder in an ASP. NET Master page, where you place different views on a page.

Exercise: Create a navigation silverlight application

In this exercise, you will create a simple application that contains two hyperlink buttons and a frame. Clicking on the hyperlink will load one of the two pages into the frame. Lets Go.

2. Use VS2010 to create a Silverlight application named Navappfromscratch.
4. Open MainPage.xaml, and in the grid, add showgridlines= "True". Define a grid's cells and two hyperlinks:
   

   <grid x:name= "LayoutRoot" background= "white" showgridlines= "True" >    <Grid.RowDefinitions>        < RowDefinition height= "/>"        <RowDefinition></RowDefinition>    </Grid.RowDefinitions>    <stackpanel orientation= "Horizontal" horizontalalignment= "Center" >        

6. The next step is to add the navigation frame to the project. First add the System.Windows.Controls.Navigation.dll Reference
7. The
8. now adds the navigation object to the project. You need to manually add System.Windows.Controls.Navigation to the XML namespace in UserControl. &NBSP
   

   <usercontrol x:class= "navappfromscratch.mainpage" xmlns= "http:/ Schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns" :d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/ markup-compatibility/2006 " xmlns:nav   " Span style= "text-decoration:underline;" >= "Clr-namespace:system.windows.controls;assembly=system.windows.controls.navigation"   Mc:I gnorable= "D" d:designheight= "d:designwidth="; 

10. Add a frame to the bottom grid cell, named Contentframe. The code is as follows:

    <nav:frame x:name= "Contentframe" horizontalcontentalignment= "Stretch     " verticalcontentalignment= "Stretch" Margin= "grid.row=" 1 "borderthickness=" 2 "borderbrush=" Black "/>

12. A new two Silverlight pages, named Page1.xaml and Page2.xaml, are created in the Navappfromscratch project. The respective codes are as follows:
    

    <grid x:name= "LayoutRoot" >    <textblock text= "View 1" fontsize= "$" foreground= "Green" Horizontalalignment= "Center" verticalalignment= "center"/></grid>

    <grid x:name= "LayoutRoot" >    <textblock text= "View 2" fontsize= "$" foreground= "Blue" HorizontalAlignment = "Center" verticalalignment= "center"/></grid>

14. Now all you have to do is click on the button to load the page into frame. You can define the source file name for the page by setting the Tag property of the Hyperlink button.
    

    <stackpanel orientation= "Horizontal" horizontalalignment= "Center" >    Tag= "/page1.xaml" padding= "5"/>    Tag= "/page2.xaml" padding= "5"/></stackpanel>

16. Right-click LinkClick Select "Navigate to Event handlers" and use the Navigate method of the Frame object to load a page, adding the following code:
    

    private void LinkClick (object sender, RoutedEventArgs e) {    Hyperlinkbutton button = (Hyperlinkbutton) sender;    String viewsource = button. Tag.tostring ();    Contentframe.navigate (New Uri (Viewsource, urikind.relative)); }

18. Operation, the effect is as follows:
    
20. Note that you can navigate forward and backward by clicking on the browser's navigation buttons.

Advantages of the Navigation framework

Silverlight4 compared to the previous version, there was a significant improvement, adding a bunch of new features, such as browser history support and deep linking.

Depth link (deep linking)

Another advantage of SILVERLIGHT4 is that it supports deep links. Deep links are the ability to link to a special status page of an application.

To parse the deep link, suppose an application has loaded and displayed the home page. When the user taps the link on the home page, the app navigates to the Product List page. The user can then click to navigate to a product's detailed page. This application can be used to represent:

If you want a link to navigate directly to Product B's detailed page? Using the navigation framework, Silverlight allows developers to link to different states in the application.

NavigationService Object

In the previous section, the Navigate method of the frame object was used to change the page. This requires time and time again to access the frame object hosted on the page. For example, consider that you can easily navigate to View1 from the home page. But if you want to go to inner View1 in View1 's post code, you need to visit the frame object hosted in View1 to navigate to inner View1.

Fortunately, the Silverlight navigation framework contains an object that can access the frame object that hosts the view. This object is NavigationService. Here's how to use the NavigationService object by practicing learning.

Exercise: Using NavigationService objects

This exercise is based on the previous practice and requires the addition of a button in the Page1 and the use of the NavigationService object to navigate to the InnerView1 click event.

2. Open the Page1.xaml of the project and add a button. Modify the code as follows:
   

   <StackPanel>    <textblock text= "View 1" fontsize= "foreground=" Green "horizontalalignment=" Center " verticalalignment= "Center"/>    <button click= "Button_Click" padding= "ten" content= "Navigate to Inner View" Horizontalalignment= "Center"/></stackpanel>

4. Add a Silverlight page named Innerpage, with the code below, just as shown in a simple text.
   

   <stackpanel horizontalalignment= "center" verticalalignment= "center" background= "Black" >    <textblock text= "Inner View 1" fontsize= "Max" foreground= "White" horizontalalignment= "center" verticalalignment= "center"/> </StackPanel>

6. Add a handler for the button in the Page1.xaml post code to navigate to Innerpage.
   

   private void Button_Click (object sender, RoutedEventArgs e) {    navigationservice.navigate (new Uri ("/ Innerpage1.xaml ", urikind.relative));}

8. F5 run can get the following effect, click Navigate to Inner View can jump to Innerpage
   

This section learns how to use NavigationService to navigate through Silverlight pages, and the next section will learn to use Networkcontext objects to pass data between pages.

Passing data to the navigation page

In an HTML page, you can pass data to another page via QueryString. The Silverlight application passes the data through the Navigationcontext object. For example, the following code can get a ProductID:

Exercise: Passing Data

In this exercise continue to use the previous section of the project, here will pass some data into the Innerpage1.xaml.

2. Open the previous section of the project, open Page1.xaml, modify the code to add a ComboBox, code:
   

   <StackPanel>    <textblock text= "View 1" fontsize= "foreground=" Green "horizontalalignment=" Center " verticalalignment= "Center"/>    <button click= "Button_Click" padding= "ten" content= "Navigate to Inner View" horizontalalignment= "Center"/>    <combobox padding= "Ten" margin= "ten" x:name= "Color" width= ">        " <comboboxitem content= "Blue" isselected= "True"/>        <comboboxitem content= "Red"/>        < ComboBoxItem content= "Green"/>    </ComboBox></StackPanel>

4. Then open Page1.xaml's post code file, edit the Button_Click event handler, and use QueryString to pass the selected color:
   

   private void Button_Click (object sender, RoutedEventArgs e) {    string color = Color.SelectionBoxItem.ToString ();    var uri = string. Format ("/innerpage1.xaml? color={0} ", color);    Navigationservice.navigate (new Uri (URI, urikind.relative));}

6. Open Innerpage1.xaml and add a TextBlock below to display the data passed:  
   

   <stackpanel  Horizontalalignment= "Center" verticalalignment= "Center" > <stackpanel background= "Black" > <textblock text= "Inner View 1"  x:name    = "ViewHeader"   fontsize= "+" foreground= "white" horizontalalignment= "Center" verticalalignment= " Center "/> </StackPanel> <textblock text=" (Blue) "X:name=" Viewcolor "fontsize=" + foreground= "Blue" Hori Zontalalignment= "Center" verticalalignment= "center"/></STACKPANEL> 

7. The
8. opens the post code for the Innerpage1.xaml file, uses the Navigationcontext object to retrieve the passed data, and uses switch to process the color, with the following code:  
   

10. F5 run, the effect is as follows (InnerPage1 page browser link is: http://localhost:5379/NavAppFromScratchTestPage.aspx#/InnerPage1.xaml?Color=Red):
    

This section learns to pass data by using the Navigationcontext object in a querystring way. The next section explores the mapping of URIs and how to create friendly URIs to navigate the page.

URI Mapping

In the exercise above, you may notice that the URL of the browser changes when navigating to different pages in frame. You may also notice that these URLs are not very good-looking and contain some information that you might not want to display, such as the following links:

Http://www.domain.com/Catalog.aspx#ProductDetails.xaml?ID=4

This is a lot better if the link changes to the following:
Http://www.domain.com/Catalog.aspx#Product/4

This URL is much easier to read and more friendly. Moreover, it does not reveal the details of your application and can be used to obtain this link by using the URI mapping feature.

Exercise: Using URI mapping

In this exercise, change the above project to use URI mapping to navigate.

2. Open the item above. Here are three pages that need to use URI mapping, Page1.xaml,page2.xaml,innerpage1.xaml.
4. Open App.xaml to add an XML namespace for the navigation framework:
   

   <application xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"             xmlns:x= "http// Schemas.microsoft.com/winfx/2006/xaml "              xmlns:nav=" clr-namespace:system.windows.navigation; Assembly=system.windows.controls.navigation"              x:class=" Navappfromscratch.app "             >

6. Add Urimapper to application resources, in Urimapper, now you need to add three urimapping elements, as follows:
   

   <Application.Resources>    <nav:urimapper x:key= "Urimapper" >        <nav:urimapping uri= "Page1" mappeduri= "/page1.xaml"/>        <nav:urimapping uri= "Page2" mappeduri= "/page2.xaml"/>        <nav: Urimapping uri= "Innerpage/{c}" mappeduri= "/innerpage1.xaml? Color={c} "/>    </nav:UriMapper></Application.Resources>

8. Now the two hyperlink navigation buttons on the main page can be changed to the following:
   

   <stackpanel orientation= "Horizontal" horizontalalignment= "Center" >    Tag= "Page1" padding= "5"/>    Tag= "Page2" padding= "5"/></stackpanel>

10. Similarly, in the backend also to modify, open Page1.xaml.cs, modify the button to handle the event as follows:
    

    private void Button_Click (object sender, RoutedEventArgs e) {    string color = Color.SelectionBoxItem.ToString (); C11/>var uri = string. Format ("innerpage/{0}", color);    Navigationservice.navigate (new Uri (URI, urikind.relative));}

12. Finally add the Urimapper attribute to the frame in the MainPage.xaml:
    

    <nav:frame x:name= "Contentframe" horizontalcontentalignment= "Stretch" verticalcontentalignment= "Stretch"    
        urimapper= "{StaticResource urimapper}"/>

14. Operating effect:
    Http://localhost:5379/NavAppFromScratchTestPage.aspx#InnerPage/red

URI Routing

In addition to URI mapping, the Silverlight navigation framework supports URI routing. For example, if you put all the pages in a folder named "Views", you can set the justification map by this naming convention:

<nav:urimapping uri= "{}{p}" mappeduri= "/views/{p}.xaml"/>

This mapping can match all the XAML files in "views". For example, View1 can match/views/views1.xaml.

Beginning Silverlight 4 in c#-navigation