Mobile Zone is brought to you in partnership with:

Jerry Nixon is the Microsoft Developer Evangelist in Colorado. He has scary knowledge about Architecture, XAML, and SQL Server. He has terrifying knowledge about Windows Phone, the Kinect, and C#. And, he has simply ridiculous knowledge on Windows Desktop development in Windows 8. Jerry is a DZone MVB and is not an employee of DZone and has posted 104 posts at DZone. You can read more from them at their website. View Full User Profile

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

09.23.2012
| 7724 views |
  • submit to reddit
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!

Published at DZone with permission of Jerry Nixon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)