Spike - Implement `FlexPanel` or import a package

erri120 commented 1 month ago

WPF, and sadly Avalonia, are missing a very important panel type: a simple flex container.

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for details on how this is used to style components in CSS.

halgari commented 1 month ago

Few projects in this space:

https://github.com/Athari/Alba.Avalonia.FlexPanel

https://github.com/AvaloniaUI/Avalonia.Labs/pull/45

https://github.com/HandyOrg/HandyControl

LukeNexusMods commented 1 month ago

Figma designs expects flexbox, Avalonia doesnt have this, we use long solutions to get round this. Allow us to implement new designs twice as fast. Can help with dynamic scaling.

LukeNexusMods commented 1 month ago

The investigation will be to figure out which solution we will use and then how to implement it. What is the effort involved?

Al12rs commented 6 days ago

Spike results:

Tested FlexPanel from Avalonia.Labs.

Avalonia.Labs version was chosen as the most up to date version of the third party libraries available and the most likely to get future updates and eventually be integrated into Avalonia project proper.

Cons:

Implementation is not feature complete, though most of core features work as expected
- See https://github.com/AvaloniaUI/Avalonia.Labs/pull/45 for details of what is supported and not
In code documentation is basically non existent requiring developers to learn semantics of FlexBox from outside sources (e.g. FlexBox Specification)
- 1754
~Some of the default initial values of properties don't match the FlexBox standard.~
- PR: https://github.com/AvaloniaUI/Avalonia.Labs/pull/74
FlexPanel doesn't work properly if top level child items have non default Horizontal or Vertical Alignment set (anything other than Stretch).
- Notably, Buttons have Left alignment set in Avalonia.Fluent style.
- This can also be worked around with a Style setting FlexPanel children alignment to stretch by default.
Avalonia.Labs is a repository for non API stable controls and panels, breaking changes could be introduced requiring en masse changes from our side to update.
There is no guarantee that Avalonia.Lab FlexPanel will see further updates that don't come from our team, it only saw two changes since initial commit.

Pros:

Much easier time emulating Figma designs since it uses FlexBox everywhere.
Currently to emulate the behavior a mix of Grid, StackPanel and WrapPanel are needed and even then it is not always possible to get the same behavior if conditions change (resizing).
Overcomes many of the limitations of Grid when it comes to distributing items while keeping spacing consistent.
Single Panel instead of 3
Entire behavior and contents arrangements be defined form Styles without requiring changes to the actual View
Possible to define Grow, Shrink, SelfAlignment and base size of child elements without even knowing the type of control of the child elements (could be heterogeneous).
Should eventually become part of Avalonia proper
Faster Design implementation times
Better developer experience.

Conclusions:

We are going to use Avalonia.Labs FlexPanel going forwards.

Appendix:

Define properties for children in Styles:

    <!-- FlexPanel Styles -->
    <Style Selector="panels|FlexPanel">

        <Style Selector="^ > :is(Control)">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="panels:Flex.Grow" Value="1" />
        </Style>
    </Style>

It is possible to reference generic children using ^ > :is(Control). the :is() syntax is necessary because targeting Control directly would not actually work for subclasses that don't explicitly inherit the styling from Control.

Al12rs commented 6 days ago

My own opinion after using and dealing with the initial issues of FlexPanel I'm quite inclined in using it going forward. It is making the implementations of the Designs much simpler and more accurate on top of better scaling behavior in different size conditions.

The problems all seem solvable and within our control to do so.

I would go for it.

Al12rs commented 4 days ago

Do we want an ADR for this or is this enough?

halgari commented 4 days ago

An ADR would be nice, but it can mostly be a copy of the text in this ticket

On Thu, Jul 11, 2024 at 9:42 AM Al @.***> wrote:

Do we want an ADR for this or is this enough?

— Reply to this email directly, view it on GitHub https://github.com/Nexus-Mods/NexusMods.App/issues/1451#issuecomment-2223280008, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAE72HJT6OFEOY7GPASLCLDZL2RXBAVCNFSM6AAAAABILB65M6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTGI4DAMBQHA . You are receiving this because you commented.Message ID: @.***>

Nexus-Mods / NexusMods.App