Customizing GridView Items in Metro App

This is a short post on customizing height and width of the items in GridView. by default if we use a WrapGrid we get items as bunch of tiles.

We can change the height and width of the tiles by deriving from gridview and overriding PrepareContainerForItemOverride method like below. In the code I am making the tile double the width if the city is “City 4”.  Ofcourse we can add properties and not hardcode stuff like shown
public class MyGridView : GridView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
var obj = item as Person;
var gi = element as GridViewItem;
if (obj.City == “City 4”)
{
gi.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
gi.Background = new SolidColorBrush(Colors.Beige);
gi.Foreground = new SolidColorBrush(Colors.Black);
gi.FontSize = 22;
}
base.PrepareContainerForItemOverride(gi, item);
}
}

Here is the xaml and code I used in the BlankPage .

protected override void OnNavigatedTo(NavigationEventArgs e)
{
Random r = new Random();
var items = Enumerable.Range(0, 50).Select(x =>
new Person { Id = x,
Name = “person..” + x.ToString(),
City = “City ” + (r.Next(0,5)).ToString() });
cvs.Source = items;

}

<Page.Resources>         <CollectionViewSource x:Name=”cvs”/>     </Page.Resources>

<local:MyGridView FontSize=”20″ FontFamily=”segoe ui” Margin=”100″ ItemsSource=”{Binding Source={StaticResource cvs}}” >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment=”Left” >
<TextBlock Text=”{Binding Id}” />
<TextBlock Text=”{Binding Name}” />
<TextBlock Text=”{Binding City}” />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>

<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight=”120″ ItemWidth=”120″ MaximumRowsOrColumns=”6″ Orientation=”Vertical”/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

</local:MyGridView>

Here is the result.