Concepts

While this template is based on the original Grid template packaged with Visual Studio RC 2012, there are concepts to understand about this template to successfully create beautiful grid apps with variable sized layouts.

VariableGridView & VariableSizedWrapGrid

VariableGridView is a subclass of GridView that supports variable sized children. When using the template, there should be no need to modify this class.

This template uses the VariableSizedWrapGrid (VSWG) panel to enable children of VariableGridView to have different sizes. The "base dimensions" of each grid item is defined in VSWG'sItemHeight and ItemWidth properties in GroupdItemPage.xaml. When adjusting the row span and column span of grid items (see below), the final sizes will be multiples of these base dimensions.

Data-Driven

Data items are represented by the SampleItemViewModel class. Different data items can be drawn with different sizes based on certain properties in the data.

To simulate this in a simplified manner, each SampleItemViewModel has a "weight" associated with it, found in theWeight property. The greater this is, the larger the data item will be shown---in other words, to change the size of a grid item, the Weight should be changed on the data item. It is not hard to imagine when adapting this for other use cases that properties such as "rating" or "number of upvotes" can be used as a weight.

RowSpan & ColSpan

Each SampleItemViewModel also has RowSpan and ColSpan properties that define how each data item instance should be displayed. In this sample, there is a direct mapping between Weights and RowSpans/ColSpans; however, more complex logic can be introduced. These properties simply need to be integers.

The values of ItemRowSpanPropertyPath and ItemColSpanPropertyPath on VariableGridView are the property names in each ViewModel that it looks at to determine the size of each item. (e.g., if ItemRowSpanPropertyPath were "Foo" instead of "RowSpan," VariableGridView will look at each SampleItemViewModel's "Foo" property for an integer to represent row span)

Ordering

VSWG works by creating items vertically or horizontally (depending on its Orientation property) in the order they are found in the collection. This means that if the ordering of data is not optimal, there could possibly be holes in layout.

SampleGroupViewModel provides a way to mitigate this through its OrderedItems property, whose purpose is to return some ordering of the group's items. In the sample, OrderedItems returns the items reordered descending by weight. You can choose not to reorder at all or provide more complex logic to create richer, hole-free layouts.

It's important to note how ItemsPath in the CollectionViewSource in GroupedItemsPage.xaml is "OrderedItems."