StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>I have a simple grid application; how do I make it possible to have one of the elements in the group item page link to a custom item detail page ?</p> </blockquote> <p>Ok, lets take the app that is generated when using the "Grid App" template from Visual Studio.</p> <p>The data class for the elements on the group items page is the <code>SampleDataItem</code> class. What you can do is add some type of data field (<code>bool</code>, <code>int</code>, or other) that indicates how to handle the navigation. In this example, we are keeping it simple, so we add a <code>bool</code> to indicate whether the navigation is custom or not.</p> <pre><code>public class SampleDataItem : SampleDataCommon { // add flag as last param public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group, bool isCustomNav = false) : base(uniqueId, title, subtitle, imagePath, description) { this._content = content; this._group = group; this.IsCustomNav = isCustomNav; } // to keep it simple this doesn't handle INotifyPropertyChange, // as does the rest of the properties in this class. public bool IsCustomNav { get; set; } ... } </code></pre> <p>So when you are adding a new <code>SampleDataItem</code> object to be displayed, you just need to set the <code>isCustomNav</code> field in the constructor.</p> <p>Now all we have to do is change the already existing click event handler in the grid on the grouped item page (GroupedItemsPage.xaml.cs):</p> <pre><code>void ItemView_ItemClick(object sender, ItemClickEventArgs e) { // Navigate to the appropriate destination page, configuring the new page // by passing required information as a navigation parameter var item = (SampleDataItem)e.ClickedItem; var itemId = item.UniqueId; if (item.IsCustomNav == false) { // default this.Frame.Navigate(typeof(ItemDetailPage), itemId); } else { // custom page this.Frame.Navigate(typeof(ItemDetailPage2), itemId); } } </code></pre> <p>All we are doing above is getting the selected item and then testing the navigation flag that we added earlier. Based on this we navigate to either the original <code>ItemDetailPage</code> or a new one called <code>ItemDetailPage2</code>. As I mentioned before, the navigation flag doesn't have to be a <code>bool</code>. It can be an <code>int</code> or <code>enum</code> or some other type that tells us where to navigate.</p> <p>Note that if you want similar behavior on the <code>GroupDetailsPage</code>, you just have to update the click event handler there the same way.</p> <p>Hope that helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload