Microsoft-ui-xaml: Create CSS-inspired GridLayout for preview

[chrisglein]

Tracking feature for prototyping an implementation of CSS-inspired Grid layout and putting into preview for community feedback.

Modeled after this feature request #54

• [x] Prototype panel based layout
• [x] Move to Repeater/LayoutPanel layout
• [x] Index grid location
• [x] LineName grid location
• [x] Span grid location offset
• [x] Pixel-based grid track
• [x] Fraction-based grid track
• [x] Percentage-based grid track
• [x] Auto grid track
• [x] Name grid lines
• [ ] Ability to name last line that doesn't map to a track
• [x] ColumnStart/RowStart
• [x] ColumnEnd/RowEnd
• [x] TemplateColumns/TemplateRows
• [x] ColumnGap/RowGap
• [x] JustifyItems/AlignItems
• [x] JustifyContent/AlignContent
• [x] AutoColumns/AutoRows
• [x] AutoFlow
• [x] JustifySelf/AlignSelf
• [x] Create demo pages
• [ ] Create tests

[brianlagunas]

Please do not fragment WinUI by adding CSS to it. There's a reason WinJS was rejected by the masses and died.

[mdtauk]

Please do not fragment WinUI by adding CSS to it. There's a reason WinJS was rejected by the masses and died.

It's not adding CSS, but making a new Grid Control which has all the functionality of the CSS version. Think of it as an enhanced and modernised Grid

[JustinXinLiu]

So much this. The web has evolved with a lot of cool layout attributes. It's time for the XAML layout system to learn from them.

[chrisglein]

Please do not fragment WinUI by adding CSS to it. There's a reason WinJS was rejected by the masses and died.

This work has nothing to do with CSS, but with the grid layout available via CSS (display: grid). I only put CSS grid in the title to disambiguate from the existing XAML Grid layout panel (anyone know a better name for CSS grid?). I highly recommend you give CSS grid a look, it's frankly great! I've been using it for a few months now and am genuinely impressed by how it helps me in a lot of common scenarios.

[brianlagunas]

@chrisglein I know the CSS grid quite well, but I am 100% against adding any type of CSS syntax requirement to the WinUI/XAML platforms. Learn from the CSS Grid features/functionality, but don't take on new language requirements.

[chrisglein]

@chrisglein I know the CSS grid quite well, but I am 100% against adding any type of CSS syntax requirement to the WinUI/XAML platforms. Learn from the CSS Grid features/functionality, but don't take on new language requirements.

Again, this work has nothing to do with CSS syntax. Have you looked at @micahl's proposal that I linked above?

[brianlagunas]

@chrisglein Yes. What scared me was your comment that had CSS embedded in a style (https://github.com/microsoft/microsoft-ui-xaml/issues/54#issuecomment-445932339) but after reading it more closely, it looks like you were just using it as a comparison and not the actual syntax that would be used.

False alarm.... carry on 😄

[chingucoding]

Just out of curiosity, what happened to this proposal? The CSS grid layout is very powerful and I would love to be able to have something like that in XAML.