DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. 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

Jerry Nixon user avatar by
Jerry Nixon
·
Sep. 24, 12 · Interview
Like (0)
Save
Tweet
Share
12.17K Views

Join the DZone community and get the full member experience.

Join For Free
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

  • 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!

Property (programming) Implementation Download app application Data (computing) Repeater Enumerate (project)

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Hackerman [Comic]
  • 9 Ways You Can Improve Security Posture
  • Learning by Doing: An HTTP API With Rust
  • What Should You Know About Graph Database’s Scalability?

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: