AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.73k stars 2.22k forks source link

FlexPanel #8081

Open Ombrelin opened 2 years ago

Ombrelin commented 2 years ago

Is your feature request related to a problem? Please describe.

Grid layout API isn't always quite efficient to responsively position elements.

Describe the solution you'd like

Having a Layout inspired of the HTML5 flexbox would be refreshing and efficient for a lot of responsive positioning situations.

MAUI has done it : https://docs.microsoft.com/en-us/dotnet/maui/user-interface/layouts/flexlayout

So the API and the logic could potentially by ported.

maxkatz6 commented 2 years ago

From my experience flex panel can be completely replaced with existing panel: grid, uniformgrid, stack, dock, relativepanel... But it's not a bad idea to port it to Avalonia. There was one in opensource https://github.com/dotNevereverlie/Avalonia.FlexPanel And I am pretty sure there were more implementations.

Maui can be used as a API reference (except the name, we use Panel if it's not items repeater related)

Ombrelin commented 2 years ago

I also found this : https://github.com/jp2masa/Avalonia.Flexbox

Athari commented 12 months ago

Created another port of FlexPanel: https://github.com/Athari/Alba.Avalonia.FlexPanel

Unlike jp2masa's implementation, it supports flex-shrink, flex-basis and flex-grow.

It's based on HandyControl control pack for WPF, just like dotNevereverlie's port, but I implemented the missing features and fixed some of the bugs (and probably added some).

I've tested both implementations, and frankly all of them are buggy, don't match CSS implementation and have numerous issues. And even CSS implementation is browsers is frankly questionable as in some cases it causes a complete mess. HandyControl's FlexPanel seemed a bit buggier, but maybe I noticed more bugs just because I test it primarily. Well, what's done is done.