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:
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/