-
Notifications
You must be signed in to change notification settings - Fork 44
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable Grid to dynamically switch layouts #232
Comments
Hello nandin-borjigin, thank you for opening an issue with us! I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌 |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Discussed in https://github.com/CommunityToolkit/WindowsCommunityToolkit/discussions/4470
Originally posted by nandin-borjigin January 30, 2022
Usecase
Imagine we want to show a list of items and each list item is a 3-column grid.
Now, we want to be responsive to the window size changes and decide to collapse this list item into 2 rows when the window width is narrow.
Potential approach
Problem
It's not really intuitive to declare a 2 x 3 grid layout when what we really need is either 1 x 3 or 2 x 2, depending on the window width. In above approach, we're imperatively dictating how the narrow layout would be instead of declaratively describing it and let the library handles the dirty work.
Further, another problem here is the visual state setter would quickly become maintenance hell when the layout becomes slightly complex. Just imagine what if we want to add column spacing to the grid.
This is what we would get if we simply add
ColumnSpacing="10"
on theGrid
element. The gutter between 2nd and 3rd column is still there since the 3rd column is effectively there even if it's of 0 width, so the spacing exists. To better workaround this, we need to modify the visual state setters. We need to make theTitle
element span 2nd and 3rd columns and make theDescription
element span 3 columns. And this is only for a minor change like adding a column spacing.Proposal
Provide
Grid
with a set of attached properties to enable programmers to declaratively describe the possible layouts and easily switch between them.The text was updated successfully, but these errors were encountered: