Page Stack in Windows Phone

In your application there may be many pages and you will come across requirement to navigate between pages. Windows Phone navigation model allows you to navigate between pages. Windows Phone navigation model is same as web based page navigation model. Even though name suggests in Windows Phone, pages are not windows. In your application, you can navigate between many pages and Windows Phone operating system stores those pages on stack. At any given time you have navigation history stored in the page stack. Windows phone operating system pushes all the pages on the stack and popped out pages with back key. When only one page left on page stack on clicking of hardware back button application gets terminated.

Page stack can be understand with below diagram,

You navigated from Page 1 to Page2 then page stack will be as below,

clip_image001

You navigated from Page2 to Page3. Now Page 3 has been pushed to Page Stack.

clip_image002

On Page 3 you pressed hardware back button so Page 3 has been popped out from the Page Stack.

clip_image003

Now on Page 2 you pressed hardware back button so Page 2 has been popped out from the Page Stack.

clip_image004

In last you have navigated back to start page of the application. And only one page is left on the Page Stack. Now if you press hardware back button you will come out of the application.

You can iterate the Page Stack by calling BackStack property of NavigationService class.

clip_image005

BackStack property is having only getter and not setter. So you can read all the pages from the stack but cannot manipulate that.

clip_image006

You can read Uri of all the pages in PageStack as below,

clip_image007

In this way you can work with Page Stack in Windows Phone. I hope this post is useful. Thanks for reading.

 

How to navigate to other page from a user control in Windows Phone 7

Let us say, you have a scenario to navigate from user control

image

In code behind of the user control very first put below namespace,

clip_image001

Next globally define an event as below,

clip_image002

After this you need to create a method to handle page navigation event as below. This function is taking URI to navigate as input parameter.

clip_image003

Let us say you have a button on user control and you want to navigate on click event of that button then you need to call above function inside the click event of the button like below

clip_image005

Finally code behind of user control should look like below


using System;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace test
{
public partial class MyUserControl : UserControl
{

public event EventHandler EventForPageNavigation;

public MyUserControl()
{
InitializeComponent();
}

public void MethodToNavigateToPage(Uri uri)
{
var e = new NavigationEventArgs(null, uri);
if (EventForPageNavigation != null)
EventForPageNavigation(this, e);
}

private void btnNavigate_Click(object sender, System.Windows.RoutedEventArgs e)
{
MethodToNavigateToPage(new Uri("/ImageUpload.xaml", UriKind.Relative));
}
}
}

Next you need to handle this event of the main page where user control is being used. Let us say you are using user control with the name NavigationUserControl. What I mean while adding user control on the XAML of the main page you gave the name NavigationUserControl

First you will have registered the event in the OnNavigatedTo method or constructor of page as below,


NavigationUserControl.EventForPageNavigation += new EventHandler(NavigationUserControl _NavigateToPageEvent);

Then in navigated event navigate to URI as below,


void NavigationUserControl_NavigateToPageEvent(object sender, EventArgs e)
{
NavigationService.Navigate(((NavigationEventArgs)e).Uri);
}

So in this way you can perform navigation in a user control. I hope this post is useful. Thanks for reading

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Introduction to Silver Light 3.0 Navigation

Objective

In this article , I will show how to work with Silver Light Navigation framework.

Create a Silver Light Application by selecting Silver Light application from project template. And follow below steps.

Step 1

Adding references

Add below references to Silver Light application.
System.Windows.Control

System.Windos.Control.Data

System.Windows.Control.Navigation

Step2

Adding namespaces

Open MainPage.Xaml and add the namespace. Give name of the namespace as Navigation and add System.Windows.Control.Navigation. See the image below.


Step 3

Creating Silver Light Page for navigation

Now I am constructing the pages to navigate. Right click on silver light project and add a new folder. You can give any name to folder of your choice. I am giving name here View. Add two silver light pages inside this folder. To add right click on folder and add new Item then select Silver Light page. Page I am adding is

  1. Image.Xaml
  2. Me.Xaml


Me.Xaml

  1. Title of the page can be amending in Title tag. See the tag in bold.
  2. New added Silver Light page is navigation page.
  3. I have added a simple text block with some static text on the page for the demo purpose.

     

<navigation:Page x:Class=”NavigationSample1.Views.Me”
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

mc:Ignorable=”d”

xmlns:navigation=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation”
d:DesignWidth=”640″ d:DesignHeight=”480″Title=”This Page is About Me”>
<Grid x:Name=”LayoutRoot”>
<TextBlock Text=”This Site is about me “ FontSize=”100″ VerticalAlignment=”Center” Foreground=”Red” />
</Grid>
</navigation:Page>

 Image.Xaml

  1. Title of the page can be amending in Title tag. See the tag in bold.
  2. New added Silver Light page is navigation page.
  3. One image is added for the demo purpose.
<navigation:Page x:Class=”NavigationSample1.Views.Image”
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

mlns:d=http://schemas.microsoft.com/expression/blend/2008
xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

mc:Ignorable=”d”
xmlns:navigation=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation”
d:DesignWidth=”640″ d:DesignHeight=”480″Title=”My Image”>
<Grid x:Name=”LayoutRoot”>
<Image Height=”auto” Width=”auto” Source=”a.jpg” />
</Grid></navigation:Page>

Step 4

Designing for navigation

Now it is time to design main page for navigation.

  1. I am adding two HyperLinkButtons. On clicking of buttons, we will navigate to other pages.
  2. There is TAG property of hyperlink, which says where hyperlink will navigate. Views are folder we added and Me.Xaml is silver light page to navigate.

    Tag=”/Views/Me.Xaml”

  3. Add either a frame or page to where navigated page will be open. There are two options either Page or Frame. Navigation is the name of the namespace we added.
  4. Navigation framework can have many properties. I am setting few of them. See below.

    <Navigation:Frame x:Name=”MyFrame” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”20″ />

MainPage.Xaml

<UserControl x:Class=”NavigationSample1.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&#8243; xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

xmlns:Navigation=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation”
mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
<Grid x:Name=”LayoutRoot” Width=”auto” Height=”auto” Background=”Wheat” >

<StackPanel Orientation=”Horizontal” VerticalAlignment=”Top” >

<StackPanel Orientation=”Vertical” Width=” 250″>

<HyperlinkButton x:Name=”btnAbt” Tag=”/Views/Me.Xaml” Content=”About Me” FontSize=”24″ />

<HyperlinkButton x:Name=”btnImg” Tag=”/Views/Image.Xaml” Content=”My Images” FontSize=”24″ />
</StackPanel>
<Navigation:Frame x:Name=”MyFrame” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”20″ />

</StackPanel>

</Grid>
</UserControl>
 

Step 5

Writing code behind to navigate

  1. Add click event to hyperlinkbuttons.

btnAbt.Click += new RoutedEventHandler(NavigateToLink)

btnImg.Click +=new RoutedEventHandler(NavigateToLink);

  1. Handle the click event

void NavigateToLink(object sender, RoutedEventArgs e)

{
HyperlinkButton buttonToNavigate = sender as
HyperlinkButton;

string urlToNavigate = buttonToNavigate.Tag.ToString();
this.MyFrame.Navigate(new Uri(urlToNavigate, UriKind.Relative));
}

MainPage.Xaml.cs

namespace NavigationSample1

{
public partial class MainPage : UserControl
{

public MainPage(){

InitializeComponent();btnAbt.Click += new RoutedEventHandler(NavigateToLink);

btnImg.Click +=new RoutedEventHandler(NavigateToLink);

}

void NavigateToLink(object sender, RoutedEventArgs e){
HyperlinkButton buttonToNavigate = sender as HyperlinkButton;
string urlToNavigate = buttonToNavigate.Tag.ToString();
this.MyFrame.Navigate(new
Uri(urlToNavigate, UriKind.Relative));

} }}
 

Step 6

Run the application.

You can see while clicking on the hyperlinks, we are able to navigate in the frame. So, we are able to navigate through pages using navigation framework.

Conclusion

We saw how to work with navigation framework in this article. Thanks for reading

Navigation in Silver Light

Objective

This article will show, How to navigate between two SilverLight pages in silverLight2.0. This article is giving step by step illustration on how to navigate and pass values between two SilverLight pages. In this SilverLight application user will input her name and two numbers in one Silverlight page and user will get greeting message and summation of input number in other SilverLight page.

 Step 1
Create a Silver Light application.

  1. Open visual studio
  2. Select File->New ->Project -> Web
  3. Navigate to Silver Light tab.
  4. Select Silver Light application.
  5. Give any meaningful name. I am giving name here, SilverLightNavigation.
  6. lect hosting the application into web project.

 Step 2

  1. Delete MainPage.Xmal from Silver Light project.
  2. Add two new user controls to Silver Light project. To do so Right click on Silver Light project and add new Item. Navigate to Silver Light tab. Then select Silverlight user control. Give name of the user controls as Page1 and Page2.    

 Step 3
Open App.Xaml.cs file.

  1. Declare a container element.

    Grid navigationUI = new Grid(); 

  2. Add the page, which is to be navigating as the child of the container we just created.
    this.RootVisual = navigationUI;
    navigationUI.Children.Add(new Page1());
  3. Now we will take three private variables inside App.Xaml.cs. one for username as string and two for two inegers to be added. 
private string name;
private int number1;

private int number2;

public string Name
{ get { return name;}set{name = value;}}
public int Number1 { get{ return number1;}set{number1 = value;}}
public int Number2{get{return number2 ;}set{number2 = value;}}
  1. Now we will add a static method, which will navigate the pages.

public static void NavigateToPage(UserControl page)
{

App application = (App)Application.Current;

application.navigationUI.Children.Clear();

application.navigationUI.Children.Add(page);}

So, the entire App.Xaml.cs file will look like below. Codes in red rectangle are added by us.

App.Xaml.cs

namespace SilverLightNavigation{

public partial class App : Applicatio{

private string name;
private int number1;
private int number2;
public string Name{ get { return name; }set{name = value;}}
public int Number1 {get return number1;}set{number1 = value;}}
public int Number2
{get{return number2 ;}set{number2 = value;}}
Grid navigationUI = newGrid();
public App()
{
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;

this.UnhandledException += this.Application_UnhandledException;

IitializeComponent();}
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = navigationUI;

navigationUI.Children.Add(newPage1());}


private void Application_Exit(object sender, EventArgs e){}
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if (!System.Diagnostics.Debugger.IsAttached)
{
e.Handled = true;
Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });}}

privatevoid ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e){

try
{
string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
errorMsg = errorMsg.Replace(‘”‘, ‘\”).Replace(“\r\n”, @”\n”);
System.Windows.Browser.HtmlPage.Window.Eval(“throw new Error(\”Unhandled Error in Silverlight Application “+ errorMsg + “\”);”);
}
catch (Exception){}
}
public static void NavigateToPage(UserControl page)
{
App application = (App) Application.Current;

application.navigationUI.Children.Clear();application.navigationUI.Children.Add(page);

}}}

Step 4

Now create or customize the XAML of Page1 for user interface. It contains three text boxes to get user input. And one Button to navigate to other page.

Page1.Xaml

<UserControl x:Class=”SilverLightNavigation.Page1″
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Width=”auto” Height=”auto”>

<Grid x:Name=”LayoutRoot” Background=”White” Height=”600″ Width=”600″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”*” />

</Grid.ColumnDefinitions>

Grid.RowDefinitions>
<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />
<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<TextBlock x:Name=”lblUname” Grid.Column=”0″ Grid.Row=”0″ Text=”UserName” />

<TextBox x:Name=”txtUname” Grid.Column=”1″ Grid.Row=”0″ Height=”50″ Width=”150″ />

<TextBlock x:Name=”lblNum1″ Grid.Column=”0″ Grid.Row=”1″ Text=”Number1″ />

<TextBox x:Name=”txtNum1″ Grid.Column=”1″ Grid.Row=”1″ Height=”50″ Width=”150″ />

<TextBlock x:Name=”lblNum2″ Grid.Column=”0″ Grid.Row=”2″ Text=”Number2″ />
<TextBox x:Name=”txtNum2″ Grid.Column=”1″ Grid.Row=”2″ Height=”50″ Width=”150″ />
<Button x:Name=”btnNavigate” Content=”Click me For Navigation and Result” Height=”100″ Width=”300″ Grid.Column=”0″ Grid.Row=”3″ Click=”btnNavigate_Click/>
</Grid>
</UserControl>

 Step 5:

On the click event of button

Create instance of current applicationCall the static method to navigate to other page.
Page1.Xaml.cs

 

 namespace SilverLightNavigation
{
public partial class Page1 : UserControl
{
public Page1()
{
InitializeComponent();
}
private void btnNavigate_Click(object sender, RoutedEventArgs e)
{

App application = (App)Application.Current;

application.Name = txtUname.Text;
application.Number1 = Convert.ToInt32(txtNum1.Text);

application.Number2 = Convert.ToInt32(txtNum2.Text);


App.NavigateToPage(newPage2());
}}}

 Step 6:
Now create or customize the XAML of Page2 to display the result and User name. it contains two labels. One to display user name, and other two display sum of two numbers. This page also contains one Button to navigate to previous page.
Page2.Xaml

<UserControl x:Class=”SilverLightNavigation.Page2″
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Width=”auto” Height=”auto”>

<Grid x:Name=”LayoutRoot” Background=”White” Height=”500″ Width=”600″>

<Grid.RowDefinitions>

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<TextBlock x:Name=”txtUserDisplay” Grid.Row=”0″ Text=”Welcome to Navigated Page ” />
<TextBlock x:Name=”txtResult” Grid.Row=”1″Text=”Sumation of two Numbers = ” />

<Button x:Name=”btnNavigateback” Grid.Row=”2″ Height=”100″ Width=”200″ Content=”Navigate to back Page” Click=”btnNavigateback_Click” />
</Grid>
</UserControl>

Step 7

Add below code in code behind to display user name and summation of two numbers. Also add below code to navigate to previous page.

Page2.Xaml.cs

 

 namespace SilverLightNavigation
{
public partial class age2 : UserControl
{
public Page2(){
InitializeComponent();
App application = (App)Application.Current;
txtUserDisplay.Text = txtUserDisplay.Text + application.Name;
int res = application.Number1 + application.Number2 ;
txtResult.Text = txtResult.Text + res.ToString();
}
private  vid btnNavigateback_Click(object sender, RoutedEventArgs e)
{
App.NavigateToPage(newPage1());
}}}

Press F5 to run with debugging and test your application. In this article, we saw how to navigate between two Silver Light pages and pass value in between them. Happy coding

Navigation Web Site

  1. Create a website project. Make it a file system based web site.
  2. In the File menu , choose either WebSite. Select ASP.Net Web Site in the Templates pane.


  3. Change the Name to NavigationSite and click OK.
  1. Delete Default page from the application. Why we are deleting Default page because it would be easier to implement master page.

     

    To remove the page, select it from Solution Explorer and press the DELETE key. Visual studio will ask for confirmation, press YES.

     

  2. Create a Master page for the Web Site. Click the right mouse button on the Project node to solution and select Add New Item. Choose Master Page from the template. Keep default name. Click ADD.


  3. Add Several Pages Based on the Master Page. I am going to add four pages here.

    Default

    Right

    Left

    Center

    Home

    To add a page, click right mouse button on Project and select Add New Item. Choose Web Page from template. Make sure one thing the Select Master Page check box in checked as you select in the template. By doing this Master page will get apply automatically on each page.

    After clicking add button, new dialog box will appear, select Master Page and click Ok there.

    While adding page give name as Center.aspx, Right.aspx, Left.aspx and Home.aspx.



  4. Add a New Site Map to the Project. Click the right mouse button on the project in solution explorer . Select Site Map from the template. Keep the name Web.sitemap as it is. This is default name for Site map.


  5. Write code for Site Map. To write code for Site Map click on Web.sitemap in solution explorer. Code window will open for Web.sitemap. By default below code will appear


<?xml
version=1.0
encoding=utf-8 ?>

<siteMap
xmlns=http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 >

<siteMapNode
url=“”
title=“”
description=“”>

<siteMapNode
url=“”
title=“”
description=“” />

<siteMapNode
url=“”
title=“”
description=“” />

</siteMapNode>

</siteMap>

 

Modify above code accordingly , like below.

 

 

<?xml
version=1.0
encoding=utf-8 ?>

<siteMap
xmlns=http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 >

<siteMapNode
url=Home.aspx
title=HOME
description=This is My Home>

<siteMapNode
url=Right.aspx
title=Right Rotation
description=This is Right Window />

<siteMapNode
url=Left.aspx
title=Left Rotation
description=This is Left Window />

<siteMapNode
url=Center.aspx
title=Center Rotation
description=This is Center Window />

</siteMapNode>

</siteMap>

In above code all pages are being added to siteMapNode.

 

  1. Click on Home.Aspx in Solution explorer. Sleect design view . Drag menu from ToolBox and drop it on the Home.aspx page.
  2. Click on arrow button
    of menu or select its property . Click on Choose Data source then select New Data Source. After new Data source select SiteMap and press ok.



  1. Now add few images in site. Right click on Project . click add existing item. Then browse to add four images in the project.
  2. Drag a Image Control on Left.aspx , Right.aspx, center.aspx and Home.aspx.
  3. Select property of Image Control. Click on Image Url then select any image .


  4. After adding image run the Project or browse the website in browser. Output will come like below.