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.

21 thoughts on “Customizing GridView Items in Metro App

  1. Pingback: WindowsDevNews.com
  2. Thanks friend, this is very simple and easy to understand . I’ve one query, i.e. I want to display records row wise in gridview by default it display column wise.

  3. Sorry I forgot to mention that I am trying to achieve this in Windows 7 using WPF. Your example matched my requirement perfectly only issues I am facing is code for VariableSizedWrapGrid.

  4. I have tried the same it works fine with items but when I try to add group header it UI really goes for a toss :( Is there any sample which will show with group header, example : Create a existing GridView Template and implement Variable tile?

  5. Do you know of a way to only allow certain items to be selected in the GridView? I want the GridView to allow multiple selected items but I want to choose and limit what may be actually selected.

      1. Yea, that would do the trick, thanks…but I actually want to be able to respond to a Tap/Click so turning the HitTest off won’t entirely do.

        I’m thinking I may have to go with an entirely new approach to my problem…thanks for your help and quick response!

  6. This may sound very trivial, but I have been trying increase the distance between the two items. I do not need variable size items but just space between the items to increase. If I use Margin, it just adds margin to a cell which becomes visible when you select ie selection rect is on the complete cell including the margin.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s