Using the Grid App Template in Windows 8

Microsoft Visual Studio offers a number of templates for building Windows 8 applications. In most of my postings, we’ve been using the Blank application template, but the Grid App template is extremely powerful.  Unfortunately, it is not obvious how to adapt it to your own data and it doesn’t come with an instruction manual.

This posting will show you how to substitute your own data for the design-time data that comes out of the box.  We will keep the design time data for, er, design time, and we’ll add “real” data (well, fake data) for run-time. 

GridAppThe first step is to fire up Visual Studio and create a new application, using the Grid App (XAML) template under Visual C# Windows Store, as shown in the figure.  (Click on the figure to see it full size).

When Visual Studio settles down, run the application as is, right out of the box.  You’ll see “design time data” displayed in three pages: the hub page, the Groups page and the Items page.

Our goal is to show our own data in these pages.

The Design Time Data

To do so, we first need to find where the design time data is created.  Open the DataModel folder and navigate to the constructor for the Sample Data Source. A simple way to do so is to expand the DataModel in the solution Explorer, then to expand the SampleDataSource and to click on the constructor. That will cause the editing window to navigate directly to the top of the method.

Enclose the entire contents of the method in the following if statement:

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled).  
{

Follow the closing brace with an else segment,
 
}
else
{
// Code here!
}

Before we can put the code we want into the else statement, we need to create the data classes we need.  In the DataModel add a People class,

public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }

private static readonly string[] firstNames = { "Adam", "Bob", "Carl", "David", "Edgar", "Frank", "George", "Harry", "Isaac", "Jesse", "Ken", "Larry" };
private static readonly string[] lastNames = { "Aaronson", "Bobson", "Carlson", "Davidson", "Enstwhile", "Ferguson", "Harrison", "Isaacson", "Jackson", "Kennelworth", "Levine" };

public override string ToString()
{
return string.Format( "{0} {1} ({2})", FirstName, LastName, City );
}

public static IEnumerable<Person> CreatePeople( int count, string city )
{
var people = new List<Person>();

var r = new Random();

for ( int i = 0; i < count; i++ )
{
var p = new Person()
{
FirstName = firstNames[r.Next( firstNames.Length )],
LastName = lastNames[r.Next( lastNames.Length )],
City = city
};
people.Add( p );
}
return people;
}
}

Notice that this is very similar to the class we generated for working with GridView in this posting.  The difference is that this time we’re going to pass in the city as a parameter.

At this point we would normally call out to a web service or into a database, but instead we’ll randomly generate the data we need through a class that we’ll create called PeopleService, (also added to the DataModel folder),

public class PeopleService
{
public string[] GetGroups()
{
string[] cities = { "Boston", "New York", "LA", "San Francisco", "Phoenix", "San Jose", "Cincinnati", "Bellevue" };
return cities;
}

internal Data.SampleDataGroup GetItems( string group )
{
var r = new Random();
int i = 0;
var people = Person.CreatePeople( r.Next( 50 ), group );

SampleDataGroup dataGroup = new SampleDataGroup( "Group-" + group,
group,
string.Empty,
"Assets/DarkGray.png",
"Group Description: Some description for " + group + " goes here." );

foreach ( var person in people )
{
dataGroup.Items.Add( new SampleDataItem( "Group-" + group + "-Item-" + ++i,
person.FirstName + " " + person.LastName,
"(" + person.City + ")",
"Assets/LightGray.png",
"Person Description: (none)",
"Here's where the extended content for each person goes",
dataGroup ) );
}
return dataGroup;
}
}

Populating with Generated Data

We’re now ready to fill in the code back in SampleDataSource,

 

else
{
this.AllGroups.Clear();
var peopleService = new PeopleService();

string[] groups = peopleService.GetGroups();
foreach ( string group in groups )
{
this.AllGroups.Add( peopleService.GetItems( group ) );
}

}

  • Step one is to clear the groups and to obtain an instance of the People Service
  • Step two is to ask the PeopleService for all our groups (in this case, cities)
  • Step three is to add people to each city in turn, thereby populating the AllGroups collection.

The result is a hub page with the people grouped by cities, a group page for each city and a detail page for each person. 

[This posting is based in large part on material to appear in Pro Windows 8 Programming with C# and XAML by Jesse Liberty and Jon Galloway, APress 2013 ]

 

 

 

 

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Data, Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.