microsoft-ui-xaml
microsoft-ui-xaml copied to clipboard
microsoft
Flexbox in WinUI draft PR
This is a Work In Progress Draft PR
No need for an in-depth review at the moment, but comments are always appreciated.
API Spec
https://github.com/MatthewMachuca/FlexboxApiSPEC/blob/main/flexboxAPIspec.md
Description
Introduce Flexible Box Layout (Flexbox) to WinUI2
Achieved by creating a new subclass building off of the Layout Class currently available in WinUI2 that would enable the core functionality that follows “Flexbox Layout” guidelines
Motivation and Context
Flexbox Layout is designed to provide an efficient way to layout, align, and distribute space among items within a container, specifically when the size of the device is either unknown or dynamic.
Flexbox is a widely used layout schematic in web development, it allows developers to quickly create complex layouts with a standardized system. By introducing Flexbox to WinUI we can increase the layout choices developers have and cater to those who desire to use this popular layout in their WinUI applications.
Remarks
Sizing
CSS accepts many values to define sizing "px" "mm" and "%" are some examples. They can be divided into two disticnt categories. Absolute Sizing and Relative Sizing. Currently Flex Basis only accepts Numbers as a string, these values are interpreted as "px" as is the case in XAML.
In the future, adding a new property that would allow the user to define whether the Flex-Basis sizing is "px" "%" etc. This would allow for additional sizing options to be added in the future without the need to parse the data.
Flex Wrap
Traditionally in CSS, if an item doesn't fit and items are not instructed to "flex-shrink" the items will overflow the container. Currently the implementation follows the rule of "if the item doesn't fit, omit" ie; if selecting NoWrap as the Wrap value, items will be omitted if they do not fit their container.
Issues
Flex Shrink
Currently Flex Shrink is not implemented, items in Flexbox should have a default flex-shrink value of 1, meaning all items in a container will attempt to shrink evenly to fit.
PR File Guide
Core Layout Functionality
FlexboxLayout.cpp FlexboxLayout.h FlexboxLayout.cpp
Definitions
Test Pages
How Has This Been Tested?
Manually tested and reviewed via Sample Pages. Compared behavior to vanilla HTML and CSS files.
| Attribute | Status |
|---|---|
| justify_content flex_start | ✔️ |
| justify_content flex_end | ✔️ |
| justify_content center | ✔️ |
| justify_content space_around | ✔️ |
| justify_content space_between | ✔️ |
| justify_content space_evenly | ✔️ |
| align_content start | ✔️ |
| align_content end | ✔️ |
| align_content center | ✔️ |
| align_content space_around | ✔️ |
| align_content space_between | ✔️ |
| align_content space_evenly | ✔️ |
| align_content stretch | ✔️ |
| align_items flex_start | ✔️ |
| align_items flex_end | ✔️ |
| align_items center | ✔️ |
| align_items stretch | ✔️ |
| align_self flex_start | ✔️ |
| align_self flex_end | ✔️ |
| align_self center | ✔️ |
| align_self stretch | ✔️ |
| size relative | ❌ |
| size absolute | ✔️ |
| direction column | ✔️ |
| direction column_reverse | ⚠️ |
| direction row | ✔️ |
| direction row_reverse | ⚠️ |
| wrap no_wrap | ✔️ |
| wrap wrap | ✔️ |
| wrap wrap_reverse | ⚠️ |
| grow | ✔️ |
| shrink | ❌ |
| order | ✔️ |
| basis | ✔️ |
Screenshots (if appropriate):
Microsoft today announced no new features were landing in WinUI 2.x after 2.8, so what vehicle would be used here? And would this port over to WinUI 3.x?
Microsoft today announced no new features were landing in WinUI 2.x after 2.8, so what vehicle would be used here? And would this port over to WinUI 3.x?
The expectation is this would target WinUI 3.x, not WinUI 2.x. Context: This was an intern project and in the interest of of their available time the intern didn't tackle the WinUI3 conversion. It's not expected that this code would merge as is; this was a mechanism for quickly making progress on the design.
