Over a million developers have joined DZone.

Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier

· Mobile Zone
Using a GridView in XAML is the primary way to show lists of data. The GridView inherits ItemsControl and behaves like the ListView which behaves like a classic ListBox. The GridView scrolls horizontally, handles selection, rearrangement, and (as we see in this article) also allows for variable sited items.


To accomplish a variable grid, the VariableSizedWrapGrid.ColSpan and RowSpan properties must be set on the GridViewItem. Unfortunately, it is impossible to bind to the GridViewItem directly. As a result, it is necessary to create a custom GridView inheriting from GridView and implementing PrepareContainerForItemOverride. The resulting control behaves like a standard GridView with the exception that it sets the GridViewItem ColSpan and RowSpan attached properties.

Look: WrapGrid implementation

WinRT XAML WrapGrid

Look: VariableSizedWrapGrid implementation

WinRT XAML VariableSizedWrapGrid

Implementing the Variable grid includes three important steps: 1) inheriting GridView and implementing the PrepareContainerForItemOverride method, 2) changing the ItemPanelTemplate to be a VariableSizedWrapGrid, and 3) include custom ColSpan and RowSpan properties in the models you bind to the repeater. That last one is important.


Let’s see it!

Video References


A unique UI is important to make your application stand out. Changing up the grid from the standard, vanilla, boring grid is a great start. Use these techniques to implement the variable grid into your app and start making a splash!

Best of luck!


Published at DZone with permission of Jerry Nixon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}