Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier
Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier
Join the DZone community and get the full member experience.
Join For FreeSummary
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
Look: VariableSizedWrapGrid implementation
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
- Download Windows 8 http://aka.ms/w8download
- Download Visual Studio http://aka.ms/w8tools
- Custom grid / Code http://codepaste.net/aopvks
- Enumerate colors / Code http://codepaste.net/j3mzrw
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!
Like This Article? Read More From DZone
Published at DZone with permission of Jerry Nixon , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}