Flex layout

samples/ControlGallery/Views/Layouts/FlexLayouts.razor

@@ -0,0 +1,79 @@
+@page "/layouts/flex"
+
+@using Microsoft.Maui.Layouts
+
+<ContentPage>
+    <ScrollView>
+        <VerticalStackLayout Padding="10" Spacing="10">
+
+            <Label Text="FlexLayout with Row direction" />
+            <FlexLayout Direction="FlexDirection.Row"
+                        HorizontalOptions="LayoutOptions.Fill"
+                        HeightRequest="20">
+                <BoxView Color="Colors.Red" FlexLayout.Basis="20%" />
+                <BoxView Color="Colors.Green" FlexLayout.Basis="80%" />
+                <BoxView Color="Colors.Blue" FlexLayout.Basis="20%" />
+            </FlexLayout>
+
+
+            <Label Text="FlexLayout with wrapping" />
+            <FlexLayout Wrap="FlexWrap.Wrap" HeightRequest="300">
+                @foreach (var color in _colors)
+                {
+                    <BoxView Color="color" HeightRequest="50" WidthRequest="50" Margin="5" />
+                }
+            </FlexLayout>
+
+            <Label Text="Flex page layout" />
+            <FlexLayout Direction="FlexDirection.Column" HeightRequest="200">
+                <Label Text="HEADER"
+                       FontSize="18"
+                       BackgroundColor="Colors.Aqua"
+                       HorizontalTextAlignment="TextAlignment.Center" />
+
+                <FlexLayout FlexLayout.Grow="1">
+                    <Label Text="CONTENT"
+                           FontSize="18"
+                           BackgroundColor="Colors.Gray"
+                           HorizontalTextAlignment="TextAlignment.Center"
+                           VerticalTextAlignment="TextAlignment.Center"
+                           FlexLayout.Grow="1" />
+
+                    <BoxView FlexLayout.Basis="50"
+                             FlexLayout.Order="-1"
+                             Color="Colors.Blue" />
+
+                    <BoxView FlexLayout.Basis="50"
+                             Color="Colors.Green" />
+                </FlexLayout>
+
+                <Label Text="FOOTER"
+                       FontSize="18"
+                       BackgroundColor="Colors.Pink"
+                       HorizontalTextAlignment="TextAlignment.Center" />
+            </FlexLayout>
+
+        </VerticalStackLayout>
+    </ScrollView>
+</ContentPage>
+
+@code {
+    Color[] _colors = new[] {
+        Colors.AliceBlue,
+        Colors.Aqua,
+        Colors.Azure,
+        Colors.Beige,
+        Colors.Bisque,
+        Colors.Black,
+        Colors.Blue,
+        Colors.Brown,
+        Colors.BurlyWood,
+        Colors.Crimson,
+        Colors.DarkGray,
+        Colors.CornflowerBlue,
+        Colors.DarkOliveGreen,
+        Colors.Fuchsia,
+        Colors.AliceBlue,
+        Colors.DarkSeaGreen
+    };
+}

samples/ControlGallery/Views/PlaygroundList.razor

@@ -14,6 +14,7 @@
             <Button Text="CollectionView Playground" OnClick="@(async () => await NavigationManager.NavigateToAsync("/collectionviewplayground"))" />
             <Button Text="Grids" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/grids"))" />
             <Button Text="AbsoluteLayouts" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/absolute"))" />
+            <Button Text="FlexLayouts" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/flex"))" />
         </StackLayout>
     </ScrollView>
 </ContentPage>

src/BlazorBindings.Maui/Elements/AttributeHelper.FlexBasis.cs

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using Microsoft.Maui.Converters;
+using Microsoft.Maui.Layouts;
+
+namespace BlazorBindings.Maui.Elements
+{
+    public partial class AttributeHelper
+    {
+        private static readonly FlexBasisTypeConverter _flexBasisConverter = new();
+
+        public static string FlexBasisToString(FlexBasis flexBasis)
+        {
+            return _flexBasisConverter.ConvertToInvariantString(flexBasis);
+        }
+
+        public static FlexBasis StringToFlexBasis(object flexBasisString)
+        {
+            return (FlexBasis)_flexBasisConverter.ConvertFromInvariantString((string)flexBasisString);
+        }
+    }
+}

src/BlazorBindings.Maui/Elements/AttributeHelper.Object.cs

@@ -4,13 +4,14 @@
 using Microsoft.Maui;
 using Microsoft.Maui.Controls;
 using Microsoft.Maui.Graphics;
+using Microsoft.Maui.Layouts;
 using System;
 
 namespace BlazorBindings.Maui.Elements
 {
     public static partial class AttributeHelper
     {
-        public static object ObjectToAttribute<T>(T value)
+        public static object ObjectToAttribute(object value)
         {
             if (value == null || value is string || value is int || value is Delegate)
                 return value;
@@ -30,8 +31,9 @@ public static object ObjectToAttribute<T>(T value)
                 GridLength gridLength => GridLengthToString(gridLength),
                 LayoutOptions layoutOptions => LayoutOptionsToString(layoutOptions),
                 Thickness thickness => ThicknessToString(thickness),
+                FlexBasis flexBasis => FlexBasisToString(flexBasis),
                 TimeSpan timeSpan => TimeSpanToString(timeSpan),
-                Enum => (int)(object)value,
+                Enum => (int)value,
                 _ => ObjectToDelegate(value)
             };
         }

src/BlazorBindings.Maui/Elements/FlexLayout.cs

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using MC = Microsoft.Maui.Controls;
+using Microsoft.Maui.Layouts;
+
+namespace BlazorBindings.Maui.Elements
+{
+    public partial class FlexLayout
+    {
+        static partial void RegisterAdditionalHandlers()
+        {
+            AttachedPropertyRegistry.RegisterAttachedPropertyHandler("FlexLayout.AlignSelf",
+                (element, value) => MC.FlexLayout.SetAlignSelf(element, (FlexAlignSelf)AttributeHelper.GetInt(value)));
+
+            AttachedPropertyRegistry.RegisterAttachedPropertyHandler("FlexLayout.Grow",
+                (element, value) => MC.FlexLayout.SetGrow(element, AttributeHelper.StringToSingle((string)value)));
+
+            AttachedPropertyRegistry.RegisterAttachedPropertyHandler("FlexLayout.Shrink",
+                (element, value) => MC.FlexLayout.SetShrink(element, AttributeHelper.StringToSingle((string)value)));
+
+            AttachedPropertyRegistry.RegisterAttachedPropertyHandler("FlexLayout.Order",
+                (element, value) => MC.FlexLayout.SetOrder(element, AttributeHelper.GetInt(value)));
+
+            AttachedPropertyRegistry.RegisterAttachedPropertyHandler("FlexLayout.Basis",
+                (element, value) => MC.FlexLayout.SetBasis(element, AttributeHelper.StringToFlexBasis(value)));
+        }
+    }
+}

src/BlazorBindings.Maui/Elements/FlexLayout.generated.cs

@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using BlazorBindings.Core;
+using BlazorBindings.Maui.Elements.Handlers;
+using MC = Microsoft.Maui.Controls;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Maui.Layouts;
+using System.Threading.Tasks;
+
+namespace BlazorBindings.Maui.Elements
+{
+    public partial class FlexLayout : Layout
+    {
+        static FlexLayout()
+        {
+            ElementHandlerRegistry.RegisterElementHandler<FlexLayout>(
+                renderer => new FlexLayoutHandler(renderer, new MC.FlexLayout()));
+
+            RegisterAdditionalHandlers();
+        }
+
+        [Parameter] public FlexAlignContent? AlignContent { get; set; }
+        [Parameter] public FlexAlignItems? AlignItems { get; set; }
+        [Parameter] public FlexDirection? Direction { get; set; }
+        [Parameter] public FlexJustify? JustifyContent { get; set; }
+        [Parameter] public FlexPosition? Position { get; set; }
+        [Parameter] public FlexWrap? Wrap { get; set; }
+
+        public new MC.FlexLayout NativeControl => (ElementHandler as FlexLayoutHandler)?.FlexLayoutControl;
+
+        protected override void RenderAttributes(AttributesBuilder builder)
+        {
+            base.RenderAttributes(builder);
+
+            if (AlignContent != null)
+            {
+                builder.AddAttribute(nameof(AlignContent), (int)AlignContent.Value);
+            }
+            if (AlignItems != null)
+            {
+                builder.AddAttribute(nameof(AlignItems), (int)AlignItems.Value);
+            }
+            if (Direction != null)
+            {
+                builder.AddAttribute(nameof(Direction), (int)Direction.Value);
+            }
+            if (JustifyContent != null)
+            {
+                builder.AddAttribute(nameof(JustifyContent), (int)JustifyContent.Value);
+            }
+            if (Position != null)
+            {
+                builder.AddAttribute(nameof(Position), (int)Position.Value);
+            }
+            if (Wrap != null)
+            {
+                builder.AddAttribute(nameof(Wrap), (int)Wrap.Value);
+            }
+
+            RenderAdditionalAttributes(builder);
+        }
+
+        partial void RenderAdditionalAttributes(AttributesBuilder builder);
+
+        static partial void RegisterAdditionalHandlers();
+    }
+}

src/BlazorBindings.Maui/Elements/Handlers/FlexLayoutHandler.generated.cs

@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using BlazorBindings.Core;
+using MC = Microsoft.Maui.Controls;
+using Microsoft.Maui.Layouts;
+using System;
+
+namespace BlazorBindings.Maui.Elements.Handlers
+{
+    public partial class FlexLayoutHandler : LayoutHandler
+    {
+        private static readonly FlexAlignContent AlignContentDefaultValue = MC.FlexLayout.AlignContentProperty.DefaultValue is FlexAlignContent value ? value : default;
+        private static readonly FlexAlignItems AlignItemsDefaultValue = MC.FlexLayout.AlignItemsProperty.DefaultValue is FlexAlignItems value ? value : default;
+        private static readonly FlexDirection DirectionDefaultValue = MC.FlexLayout.DirectionProperty.DefaultValue is FlexDirection value ? value : default;
+        private static readonly FlexJustify JustifyContentDefaultValue = MC.FlexLayout.JustifyContentProperty.DefaultValue is FlexJustify value ? value : default;
+        private static readonly FlexPosition PositionDefaultValue = MC.FlexLayout.PositionProperty.DefaultValue is FlexPosition value ? value : default;
+        private static readonly FlexWrap WrapDefaultValue = MC.FlexLayout.WrapProperty.DefaultValue is FlexWrap value ? value : default;
+
+        public FlexLayoutHandler(NativeComponentRenderer renderer, MC.FlexLayout flexLayoutControl) : base(renderer, flexLayoutControl)
+        {
+            FlexLayoutControl = flexLayoutControl ?? throw new ArgumentNullException(nameof(flexLayoutControl));
+
+            Initialize(renderer);
+        }
+
+        partial void Initialize(NativeComponentRenderer renderer);
+
+        public MC.FlexLayout FlexLayoutControl { get; }
+
+        public override void ApplyAttribute(ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName)
+        {
+            switch (attributeName)
+            {
+                case nameof(MC.FlexLayout.AlignContent):
+                    FlexLayoutControl.AlignContent = (FlexAlignContent)AttributeHelper.GetInt(attributeValue, (int)AlignContentDefaultValue);
+                    break;
+                case nameof(MC.FlexLayout.AlignItems):
+                    FlexLayoutControl.AlignItems = (FlexAlignItems)AttributeHelper.GetInt(attributeValue, (int)AlignItemsDefaultValue);
+                    break;
+                case nameof(MC.FlexLayout.Direction):
+                    FlexLayoutControl.Direction = (FlexDirection)AttributeHelper.GetInt(attributeValue, (int)DirectionDefaultValue);
+                    break;
+                case nameof(MC.FlexLayout.JustifyContent):
+                    FlexLayoutControl.JustifyContent = (FlexJustify)AttributeHelper.GetInt(attributeValue, (int)JustifyContentDefaultValue);
+                    break;
+                case nameof(MC.FlexLayout.Position):
+                    FlexLayoutControl.Position = (FlexPosition)AttributeHelper.GetInt(attributeValue, (int)PositionDefaultValue);
+                    break;
+                case nameof(MC.FlexLayout.Wrap):
+                    FlexLayoutControl.Wrap = (FlexWrap)AttributeHelper.GetInt(attributeValue, (int)WrapDefaultValue);
+                    break;
+                default:
+                    base.ApplyAttribute(attributeEventHandlerId, attributeName, attributeValue, attributeEventUpdatesAttributeName);
+                    break;
+            }
+        }
+    }
+}

src/ComponentWrapperGenerator/TypesToGenerate.txt

@@ -13,6 +13,7 @@ DatePicker
 Editor
 #Element // Element is special so we don't generate it
 Entry
+FlexLayout
 FlyoutItem
 #FormattedString // Not used anymore because Label directly contains Span elements
 Frame