Click here to Skip to main content
13,343,083 members (58,607 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 26 Mar 2013

Different Sized Tile Items in WinRT GridView

, 26 Mar 2013
Rate this:
Please Sign up or sign in to vote.
The article explains how to add variable sized tile items into WinRT GridView.


GridView in WinRT allows you to arrange tile items in wrap manner. In case you want to arrange items as in Windows store app, we need different sized tile items. There is no direct way to configure different sized items while using data binding in GridView. I am going to explain the solution in this article.


VariableSizedWrapGrid should be the panel for GridView. This panel has two attached properties ColumnSpan and RowSpan. To set this property to the containers, we have to inherit the GridView class and override the PrepareContainerForItemOverride.  

public class VariableGrid : GridView
   protected override void PrepareContainerForItemOverride
   	(Windows.UI.Xaml.DependencyObject element, object item)

       var tile = item as Model;
       if (tile != null)
          var griditem = element as GridViewItem;
          if (griditem != null)
              VariableSizedWrapGrid.SetColumnSpan(griditem, tile.ColumnSpan);
              VariableSizedWrapGrid.SetRowSpan(griditem, tile.RowSpan);
  base.PrepareContainerForItemOverride(element, item);

I have the Model class as below. It contains the ColumnSpan and RowSpan property.

public class Model
    public int ColumnSpan { get; set; }

    public int RowSpan { get; set; }

    public string Header { get; set; }

<local:VariableGrid ItemsSource="{Binding Models}"

                    Padding="0" Margin="100" Height="630">
           <Grid Background="MediumOrchid">
               <TextBlock Text="{Binding Header}" Margin="10" 


          <VariableSizedWrapGrid ItemHeight="200" ItemWidth="200"/>

Our VariableGrid class will map the span properties from model to containers and you can see the following output:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jawahar Suresh Babu
Software Developer (Senior)
India India
Jawahar working as a Senior Development Engineer in Aditi Technologies,Bangalore, India. Specialist in all XAML frameworks. Very passionate on UX Design and Development. Skilled in Expression Blend, Design, WPF, Silverlight, Windows Phone 7/8, Windows 8. Good knowledge in Entity Framework, SQLite and SQL Server also. Also had good experience with PRISM, MVVM, Caliiburn Micro and other design patterns.

He developed few products for Syncfusion Inc. Also working on some freelancing projects. Worked as a lead developer of Metro Studio from Syncfusion Inc.

An active freelancer.

You may also be interested in...


Comments and Discussions

QuestionMy vote of 5 Pin
Thierry Maurel2-Feb-14 8:54
memberThierry Maurel2-Feb-14 8:54 
GeneralMy vote of 1 Pin
vijayksingh27-Mar-13 23:02
membervijayksingh27-Mar-13 23:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 27 Mar 2013
Article Copyright 2013 by Jawahar Suresh Babu
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid