Custom detail pages in Windows 8 grid application

Question

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.

Answer 1

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.

Answer 2

Yes you should be able to create a custom or different data type. If you create a Win8 app using the grid template, you see that the template does three things for you: 1) It creates three types, SampleDataCommon, which is the base, SampleDataItem, which implements SampleDataCommon and adds two new properties - content and group, and SampleDataGroup which also implements SampleDataCommon, adds a method, ItemsCollectionChanged, and adds two properties, Items and TopItems. 2) It creates a class called SampleDataSource, in which a collection of SampleDataGroup is created and named AllGroups: ObservableCollection AllGroups. 3) It binds Items and AllGroups of SampleDataSource to objects in XMAL pages.

In your case, you use the same data structure. In other words, you will create a group with items, etc.