Grid View Similar to People app's contacts page.

Like everyone else I recently started learning to make Metro apps using C#. The best way to learn is by practice. People have been asking (in the forums) about how to make
a Grid View similar to the People app. I decided to take a shot at it. Below blog post documents my attempt to create a Grid View similar to that of People App.

Note: I am not aware of the exact method used to create the contact view in people app. The below is the method that I used for creating a similar experience.

The people apps Grid view has the following features

Contacts are grouped by the first character.
The items flow from one group (Based on First Character) to another Group. The flow is continuous without any gaps.

My first instinct was to use a “Grouped List View". However I soon realized that this doesn’t give the desired effect. There were huge gaps between items belonging to different groups, especially if the number
of items within each group varies drastically.

I decided to use a normal Grid view instead of a grouped view. I created a list of Comic characters to use as a source to my list view. The list contains the first characters, along with the actual names.

Image may be NSFW.
Clik here to view.

Set the Item Source property of the Grid View to the above list.

Image may be NSFW.
Clik here to view.

Now when displaying the Grid View, we have to use different Item Templates (Item Templates are used to specify the visualization of the data objects).

I created a Data Template called “FirstCharacterTemplate” to use while displaying the Characters. I have also created another template called the “NameTemplate” for displaying the actual names.

Image may be NSFW.
Clik here to view.

Once the templates are defined, we need to tie the above templates to the appropriate entries. For instance, if the string is a single character string, the FirstCharacterTemplate needs to be used. This can be done by using an ItemTemplateSelector.

Create a new class called ContactListTemplateSelector and derive it from the DataTemplateSelector class.
Override the method “SelectTemplateCore”. The method takes 2 parameters. The first parameter is the object that is being displayed (In our case the string) and the second parameter is Dependency object. Within this method check the length of the data. Based on the length of the data, return the appropriate Data Template.

Image may be NSFW.
Clik here to view.

Add an instance of this DataTemplateSelector to the page’s resource section.

Image may be NSFW.
Clik here to view.

Associate this DataTemplateSelector to the Grid view using the ItemTemplateSelector property.

Image may be NSFW.
Clik here to view.

One more thing left to do. Even though we used different data templates to display the single character string and the names, the type of container for these items remains the same. In this case the container happens to be a GridViewItem. Because of this, the user will still be able to click on the “Single Character” item. Even though nothing happens, the click animation is still shown. We don’t want this to happen (as designed in the people app).

This can be done by setting the GridViewItem’s (only the Single Character items) IsHitTestVisible property to false. One way of doing this is to use ContainerStyleSelector and set different Container styles based on the data (steps similar to the ones used with ItemTemplateSelector)

I have used a different way of doing this. Remember our ContactListTemplateSelector class, where we have overridden the “SelectTemplateCore” method. The second parameter to that method is the container In our case GridViewItem). We can set the IsHitTestVisible property to false (In case of a single character item) right here.

Image may be NSFW.
Clik here to view.