Windows Phone 8.1: Understanding Navigation Between Pages

0

featureimage

In this post we will discuss:

  • How to navigate from one page to another using Visual Studio 2013 with update2
  • How to pass parameters from one page to another

Remember, this post mainly focuses on building concept to navigate in windows 8.1 apps and not windows 8 apps (as windows 8 apps uses different concept of navigation). Before you begin you must have visual studio 2013 with RC update 2 installed in your computers.

Before starting with coding work we would understand the meaning of navigation

Navigation in simple term means to move from one page to another. It is indispensable if you want to make a useful app that involves more than one pages.

In this project we will create  buttons with different background and foreground colors and pass the background and foregrounds colors from the mainpage to page1 and create a navigate back button to navigate back to mainpage to understand navigation between navigation.

STEP 1 : First we will create a new project:

  1. Create a new project by selecting the File | New Project menu command.
  2. The New Project window will be displayed. Expand the Visual C# templates, and then select the Windows Phone templates.
  3. Select the Windows Phone App  template. Fill in the project name as desired.

STEP 2:Next we will add a textblock and button and name it Button Stack and Button 1 as shown in the following code :

<Grid>
        <StackPanel>
            <TextBlock Height="74"
                       Text="Button Stack"
                       FontSize="60"
                       TextAlignment="Center"
                       Margin="0,20,0,20"
                       ></TextBlock>
            <Button Name="button1"
                    HorizontalAlignment="Center"
                    Height="90" 
                    Background="White"
                    Foreground="Black"
                    FontSize="25" Click="button1_Click"
                    >This is button 1</Button>
</stackpanel>
</grid>

windows phone 1

STEP 3: Next we will add another page to the project and name it as “Page1.xaml”

In the solution explorer , right click on project title and click on the add option , choose a new option .

windows phone 2

windows phone 3

STEP 4: We will create a new class , just simple right click on title and click on the add option, select a class.

windows phone 4

windows phone 5

Till now we have added 2 pages and a class to our project, and on one page we have a button which is white in color .

STEP 5: To the class we will add the properties we need to transfer from one page to another.

The code is given below:

class PropertiesClass
    {
        public string background { get; set; }
        public string foreground { get; set; }
        public string name { get; set; }
    }

 

Since we wanted the name, background, and foreground properties to be transferd from our mainpage to page1 we added those properties in the above code.
STEP 6: In the mainpage.xaml.cs we will write a code that will transfer us from mainpage to page1 .Since this is happening at the click of event we will add an event handler of “on click” by simply either double clicking the button or by adding the onclick event in properties pane .

Once we have added the on click event we will simply add the following code which helps us to navigate from one page to another.

private void button1_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1));
        }

 STEP 7: In page1.xaml we will add the following code:

<StackPanel>
	            <TextBlock Height="74"
                       Text="You have reached Page 1"
                       FontSize="60"
                       TextAlignment="Center"
                       Margin="0,20,0,20"
                       ></TextBlock>
	            <TextBlock 
		       Name= ” textblock1 ”
                       Height="50"
                       FontSize="25"
                       TextAlignment="Center"
                       ></TextBlock>

	            <TextBlock 
		       Name= ” textblock2 ”
                       Height="50"
                       FontSize="25"
                       TextAlignment="Center"
                            ></TextBlock>

	            <TextBlock 
		       Name= ” textblock3 ”
                       Height="50"
                       FontSize="25"
                       TextAlignment="Center"
                            ></TextBlock>
</StackPanel>

windows phone 6

This code simple adds 3 textblocks which shows the properties which we get from the mainpage.xaml.

STEP 8:In page1.xaml.cs we will add the following code to OnNavigatedTo event handler , this simply connects the data from mainpage to page1’s textblocks.

Var nav=( PropertiesClass)e.Parameter;
Textblock1.text=”Button name :”+nav.Name;
Textblock2.text=”Background name :”+nav.Background;
Textblock3.text=+”Foreground name :”nav.Foreground;

 

In the above code “PropertiesClass” is the name of the class we created before and e.parameters acces the data from page1.

 

Till now we have written the xaml for both mainpage and page1 and added the code for page1.cs and we have also added the code in PropertyClass .

Next we will add the code on mainpage.xaml.cs that will pass the data to the OnNavigatedTo event in page1.xaml.cs

Add the following code :

PropertiesClass prop1 = new PropertiesClass()
        {	
            background = "white",
            foreground = "black",
            name="button 1"

        };
private void button1_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1),prop1);
        }

 

In the above code we have created an object of PropertiesClass and add the properties of PropertiesClass and in the click event we have added to the prop1 to the navigation.

From this we have understood how to navigate from one page to another and pass the data form one page to another.

We can add as muh data as we want to populate and then pass it to another page .

The complete code is give as :

Mainpage.xaml

<Grid>
        <StackPanel>
            <TextBlock Height="74"
                       Text="Button Stack"
                       FontSize="60"
                       TextAlignment="Center"
                       Margin="0,20,0,20"
                       ></TextBlock>
            <Button Name="button1"
                    HorizontalAlignment="Center"
                    Height="90" 
                    Background="White"
                    Foreground="Black"
                    FontSize="25" Click="button1_Click"
                    >This is button 1</Button>
            <Button Name="button2"
                    HorizontalAlignment="Center"
                    Height="90" 
                    Background="Gray"
                    Foreground="Black"
                    FontSize="25" Click="button2_Click"
                    >This is button 2</Button>
            <Button Name="button3"
                    Background="Brown"
                    Height="90"
                    Foreground="WhiteSmoke"
                    FontSize="25"
                    HorizontalAlignment="Center" Click="button3_Click"
                    >This is button 3</Button>
            <Button Name="button4"
                    HorizontalAlignment="Center"
                    Height="90" 
                    Background="BurlyWood"
                    FontSize="25"
                    Foreground="Black" Click="button4_Click"
                    >This is button 4</Button>
            <Button Name="button5"
                    HorizontalAlignment="Center"
                    Height="90" 
                    FontSize="25"
                    Background="Chocolate"
                    Foreground="Black" Click="button5_Click"
                    >This is button 5</Button>
           
        </StackPanel>
    </Grid>

mainpage.xaml.cs

PropertiesClass prop1 = new PropertiesClass()
        {
            background = "white",
            foreground = "black",
            name="button 1"
        };

        PropertiesClass prop2 = new PropertiesClass() 
        {
            background="gray",
            foreground="white",
            name="button 2"
        };

        PropertiesClass prop3 = new PropertiesClass()
        {
            background = "Brown",
            foreground = "WhiteSmoke",
            name = "button 3"
        };
        PropertiesClass prop4 = new PropertiesClass()
        {
            background = "BurlyWood",
            foreground = "Black",
            name = "button 4"
        };
        PropertiesClass prop5 = new PropertiesClass()
        {
            background = "Chocolate",
            foreground = "Black",
            name = "button 5"
        };

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1),prop1);
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1),prop2);
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1), prop3);
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1), prop4);
        }

        private void button5_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page1), prop5);
        }
    }

PropertiesClass.cs

class PropertiesClass
    {
        public string background { get; set; }
        public string foreground { get; set; }
        public string name { get; set; }
    }

And the output is given as :

windows phone 7 windows phone 8

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge