From 2ecf1eb8a664dd8bec0eceb229c30ed280744e6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Pedro?= <jpedrolmail@gmail.com>
Date: Mon, 18 Sep 2023 02:10:20 +0100
Subject: [PATCH] Moved FlexPanel.

---
 Avalonia.Labs.sln                             |   8 +-
 .../Avalonia.Labs.Catalog.Desktop/Program.cs  |   2 +
 .../Avalonia.Labs.Catalog.csproj              |   1 +
 .../FlexDemoNumberToThicknessConverter.cs     |  24 ++
 .../ViewModels/FlexItemViewModel.cs           |  57 +++
 .../ViewModels/FlexViewModel.cs               | 130 ++++++
 .../Views/FlexView.axaml                      | 179 +++++++++
 .../Views/FlexView.axaml.cs                   |  36 ++
 .../Views/WelcomeView.axaml                   |  11 +
 src/Avalonia.Labs.Panels/AlignContent.cs      |  13 +
 src/Avalonia.Labs.Panels/AlignItems.cs        |  13 +
 .../Avalonia.Labs.Panels.csproj               |  14 +
 src/Avalonia.Labs.Panels/Flex.cs              |  73 ++++
 src/Avalonia.Labs.Panels/FlexDirection.cs     |  10 +
 src/Avalonia.Labs.Panels/FlexPanel.cs         | 371 ++++++++++++++++++
 src/Avalonia.Labs.Panels/FlexWrap.cs          |   9 +
 src/Avalonia.Labs.Panels/JustifyContent.cs    |  12 +
 src/Avalonia.Labs.Panels/Uv.cs                |  27 ++
 18 files changed, 989 insertions(+), 1 deletion(-)
 create mode 100644 samples/Avalonia.Labs.Catalog/Converters/FlexDemoNumberToThicknessConverter.cs
 create mode 100644 samples/Avalonia.Labs.Catalog/ViewModels/FlexItemViewModel.cs
 create mode 100644 samples/Avalonia.Labs.Catalog/ViewModels/FlexViewModel.cs
 create mode 100644 samples/Avalonia.Labs.Catalog/Views/FlexView.axaml
 create mode 100644 samples/Avalonia.Labs.Catalog/Views/FlexView.axaml.cs
 create mode 100644 src/Avalonia.Labs.Panels/AlignContent.cs
 create mode 100644 src/Avalonia.Labs.Panels/AlignItems.cs
 create mode 100644 src/Avalonia.Labs.Panels/Avalonia.Labs.Panels.csproj
 create mode 100644 src/Avalonia.Labs.Panels/Flex.cs
 create mode 100644 src/Avalonia.Labs.Panels/FlexDirection.cs
 create mode 100644 src/Avalonia.Labs.Panels/FlexPanel.cs
 create mode 100644 src/Avalonia.Labs.Panels/FlexWrap.cs
 create mode 100644 src/Avalonia.Labs.Panels/JustifyContent.cs
 create mode 100644 src/Avalonia.Labs.Panels/Uv.cs

diff --git a/Avalonia.Labs.sln b/Avalonia.Labs.sln
index 2d54646..0d7d0bf 100644
--- a/Avalonia.Labs.sln
+++ b/Avalonia.Labs.sln
@@ -44,7 +44,9 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Labs.Catalog.Deskt
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Labs.Qr", "src\Avalonia.Labs.Qr\Avalonia.Labs.Qr.csproj", "{D7196459-710E-4057-BA38-8265C7C94854}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Avalonia.Labs.Lottie", "src\Avalonia.Labs.Lottie\Avalonia.Labs.Lottie.csproj", "{633A51E9-65E7-4350-9AE6-E527FECD15F9}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Labs.Lottie", "src\Avalonia.Labs.Lottie\Avalonia.Labs.Lottie.csproj", "{633A51E9-65E7-4350-9AE6-E527FECD15F9}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Labs.Panels", "src\Avalonia.Labs.Panels\Avalonia.Labs.Panels.csproj", "{BEDDF9B6-5B8D-4524-975C-485F87DDE7A2}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -94,6 +96,10 @@ Global
 		{633A51E9-65E7-4350-9AE6-E527FECD15F9}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{633A51E9-65E7-4350-9AE6-E527FECD15F9}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{633A51E9-65E7-4350-9AE6-E527FECD15F9}.Release|Any CPU.Build.0 = Release|Any CPU
+		{BEDDF9B6-5B8D-4524-975C-485F87DDE7A2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BEDDF9B6-5B8D-4524-975C-485F87DDE7A2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BEDDF9B6-5B8D-4524-975C-485F87DDE7A2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BEDDF9B6-5B8D-4524-975C-485F87DDE7A2}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
diff --git a/samples/Avalonia.Labs.Catalog.Desktop/Program.cs b/samples/Avalonia.Labs.Catalog.Desktop/Program.cs
index 7d45cd2..08048ba 100644
--- a/samples/Avalonia.Labs.Catalog.Desktop/Program.cs
+++ b/samples/Avalonia.Labs.Catalog.Desktop/Program.cs
@@ -2,6 +2,7 @@
 using System.IO;
 using Avalonia;
 using Avalonia.Labs.Controls.Cache;
+using Avalonia.ReactiveUI;
 
 namespace Avalonia.Labs.Catalog.Desktop;
 
@@ -18,6 +19,7 @@ public static void Main(string[] args) => BuildAvaloniaApp()
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
             .UsePlatformDetect()
+            .UseReactiveUI()
         .AfterSetup(builder =>
         {
             CacheOptions.SetDefault(new CacheOptions()
diff --git a/samples/Avalonia.Labs.Catalog/Avalonia.Labs.Catalog.csproj b/samples/Avalonia.Labs.Catalog/Avalonia.Labs.Catalog.csproj
index 72ec03c..a44dab8 100644
--- a/samples/Avalonia.Labs.Catalog/Avalonia.Labs.Catalog.csproj
+++ b/samples/Avalonia.Labs.Catalog/Avalonia.Labs.Catalog.csproj
@@ -21,6 +21,7 @@
   <ItemGroup>
     <ProjectReference Include="..\..\src\Avalonia.Labs.Controls\Avalonia.Labs.Controls.csproj" />
     <ProjectReference Include="..\..\src\Avalonia.Labs.Lottie\Avalonia.Labs.Lottie.csproj" />
+    <ProjectReference Include="..\..\src\Avalonia.Labs.Panels\Avalonia.Labs.Panels.csproj" />
     <ProjectReference Include="..\..\src\Avalonia.Labs.Qr\Avalonia.Labs.Qr.csproj" />
   </ItemGroup>
 
diff --git a/samples/Avalonia.Labs.Catalog/Converters/FlexDemoNumberToThicknessConverter.cs b/samples/Avalonia.Labs.Catalog/Converters/FlexDemoNumberToThicknessConverter.cs
new file mode 100644
index 0000000..5718388
--- /dev/null
+++ b/samples/Avalonia.Labs.Catalog/Converters/FlexDemoNumberToThicknessConverter.cs
@@ -0,0 +1,24 @@
+using System;
+using System.Globalization;
+
+using Avalonia.Data.Converters;
+
+namespace Avalonia.Labs.Catalog.Converters
+{
+    internal sealed class FlexDemoNumberToThicknessConverter : IValueConverter
+    {
+        public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            if (value is int x && targetType.IsAssignableFrom(typeof(Thickness)))
+            {
+                var y = 16 + 2 * ((x * 5) % 9);
+                return new Thickness(2 * y, y);
+            }
+
+            throw new NotSupportedException();
+        }
+
+        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) =>
+            throw new NotSupportedException();
+    }
+}
diff --git a/samples/Avalonia.Labs.Catalog/ViewModels/FlexItemViewModel.cs b/samples/Avalonia.Labs.Catalog/ViewModels/FlexItemViewModel.cs
new file mode 100644
index 0000000..b23708f
--- /dev/null
+++ b/samples/Avalonia.Labs.Catalog/ViewModels/FlexItemViewModel.cs
@@ -0,0 +1,57 @@
+using System.Reactive.Linq;
+
+using Avalonia.Labs.Panels;
+
+using ReactiveUI;
+
+namespace Avalonia.Labs.Catalog.ViewModels
+{
+    public sealed class FlexItemViewModel : ReactiveObject
+    {
+        internal const AlignItems AlignSelfAuto = (AlignItems)(-1);
+
+        private readonly ObservableAsPropertyHelper<AlignItems?> _alignSelf;
+
+        private bool _isSelected;
+        private bool _isVisible = true;
+
+        private AlignItems _alignSelfItem = AlignSelfAuto;
+        private int _order;
+
+        public FlexItemViewModel(int value)
+        {
+            Value = value;
+
+            _alignSelf = (from item in this.WhenAnyValue(vm => vm.AlignSelfItem)
+                          select item == AlignSelfAuto ? default(AlignItems?) : item).ToProperty(this, nameof(AlignSelf));
+        }
+
+        public int Value { get; }
+
+        public bool IsSelected
+        {
+            get => _isSelected;
+            set => this.RaiseAndSetIfChanged(ref _isSelected, value);
+        }
+
+        public bool IsVisible
+        {
+            get => _isVisible;
+            set => this.RaiseAndSetIfChanged(ref _isVisible, value);
+        }
+
+        public AlignItems AlignSelfItem
+        {
+            get => _alignSelfItem;
+            set => this.RaiseAndSetIfChanged(ref _alignSelfItem, value);
+        }
+
+        public AlignItems? AlignSelf => _alignSelf.Value;
+
+        public int Order
+        {
+            get => _order;
+            set => this.RaiseAndSetIfChanged(ref _order, value);
+        }
+    }
+}
diff --git a/samples/Avalonia.Labs.Catalog/ViewModels/FlexViewModel.cs b/samples/Avalonia.Labs.Catalog/ViewModels/FlexViewModel.cs
new file mode 100644
index 0000000..1bf5546
--- /dev/null
+++ b/samples/Avalonia.Labs.Catalog/ViewModels/FlexViewModel.cs
@@ -0,0 +1,130 @@
+using System;
+using System.Collections;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive.Linq;
+using System.Windows.Input;
+
+using Avalonia.Labs.Catalog.Views;
+using Avalonia.Labs.Panels;
+
+using ReactiveUI;
+
+namespace Avalonia.Labs.Catalog.ViewModels
+{
+    public sealed class FlexViewModel : ViewModelBase
+    {
+        private readonly ObservableCollection<FlexItemViewModel> _numbers;
+
+        private FlexDirection _direction = FlexDirection.Row;
+        private JustifyContent _justifyContent = JustifyContent.FlexStart;
+        private AlignItems _alignItems = AlignItems.FlexStart;
+        private AlignContent _alignContent = AlignContent.FlexStart;
+        private FlexWrap _wrap = FlexWrap.Wrap;
+
+        private int _columnSpacing = 8;
+        private int _rowSpacing = 32;
+
+        private int _currentNumber = 41;
+
+        private FlexItemViewModel? _selectedItem;
+
+        static FlexViewModel()
+        {
+            ViewLocator.Register(typeof(FlexViewModel), () => new FlexView());
+        }
+
+        public FlexViewModel()
+        {
+            Title = "Flex View";
+
+            _numbers = new ObservableCollection<FlexItemViewModel>(Enumerable.Range(1, 40).Select(x => new FlexItemViewModel(x)));
+
+            Numbers = new ReadOnlyObservableCollection<FlexItemViewModel>(_numbers);
+
+            AddItemCommand = ReactiveCommand.Create(AddItem);
+            RemoveItemCommand = ReactiveCommand.Create(RemoveItem, this.WhenAnyValue(vm => vm.SelectedItem).Select(x => x != null));
+        }
+
+        public IEnumerable DirectionValues { get; } = Enum.GetValues(typeof(FlexDirection));
+
+        public IEnumerable JustifyContentValues { get; } = Enum.GetValues(typeof(JustifyContent));
+
+        public IEnumerable AlignItemsValues { get; } = Enum.GetValues(typeof(AlignItems));
+
+        public IEnumerable AlignContentValues { get; } = Enum.GetValues(typeof(AlignContent));
+
+        public IEnumerable WrapValues { get; } = Enum.GetValues(typeof(FlexWrap));
+
+        public IEnumerable AlignSelfValues { get; } = Enum.GetValues(typeof(AlignItems)).Cast<AlignItems>().Prepend(FlexItemViewModel.AlignSelfAuto);
+        
+        public FlexDirection Direction
+        {
+            get => _direction;
+            set => this.RaiseAndSetIfChanged(ref _direction, value);
+        }
+
+        public JustifyContent JustifyContent
+        {
+            get => _justifyContent;
+            set => this.RaiseAndSetIfChanged(ref _justifyContent, value);
+        }
+
+        public AlignItems AlignItems
+        {
+            get => _alignItems;
+            set => this.RaiseAndSetIfChanged(ref _alignItems, value);
+        }
+
+        public AlignContent AlignContent
+        {
+            get => _alignContent;
+            set => this.RaiseAndSetIfChanged(ref _alignContent, value);
+        }
+
+        public FlexWrap Wrap
+        {
+            get => _wrap;
+            set => this.RaiseAndSetIfChanged(ref _wrap, value);
+        }
+
+        public int ColumnSpacing
+        {
+            get => _columnSpacing;
+            set => this.RaiseAndSetIfChanged(ref _columnSpacing, value);
+        }
+
+        public int RowSpacing
+        {
+            get => _rowSpacing;
+            set => this.RaiseAndSetIfChanged(ref _rowSpacing, value);
+        }
+
+        public ReadOnlyObservableCollection<FlexItemViewModel> Numbers { get; }
+
+        public FlexItemViewModel? SelectedItem
+        {
+            get => _selectedItem;
+            set => this.RaiseAndSetIfChanged(ref _selectedItem, value);
+        }
+
+        public ICommand AddItemCommand { get; }
+
+        public ICommand RemoveItemCommand { get; }
+
+        private void AddItem() => _numbers.Add(new FlexItemViewModel(_currentNumber++));
+
+        private void RemoveItem()
+        {
+            if (SelectedItem is null)
+            {
+                throw new InvalidOperationException();
+            }
+
+            _numbers.Remove(SelectedItem);
+
+            SelectedItem.IsSelected = false;
+            SelectedItem = null;
+        }
+    }
+}
diff --git a/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml b/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml
new file mode 100644
index 0000000..abef942
--- /dev/null
+++ b/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml
@@ -0,0 +1,179 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:panels="using:Avalonia.Labs.Panels"
+             xmlns:conv="using:Avalonia.Labs.Catalog.Converters"
+             xmlns:vm="using:Avalonia.Labs.Catalog.ViewModels"
+             mc:Ignorable="d"
+             d:DesignWidth="800"
+             d:DesignHeight="450"
+             x:DataType="vm:FlexViewModel"
+             HorizontalContentAlignment="Stretch"
+             VerticalContentAlignment="Stretch"
+             x:Class="Avalonia.Labs.Catalog.Views.FlexView">
+  <UserControl.Resources>
+    <conv:FlexDemoNumberToThicknessConverter x:Key="NumberToThicknessConverter" />
+    <DataTemplate x:Key="ItemTemplate"
+                  x:DataType="vm:FlexItemViewModel">
+      <ListBoxItem Padding="{Binding Value, Converter={StaticResource NumberToThicknessConverter}}"
+                   IsSelected="{Binding IsSelected}"
+                   Gestures.Tapped="OnItemTapped">
+        <ListBoxItem.Styles>
+          <Style Selector="ListBoxItem">
+            <Setter Property="Background" Value="LightBlue" />
+          </Style>
+          <Style Selector="ListBoxItem:selected">
+            <Setter Property="Background" Value="DodgerBlue" />
+          </Style>
+        </ListBoxItem.Styles>
+        <TextBlock HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   Text="{Binding Value}" />
+      </ListBoxItem>
+    </DataTemplate>
+  </UserControl.Resources>
+  <UserControl.Styles>
+    <Style Selector="CheckBox">
+      <Setter Property="MinWidth" Value="0" />
+      <Setter Property="Padding" Value="8,0,0,0" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+    </Style>
+    <Style Selector="ComboBox">
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+    <Style Selector="RadioButton">
+      <Setter Property="MinWidth" Value="0" />
+      <Setter Property="Padding" Value="8,0,0,0" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+    </Style>
+  </UserControl.Styles>
+
+  <DockPanel Margin="16">
+
+    <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                  Padding="0,0,16,0"
+                  MinWidth="200">
+
+      <StackPanel Spacing="16">
+
+        <TextBlock FontSize="16"
+                   Text="Properties" />
+
+        <!--<panels:FlexPanel ColumnSpacing="16">
+          <RadioButton IsChecked="{Binding IsItemsControl}"
+                       Content="ItemsControl" />
+          <RadioButton IsChecked="{Binding IsItemsRepeater}"
+                       Content="ItemsRepeater" />
+        </panels:FlexPanel>-->
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="Direction:" />
+          <ComboBox ItemsSource="{Binding DirectionValues}"
+                    SelectedItem="{Binding Direction}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="JustifyContent:" />
+          <ComboBox ItemsSource="{Binding JustifyContentValues}"
+                    SelectedItem="{Binding JustifyContent}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="AlignItems:" />
+          <ComboBox ItemsSource="{Binding AlignItemsValues}"
+                    SelectedItem="{Binding AlignItems}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="AlignContent:" />
+          <ComboBox ItemsSource="{Binding AlignContentValues}"
+                    SelectedItem="{Binding AlignContent}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="Wrap:" />
+          <ComboBox ItemsSource="{Binding WrapValues}"
+                    SelectedItem="{Binding Wrap}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="ColumnSpacing:" />
+          <NumericUpDown Minimum="0"
+                          Value="{Binding ColumnSpacing}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="RowSpacing:" />
+          <NumericUpDown Minimum="0"
+                         Value="{Binding RowSpacing}" />
+        </StackPanel>
+
+        <CheckBox IsEnabled="{Binding !!SelectedItem}"
+                  Content="SelectedItem IsVisible"
+                  IsChecked="{Binding SelectedItem.IsVisible}" />
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="SelectedItem AlignSelf:" />
+          <ComboBox IsEnabled="{Binding !!SelectedItem}"
+                    ItemsSource="{Binding AlignSelfValues}"
+                    SelectedItem="{Binding SelectedItem.AlignSelfItem}" />
+        </StackPanel>
+
+        <StackPanel Spacing="8">
+          <TextBlock Text="SelectedItem Order:" />
+          <NumericUpDown IsEnabled="{Binding !!SelectedItem}"
+                         Value="{Binding SelectedItem.Order}" />
+        </StackPanel>
+
+        <Grid ColumnDefinitions="*,8,*">
+
+          <Button Grid.Column="0"
+                  HorizontalAlignment="Stretch"
+                  HorizontalContentAlignment="Center"
+                  Command="{Binding AddItemCommand}"
+                  Content="Add Item" />
+
+          <Button Grid.Column="2"
+                  HorizontalAlignment="Stretch"
+                  HorizontalContentAlignment="Center"
+                  Command="{Binding RemoveItemCommand}"
+                  Content="Remove Item" />
+
+        </Grid>
+
+      </StackPanel>
+
+    </ScrollViewer>
+
+    <ItemsControl IsVisible="{Binding IsItemsControl}"
+                  BorderBrush="Black"
+                  BorderThickness="1"
+                  ItemsSource="{Binding Numbers}"
+                  ItemTemplate="{StaticResource ItemTemplate}">
+      <ItemsControl.Styles>
+        <Style Selector="ContentPresenter"
+               x:DataType="vm:FlexItemViewModel">
+          <Setter Property="panels:Flex.AlignSelf" Value="{Binding AlignSelf}" />
+          <Setter Property="panels:Flex.Order" Value="{Binding Order}" />
+          <Setter Property="IsVisible" Value="{Binding IsVisible}" />
+        </Style>
+      </ItemsControl.Styles>
+      <ItemsControl.ItemsPanel>
+        <ItemsPanelTemplate>
+          <panels:FlexPanel Direction="{Binding Direction}"
+                          JustifyContent="{Binding JustifyContent}"
+                          AlignItems="{Binding AlignItems}"
+                          AlignContent="{Binding AlignContent}"
+                          Wrap="{Binding Wrap}"
+                          ColumnSpacing="{Binding ColumnSpacing}"
+                          RowSpacing="{Binding RowSpacing}" />
+        </ItemsPanelTemplate>
+      </ItemsControl.ItemsPanel>
+    </ItemsControl>
+
+  </DockPanel>
+
+
+
+</UserControl>
diff --git a/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml.cs b/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml.cs
new file mode 100644
index 0000000..5127788
--- /dev/null
+++ b/samples/Avalonia.Labs.Catalog/Views/FlexView.axaml.cs
@@ -0,0 +1,36 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Labs.Catalog.ViewModels;
+using Avalonia.ReactiveUI;
+
+namespace Avalonia.Labs.Catalog.Views
+{
+    public partial class FlexView : ReactiveUserControl<FlexViewModel>
+    {
+        public FlexView()
+        {
+            InitializeComponent();
+        }
+
+        private void OnItemTapped(object? sender, RoutedEventArgs e)
+        {
+            if (sender is ListBoxItem control && control.DataContext is FlexItemViewModel item)
+            {
+                if (ViewModel.SelectedItem != null)
+                {
+                    ViewModel.SelectedItem.IsSelected = false;
+                }
+
+                if (ViewModel.SelectedItem == item)
+                {
+                    ViewModel.SelectedItem = null;
+                }
+                else
+                {
+                    ViewModel.SelectedItem = item;
+                    ViewModel.SelectedItem.IsSelected = true;
+                }
+            }
+        }
+    }
+}
diff --git a/samples/Avalonia.Labs.Catalog/Views/WelcomeView.axaml b/samples/Avalonia.Labs.Catalog/Views/WelcomeView.axaml
index 5b51c89..d5b9aac 100644
--- a/samples/Avalonia.Labs.Catalog/Views/WelcomeView.axaml
+++ b/samples/Avalonia.Labs.Catalog/Views/WelcomeView.axaml
@@ -52,6 +52,17 @@
         <Label FontSize="18"
                VerticalAlignment="Center">ContentDialog</Label>
       </Button>
+      <Button HorizontalAlignment="Stretch"
+              Height="60"
+              Command="{Binding NavigateTo}"
+              CornerRadius="10"
+              Margin="0,5">
+        <Button.CommandParameter>
+          <viewModels:FlexViewModel/>
+        </Button.CommandParameter>
+        <Label FontSize="18"
+               VerticalAlignment="Center">FlexView</Label>
+      </Button>
       <Button HorizontalAlignment="Stretch"
               Height="60"
               Command="{Binding NavigateTo}"
diff --git a/src/Avalonia.Labs.Panels/AlignContent.cs b/src/Avalonia.Labs.Panels/AlignContent.cs
new file mode 100644
index 0000000..7019504
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/AlignContent.cs
@@ -0,0 +1,13 @@
+namespace Avalonia.Labs.Panels
+{
+    public enum AlignContent
+    {
+        FlexStart,
+        FlexEnd,
+        Center,
+        Stretch,
+        SpaceBetween,
+        SpaceAround,
+        SpaceEvenly
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/AlignItems.cs b/src/Avalonia.Labs.Panels/AlignItems.cs
new file mode 100644
index 0000000..8486f9d
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/AlignItems.cs
@@ -0,0 +1,13 @@
+using System.Diagnostics.CodeAnalysis;
+
+namespace Avalonia.Labs.Panels
+{
+    [SuppressMessage("Naming", "CA1717:Only FlagsAttribute enums should have plural names")]
+    public enum AlignItems
+    {
+        FlexStart,
+        FlexEnd,
+        Center,
+        Stretch
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/Avalonia.Labs.Panels.csproj b/src/Avalonia.Labs.Panels/Avalonia.Labs.Panels.csproj
new file mode 100644
index 0000000..c431269
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/Avalonia.Labs.Panels.csproj
@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net6.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <IsPackable>true</IsPackable>
+    <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+  </ItemGroup>
+
+</Project>
diff --git a/src/Avalonia.Labs.Panels/Flex.cs b/src/Avalonia.Labs.Panels/Flex.cs
new file mode 100644
index 0000000..0db5345
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/Flex.cs
@@ -0,0 +1,73 @@
+using System;
+
+using Avalonia.Layout;
+
+namespace Avalonia.Labs.Panels
+{
+    public static class Flex
+    {
+        /// <summary>
+        /// Defines an attached property to control the alignment of a specific child in a flex layout.
+        /// </summary>
+        public static readonly AttachedProperty<AlignItems?> AlignSelfProperty =
+            AvaloniaProperty.RegisterAttached<Layoutable, AlignItems?>("AlignSelf", typeof(Flex));
+
+        /// <summary>
+        /// Defines an attached property to control the order of a specific child in a flex layout.
+        /// </summary>
+        public static readonly AttachedProperty<int> OrderProperty =
+            AvaloniaProperty.RegisterAttached<Layoutable, int>("Order", typeof(Flex));
+
+        /// <summary>
+        /// Gets the child alignment in a flex layout
+        /// </summary>
+        public static AlignItems? GetAlignSelf(Layoutable layoutable)
+        {
+            if (layoutable is null)
+            {
+                throw new ArgumentNullException(nameof(layoutable));
+            }
+
+            return layoutable.GetValue(AlignSelfProperty);
+        }
+
+        /// <summary>
+        /// Sets the child alignment in a flex layout
+        /// </summary>
+        public static void SetAlignSelf(Layoutable layoutable, AlignItems? value)
+        {
+            if (layoutable is null)
+            {
+                throw new ArgumentNullException(nameof(layoutable));
+            }
+
+            layoutable.SetValue(AlignSelfProperty, value);
+        }
+
+        /// <summary>
+        /// Gets the child order in a flex layout
+        /// </summary>
+        public static int GetOrder(Layoutable layoutable)
+        {
+            if (layoutable is null)
+            {
+                throw new ArgumentNullException(nameof(layoutable));
+            }
+
+            return layoutable.GetValue(OrderProperty);
+        }
+
+        /// <summary>
+        /// Sets the child order in a flex layout
+        /// </summary>
+        public static void SetOrder(Layoutable layoutable, int value)
+        {
+            if (layoutable is null)
+            {
+                throw new ArgumentNullException(nameof(layoutable));
+            }
+
+            layoutable.SetValue(OrderProperty, value);
+        }
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/FlexDirection.cs b/src/Avalonia.Labs.Panels/FlexDirection.cs
new file mode 100644
index 0000000..0966fcd
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/FlexDirection.cs
@@ -0,0 +1,10 @@
+namespace Avalonia.Labs.Panels
+{
+    public enum FlexDirection
+    {
+        Row,
+        RowReverse,
+        Column,
+        ColumnReverse
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/FlexPanel.cs b/src/Avalonia.Labs.Panels/FlexPanel.cs
new file mode 100644
index 0000000..ee2abaa
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/FlexPanel.cs
@@ -0,0 +1,371 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace Avalonia.Labs.Panels
+{
+    public sealed class FlexPanel : Panel
+    {
+        private static readonly AttachedProperty<FlexPanel?> OwnerFlexPanelProperty =
+            AvaloniaProperty.RegisterAttached<FlexPanel, Layoutable, FlexPanel?>("OwnerFlexPanel");
+
+        private static readonly Func<Layoutable, int> s_getOrder = x => x is { } y ? Flex.GetOrder(y) : 0;
+        private static readonly Func<Layoutable, bool> s_isVisible = x => x.IsVisible;
+
+        /// <summary>
+        /// Defines the <see cref="Direction"/> property.
+        /// </summary>
+        public static readonly StyledProperty<FlexDirection> DirectionProperty =
+            AvaloniaProperty.Register<FlexPanel, FlexDirection>(nameof(Direction));
+
+        /// <summary>
+        /// Defines the <see cref="JustifyContent"/> property.
+        /// </summary>
+        public static readonly StyledProperty<JustifyContent> JustifyContentProperty =
+            AvaloniaProperty.Register<FlexPanel, JustifyContent>(nameof(JustifyContent));
+
+        /// <summary>
+        /// Defines the <see cref="AlignItems"/> property.
+        /// </summary>
+        public static readonly StyledProperty<AlignItems> AlignItemsProperty =
+            AvaloniaProperty.Register<FlexPanel, AlignItems>(nameof(AlignItems));
+
+        /// <summary>
+        /// Defines the <see cref="AlignContent"/> property.
+        /// </summary>
+        public static readonly StyledProperty<AlignContent> AlignContentProperty =
+            AvaloniaProperty.Register<FlexPanel, AlignContent>(nameof(AlignContent));
+
+        /// <summary>
+        /// Defines the <see cref="Wrap"/> property.
+        /// </summary>
+        public static readonly StyledProperty<FlexWrap> WrapProperty =
+            AvaloniaProperty.Register<FlexPanel, FlexWrap>(nameof(Wrap), FlexWrap.Wrap);
+
+        /// <summary>
+        /// Defines the <see cref="ColumnSpacing"/> property.
+        /// </summary>
+        public static readonly StyledProperty<double> ColumnSpacingProperty =
+            AvaloniaProperty.Register<FlexPanel, double>(nameof(ColumnSpacing));
+
+        /// <summary>
+        /// Defines the <see cref="RowSpacing"/> property.
+        /// </summary>
+        public static readonly StyledProperty<double> RowSpacingProperty =
+            AvaloniaProperty.Register<FlexPanel, double>(nameof(RowSpacing));
+
+        private FlexLayoutState? _state;
+
+        static FlexPanel()
+        {
+            AffectsMeasure<FlexPanel>(
+                DirectionProperty,
+                JustifyContentProperty,
+                WrapProperty,
+                ColumnSpacingProperty,
+                RowSpacingProperty);
+
+            AffectsArrange<FlexPanel>(
+                AlignItemsProperty,
+                AlignContentProperty);
+
+            AffectsParentMeasure<FlexPanel>(Flex.OrderProperty);
+
+            AffectsParentArrange<FlexPanel>(Flex.AlignSelfProperty);
+        }
+
+        /// <summary>
+        /// Gets or sets the flex direction
+        /// </summary>
+        public FlexDirection Direction
+        {
+            get => GetValue(DirectionProperty);
+            set => SetValue(DirectionProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the flex justify content mode
+        /// </summary>
+        public JustifyContent JustifyContent
+        {
+            get => GetValue(JustifyContentProperty);
+            set => SetValue(JustifyContentProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the flex align items mode
+        /// </summary>
+        public AlignItems AlignItems
+        {
+            get => GetValue(AlignItemsProperty);
+            set => SetValue(AlignItemsProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the flex align content mode
+        /// </summary>
+        public AlignContent AlignContent
+        {
+            get => GetValue(AlignContentProperty);
+            set => SetValue(AlignContentProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the flex wrap mode
+        /// </summary>
+        public FlexWrap Wrap
+        {
+            get => GetValue(WrapProperty);
+            set => SetValue(WrapProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the column spacing
+        /// </summary>
+        public double ColumnSpacing
+        {
+            get => GetValue(ColumnSpacingProperty);
+            set => SetValue(ColumnSpacingProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the row spacing
+        /// </summary>
+        public double RowSpacing
+        {
+            get => GetValue(RowSpacingProperty);
+            set => SetValue(RowSpacingProperty, value);
+        }
+
+        /// <inheritdoc />
+        protected override Size MeasureOverride(Size availableSize)
+        {
+            var layout = this;
+            var children = (IReadOnlyList<Layoutable>)Children;
+
+            var isColumn = layout.Direction == FlexDirection.Column || layout.Direction == FlexDirection.ColumnReverse;
+            var even = layout.JustifyContent == JustifyContent.SpaceEvenly ? 2 : 0;
+
+            var max = Uv.FromSize(availableSize, isColumn);
+            var spacing = Uv.FromSize(layout.ColumnSpacing, layout.RowSpacing, isColumn);
+
+            var u = 0.0;
+            var m = 0;
+
+            var v = 0.0;
+            var maxV = 0.0;
+            var n = 0;
+
+            var sections = new List<Section>();
+            var first = 0;
+
+            var i = 0;
+
+            children = children.Where(s_isVisible).OrderBy(s_getOrder).ToArray();
+
+            foreach (var element in children)
+            {
+                if (element is AvaloniaObject obj)
+                {
+                    var owner = obj.GetValue(OwnerFlexPanelProperty);
+
+                    if (owner is null)
+                    {
+                        obj.SetValue(OwnerFlexPanelProperty, layout);
+                    }
+                    else if (owner != layout)
+                    {
+                        throw new InvalidOperationException();
+                    }
+                }
+
+                element.Measure(availableSize);
+
+                var size = Uv.FromSize(element.DesiredSize, isColumn);
+
+                if (layout.Wrap != FlexWrap.NoWrap && u + size.U + (m + even) * spacing.U > max.U)
+                {
+                    sections.Add(new Section(first, i - 1, u, maxV));
+
+                    u = 0.0;
+                    m = 0;
+
+                    v += maxV;
+                    maxV = 0.0;
+                    n++;
+
+                    first = i;
+                }
+
+                if (size.V > maxV)
+                {
+                    maxV = size.V;
+                }
+
+                u += size.U;
+                m++;
+
+                i++;
+            }
+
+            if (m != 0)
+            {
+                sections.Add(new Section(first, first + m - 1, u, maxV));
+            }
+
+            if (layout.Wrap == FlexWrap.WrapReverse)
+            {
+                sections.Reverse();
+            }
+
+            _state = new FlexLayoutState(children, sections);
+
+            if (sections.Count == 0)
+            {
+                return default;
+            }
+
+            return Uv.ToSize(new Uv(sections.Max(s => s.U + (s.Last - s.First + even) * spacing.U), v + maxV + (sections.Count - 1) * spacing.V), isColumn);
+        }
+
+        /// <inheritdoc />
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            var layout = this;
+
+            var isColumn = layout.Direction == FlexDirection.Column || layout.Direction == FlexDirection.ColumnReverse;
+            var isReverse = layout.Direction == FlexDirection.RowReverse || layout.Direction == FlexDirection.ColumnReverse;
+
+            var state = _state ?? throw new InvalidOperationException();
+            var n = state.Sections.Count;
+
+            var size = Uv.FromSize(finalSize, isColumn);
+            var spacing = Uv.FromSize(layout.ColumnSpacing, layout.RowSpacing, isColumn);
+
+            var totalSectionV = 0.0;
+
+            foreach (var section in state.Sections)
+            {
+                totalSectionV += section.V;
+            }
+
+            var totalSpacingV = (n - 1) * spacing.V;
+
+            var totalV = totalSectionV + totalSpacingV;
+
+            var spacingV = layout.AlignContent switch
+            {
+                AlignContent.FlexStart => spacing.V,
+                AlignContent.FlexEnd => spacing.V,
+                AlignContent.Center => spacing.V,
+                AlignContent.Stretch => spacing.V,
+                AlignContent.SpaceBetween => spacing.V + (size.V - totalV) / (n - 1),
+                AlignContent.SpaceAround => (size.V - totalSectionV) / n,
+                AlignContent.SpaceEvenly => (size.V - totalSectionV) / (n + 1),
+                _ => throw new NotImplementedException()
+            };
+
+            var scaleV = layout.AlignContent == AlignContent.Stretch ? ((size.V - totalSpacingV) / totalSectionV) : 1.0;
+
+            var v = layout.AlignContent switch
+            {
+                AlignContent.FlexStart => 0.0,
+                AlignContent.FlexEnd => size.V - totalV,
+                AlignContent.Center => (size.V - totalV) / 2,
+                AlignContent.Stretch => 0,
+                AlignContent.SpaceBetween => 0.0,
+                AlignContent.SpaceAround => spacingV / 2,
+                AlignContent.SpaceEvenly => spacingV,
+                _ => throw new NotImplementedException()
+            };
+
+            foreach (var section in state.Sections)
+            {
+                var sectionV = scaleV * section.V;
+
+                var (spacingU, u) = layout.JustifyContent switch
+                {
+                    JustifyContent.FlexStart => (spacing.U, 0.0),
+                    JustifyContent.FlexEnd => (spacing.U, size.U - section.U - (section.Last - section.First) * spacing.U),
+                    JustifyContent.Center => (spacing.U, (size.U - section.U - (section.Last - section.First) * spacing.U) / 2),
+                    JustifyContent.SpaceBetween => ((size.U - section.U) / (section.Last - section.First), 0.0),
+                    JustifyContent.SpaceAround => (spacing.U, (size.U - section.U - (section.Last - section.First) * spacing.U) / 2),
+                    JustifyContent.SpaceEvenly => ((size.U - section.U) / (section.Last - section.First + 2), (size.U - section.U) / (section.Last - section.First + 2)),
+                    _ => throw new NotImplementedException()
+                };
+
+                for (int i = section.First; i <= section.Last; i++)
+                {
+                    var element = state.Children[i];
+                    var elementSize = Uv.FromSize(element.DesiredSize, isColumn);
+
+                    var align = layout.AlignItems;
+
+                    if (element is { } layoutable)
+                    {
+                        align = Flex.GetAlignSelf(layoutable) ?? align;
+                    }
+
+                    double finalV = align switch
+                    {
+                        AlignItems.FlexStart => v,
+                        AlignItems.FlexEnd => v + sectionV - elementSize.V,
+                        AlignItems.Center => v + (sectionV - elementSize.V) / 2,
+                        AlignItems.Stretch => v,
+                        _ => throw new NotImplementedException()
+                    };
+
+                    if (align == AlignItems.Stretch)
+                    {
+                        elementSize = new Uv(elementSize.U, sectionV);
+                    }
+
+                    var position = new Uv(isReverse ? (size.U - elementSize.U - u) : u, finalV);
+
+                    element.Arrange(new Rect(Uv.ToPoint(position, isColumn), Uv.ToSize(elementSize, isColumn)));
+
+                    u += elementSize.U + spacingU;
+                }
+
+                v += sectionV + spacingV;
+            }
+
+            return finalSize;
+        }
+
+        private struct FlexLayoutState
+        {
+            public FlexLayoutState(IReadOnlyList<Layoutable> children, IReadOnlyList<Section> sections)
+            {
+                Children = children;
+                Sections = sections;
+            }
+
+            public IReadOnlyList<Layoutable> Children { get; }
+
+            public IReadOnlyList<Section> Sections { get; }
+        }
+
+        private struct Section
+        {
+            public Section(int first, int last, double u, double v)
+            {
+                First = first;
+                Last = last;
+                U = u;
+                V = v;
+            }
+
+            public int First { get; }
+
+            public int Last { get; }
+
+            public double U { get; }
+
+            public double V { get; }
+        }
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/FlexWrap.cs b/src/Avalonia.Labs.Panels/FlexWrap.cs
new file mode 100644
index 0000000..779d018
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/FlexWrap.cs
@@ -0,0 +1,9 @@
+namespace Avalonia.Labs.Panels
+{
+    public enum FlexWrap
+    {
+        NoWrap,
+        Wrap,
+        WrapReverse
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/JustifyContent.cs b/src/Avalonia.Labs.Panels/JustifyContent.cs
new file mode 100644
index 0000000..0ec8b39
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/JustifyContent.cs
@@ -0,0 +1,12 @@
+namespace Avalonia.Labs.Panels
+{
+    public enum JustifyContent
+    {
+        FlexStart,
+        FlexEnd,
+        Center,
+        SpaceBetween,
+        SpaceAround,
+        SpaceEvenly
+    }
+}
diff --git a/src/Avalonia.Labs.Panels/Uv.cs b/src/Avalonia.Labs.Panels/Uv.cs
new file mode 100644
index 0000000..cda5d58
--- /dev/null
+++ b/src/Avalonia.Labs.Panels/Uv.cs
@@ -0,0 +1,27 @@
+namespace Avalonia.Labs.Panels
+{
+    internal struct Uv
+    {
+        public Uv(double u, double v)
+        {
+            U = u;
+            V = v;
+        }
+
+        public double U { get; }
+
+        public double V { get; }
+
+        public static Uv FromSize(double width, double height, bool swap) =>
+            new Uv(swap ? height : width, swap ? width : height);
+
+        public static Uv FromSize(Size size, bool swap) =>
+            FromSize(size.Width, size.Height, swap);
+
+        public static Point ToPoint(Uv uv, bool swap) =>
+            new Point(swap ? uv.V : uv.U, swap ? uv.U : uv.V);
+
+        public static Size ToSize(Uv uv, bool swap) =>
+            new Size(swap ? uv.V : uv.U, swap ? uv.U : uv.V);
+    }
+}