Over a million developers have joined DZone.
Gold Partner

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

· Mobile Zone

The Mobile Zone is brought to you in partnership with Apptimize.  Discover the 5 little know reasons your app is underperforming and how to better understand your customers mobile needs.

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.

Summary

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.

image

Let’s see it!



Video References


Conclusion

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!

The Mobile Zone is brought to you in partnership with Apptimize.  Learn more about app optimization methods that help teams identify user preferences, decide the next iterative changes to make, and validate them through testing.

Topics:

Published at DZone with permission of Jerry Nixon , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}