Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

Introduction

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.

Background

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">
   <local:VariableGrid.ItemTemplate>
       <DataTemplate>
           <Grid Background="MediumOrchid">
               <TextBlock Text="{Binding Header}" Margin="10" 
                          HorizontalAlignment="Left"
                          VerticalAlignment="Bottom"/>
            </Grid>
         </DataTemplate>
   </local:VariableGrid.ItemTemplate>
   <local:VariableGrid.ItemsPanel>
       <ItemsPanelTemplate>
          <VariableSizedWrapGrid ItemHeight="200" ItemWidth="200"/>
       </ItemsPanelTemplate>
   </local:VariableGrid.ItemsPanel>
</local:VariableGrid>

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

License

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

Share

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. http://xamlfactory.elance.com
 
http://about.me/jawahars
 
http://wpfplayground.com/
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionMy vote of 5 PinmemberThierry Maurel2-Feb-14 7:54 
GeneralMy vote of 1 Pinmembervijayksingh27-Mar-13 22:02 
no download

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 27 Mar 2013
Article Copyright 2013 by Jawahar Suresh Babu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid