Share via


UWP: How to Navigate among pages

Create a new UWP project

Go to add new item and add 3 'Blank Pages', page1, page 2 and page3 respectively

http://3.bp.blogspot.com/-Ul-eHSXxmMg/VltZA9ljo8I/AAAAAAAAARI/x8AsUwEpN74/s640/Navigation.gif

Now add two stackpanels  and a frame in it and name the frame to refer it later

Add Home, Back and Forward buttons in the stackpanel and assign click events to them.

http://2.bp.blogspot.com/-UhkOVId1Uuo/VltY_QJZDiI/AAAAAAAAARE/0MWaInZQ5FU/s640/Navigation2.gif

Go to the constructor of MainPage.xaml.cs and type MyFrame.Navigate(typeof(Page1)); so the first page loads as the application runs

http://2.bp.blogspot.com/-2-wXUNL2CXw/VltZA1-sIQI/AAAAAAAAARQ/BLqbBb57obU/s640/Navigation3.gif

Copy the same code in home button click event

http://3.bp.blogspot.com/-NI-cTOdlujA/Vltc-EJqQuI/AAAAAAAAARg/ZHjaz36wYlc/s1600/NCapture.JPG

Go to Page1.xaml and create a button and a textblock

http://3.bp.blogspot.com/-QZSycWeLS6Y/VltY9O_aU_I/AAAAAAAAAQw/ymI6J_2njng/s1600/Capture2.JPG

Go to Page2.xaml and create a button and a textblock

http://4.bp.blogspot.com/-qnNmgk02ZhY/VltY9EcidRI/AAAAAAAAAQ0/cbHmgobnfTs/s1600/Capture3.JPG

Go to page2.xaml.cs click's event and write Frame.Navigate(typeof(Page3));

http://1.bp.blogspot.com/-jOg8d3kQD2I/VltdUNPJkAI/AAAAAAAAARo/NaIFJNDP4GQ/s1600/nnCapture.JPG

Go to page1.xaml.cs click's event and write Frame.Navigate(typeof(Page2));

http://3.bp.blogspot.com/-IDBQWshFqBA/VltY9prOo-I/AAAAAAAAAQ4/shBz82t6dXk/s1600/Capture4.JPG

Go to page3.xaml and create a textblock

http://1.bp.blogspot.com/-XFPGXvwUtkQ/Vlte12ajGHI/AAAAAAAAAR0/ktzc7akzISA/s1600/1nCapture.JPG

Now go to MainPage.xaml.cs and write the code to make the navigation work

http://4.bp.blogspot.com/-0yAnYguOoXc/VltY9NlfZjI/AAAAAAAAAQs/u_hpBBD0N9M/s1600/Capture1.JPG

Now run the program and see the navigation in work!

http://1.bp.blogspot.com/-9Bqeo7O7CI8/VltZBh_fmvI/AAAAAAAAARU/Cw1dEbfxRrc/s1600/Navigation4.gif

Source Code