Enable Grid to dynamically switch layouts #233
Closed
nandin-borjigin
started this conversation in
Proposals
Replies: 2 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 🙌 |
Beta Was this translation helpful? Give feedback.
0 replies
-
Moved the discussion explicitly over from the other repo to here: #541, as that has a more detailed discussion. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.Beta Was this translation helpful? Give feedback.
All reactions