How do I set an app to open another page when a user taps on something on screen?

Question

I'm looking to use the Grid application as a starting point, and the sample app shows a number of tiles on it, where if I tap/click on them, they take me to a page.  I have a new blank page, and I want to have the user go to that page when clicking on one of the squares.  How do I do that?  I would expect it to be a simple enough job, but I'm not sure how to do it.

I have a Grid App, an Item page, and a detail page, and my new page.  So if I tap a specific square, I want it to open the new page, with animation.

---

James

Answer 1

Here is how it's done in App.xaml.cs:

// Create a Frame to act navigation context and navigate to the first page
var rootFrame = new Frame();
rootFrame.Navigate(typeof(BlankPage));

// Place the frame in the current Window and ensure that it is active
Window.Current.Content = rootFrame;
Window.Current.Activate();

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Answer 2

Which basically means you need to save that rootFrame somewhere to be able to use it later (e.g. as a public static field in your App class), then call App.RootFrame.Navigate(typeof(YourPage));

---

Filip Skakun

Answer 3

Either that or get it out of Window.Current.Content.

- ngm

Answer 4

Ha! But that is not always available. I have not found out what the exact problem is, but sometimes Window.Current returns null - maybe when accessing from a background thread, but maybe not only. Saved reference always works.

---

Filip Skakun

Answer 5

var rootFrame = new Frame();
rootFrame.Navigate(typeof(GroupedItemsPage), sampleData.ItemGroups);

Window.Current.Content = rootFrame;
Window.Current.Activate();

That's what I have in there right now, and it takes me to the first grouped items page, which is where I want to go when the app is first opened.  But, when I tap on one of the five grouped items on the page, I want to tell it exactly where to go.  So if I click the Item Title 1 (whose name I want to change, but don't know how), I want it to go to a blank page (which I plan to fill with a file list). 

If I use that code you give, does that take me to a new, blank page from any of the tiles on my app home page?

---

James

Answer 6

Hi JJohnson - sorry for the delay, I would out of office last week. 

1) To change from "Item Title: 1" to something else, go into SampleDataSources.cs and you'll see the the SampleDataSource class that creates all of the objects in the datasource. 

2) To go to a different page when you click on "Item Title: 1", find the "ItemView_ItemClick" method in GroupedItemsPage.xaml.cs.  Change this line of code:

this.Frame.Navigate(typeof(ItemDetailPage), e.ClickedItem) to

this.Frame.Navigate(typeof(<THIS IS YOUR PAGE>)). 

You should be able to determine which item was actually clicked by examining the e object.  One of the properties in there will give you the actual information that you put into the object (like the replacement for "Item Title: 1").

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Answer 7

Hi JJohnson - sorry for the delay, I would out of office last week. 

1) To change from "Item Title: 1" to something else, go into SampleDataSources.cs and you'll see the the SampleDataSource class that creates all of the objects in the datasource. 

2) To go to a different page when you click on "Item Title: 1", find the "ItemView_ItemClick" method in GroupedItemsPage.xaml.cs.  Change this line of code:

this.Frame.Navigate(typeof(ItemDetailPage), e.ClickedItem) to

this.Frame.Navigate(typeof(<THIS IS YOUR PAGE>)). 

You should be able to determine which item was actually clicked by examining the e object.  One of the properties in there will give you the actual information that you put into the object (like the replacement for "Item Title: 1").

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Hi Matt,

I have the same question, and I was thinking of doing a if statement in the ItemView_ItemClick to check the conditions to find out which item was clicked...But I am trying to find the property in e that tells you which item is clicked. How ever the 2 available properties "CLickedItem" and "OriginalSource" seem to be the same no matter which item you clicked, am I clicking something wrong? 

OriginalSource is always: Windows.UI.Xaml.Controls.GridView

And ClickedItem is always: Application8.Data.SampleDataItem

Thanks,

James

Answer 8

The dataitem has properties as well - examine those.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Answer 9

Just to be more clear (sorry if I'm getting this slower then usual). I only see these 4 methods under the DataItem as shown above. Am I looking in the right place?

I also tried e.ClickedItem.Equals("Item Title:1") but that just returns false.

Thanks,

James

Answer 10

You have to cast e.ClickedItem to your datatype:

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator