Customizing DataItems and the ItemDetailPage when using the Grid Template for Windows Store Apps

This article applies to Windows 8 and Visual Studio 2012.

The Grid App template in VS2012 offers a attractive and fully functional foundation for building data-based apps for the new Windows Store.    It is great for presenting information in a well-organized manner.  However, because it’s just a template, it needs to modified if you want to present the individual items of various groups, differently.    The template already has certain basic properties built in, such as Title, Content, and Image.  So basically, each item has a name, a description (content), and a single picture.

Well, what if you want to be able to have additional images for some of the items?  Maybe you don’t want every item to be presented in an identical format.  Of course we want consistency throughout the app, but some items may be better described with additional images or other media content.  By adding fields and properties to the DataItem template, we can give ourselves the option(s) of whether to include such content, for certain items.

In this article, we’ll look at making some modifications to the code to allow an additional image to be used on the ItemDetailPage, along with an additional block of text.  We’ll  need to make changes to the DataSource code, and we’ll also need to modify the ItemDetailPage XAML to wire up the additional fields to the data source.   By doing this, certain items can be presented with two images instead of just one, and additional text.

There are several ways one could approach presenting the details about each Grouped Item in the Grid App Template. We could create different item templates for each type of item,  modify the one template and just use the additional properties when we want, or we could make separate ItemDetail pages for each type of item, and so on.  But for the purpose of this exercise, we are going to modify the DataItem object, to include an additional image and block of text.

Here is the original data template in the SampleDataSource.cs file.

ItemTemplate1

So now, let’s add a constructor with some additional properties.

2

Set the Image2 properties:

3

Now let’s edit the XAML in the ItemDetailPage.  Using the <InLineUIContainer>  object, we can “insert” additional images into the page, and then add additional <Paragraph> objects to include more text after the image.

4

Note:  I changed the MaxHeight  of the image to 100 pixels so that it displayed better.

Now let’s modify the individual DataItem object

5

Now we should be good to go.  We’ve added additional fields to the DataItem constructor, modified those properties on our individual data items, and using DataBinding, wired up the <InlineUIContainer> and <Text> objects.

Here it is in action:

6

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s