Custom detail pages in Windows 8 grid application

.net, c#, data-binding, windows-8, xaml

Solution

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 ?

Ok, lets take the app that is generated when using the "Grid App" template from Visual Studio.

The data class for the elements on the group items page is the `SampleDataItem` class. What you can do is add some type of data field (`bool`, `int`, or other) that indicates how to handle the navigation. In this example, we are keeping it simple, so we add a `bool` to indicate whether the navigation is custom or not.

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; }

    ...
}

So when you are adding a new `SampleDataItem` object to be displayed, you just need to set the `isCustomNav` field in the constructor.

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):

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);
    }
}

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 `ItemDetailPage` or a new one called `ItemDetailPage2`. As I mentioned before, the navigation flag doesn't have to be a `bool`. It can be an `int` or `enum` or some other type that tells us where to navigate.

Note that if you want similar behavior on the `GroupDetailsPage`, you just have to update the click event handler there the same way.

Hope that helps.

Problem

I have created a simple C# Windows 8 grid application. If you're unfamiliar with this layout, there is a brief explanation of it here : Link What I would like to have is simple - some custom `ItemDetailPages`. I'd like to be able to click on some items on the `GroupDetailPage` and the `GroupedItemsPage` and navigate to a custom `.xaml` file, one where I can include more than one image. I'm sure there is a simple way of doing that that I have missed out on, and I'm also sure that this information will be useful for a lot of people, so I will be offering a bounty on this question. I have struggled with doing this so far : I've created a `CustomDataItem` in the `SampleDataSource.cs` class : ``` /// <summary> /// Generic item data model. /// </summary> public class CustomDataItem : SampleDataCommon { public CustomDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group) : base(uniqueId, title, subtitle, imagePath, description) { this._content = content; this._group = group; } private string _content = string.Empty; public string Content { get { return this._content; } set { this.SetProperty(ref this._content, value); } } private SampleDataGroup _group; public SampleDataGroup Group { get { return this._group; } set { this.SetProperty(ref this._group, value); } } } ``` However, obviously, adding to the `ObservableCollection` ``` private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>(); public ObservableCollection<SampleDataGroup> AllGroups { get { return this._allGroups; } } ``` is impossible with a different data type. So what can I do in this case ? Thanks a lot.

Original source