Merge pull request #768 from enisn/pickerfield

Wrap MultiplePickerField chips instead horizontal scroll
enisn · Sep 21, 2024 · 99ece7e · 99ece7e
2 parents 165357e + e6be4df
commit 99ece7e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 29 deletions.
diff --git a/demo/UraniumApp/ViewModels/InputFields/MultiplePickerFieldVideModel.cs b/demo/UraniumApp/ViewModels/InputFields/MultiplePickerFieldVideModel.cs
@@ -13,13 +13,26 @@ protected override MultiplePickerField InitializeControl()
     {
         return new MultiplePickerField
         {
-            Title = "Pick options",
+            Title = "Pick Fruits",
             ItemsSource = new[]
             {
-                "Option 1",
-                "Option 2",
-                "Option 3",
-                "Option 4",
+                "Apple",
+                "Banana",
+                "Cherry",
+                "Date",
+                "Elderberry",
+                "Fig",
+                "Grape",
+                "Honeydew",
+                "Jackfruit",
+                "Kiwi",
+                "Lemon",
+                "Mango",
+                "Nectarine",
+                "Orange",
+                "Peach",
+                "Quince",
+                "Raspberry",
             }
         };
     }

diff --git a/...terial/Controls/MultipleSelectionField.cs → ....Material/Controls/MultiplePickerField.cs b/...terial/Controls/MultipleSelectionField.cs → ....Material/Controls/MultiplePickerField.cs
@@ -1,11 +1,12 @@
-using System.Collections;
+using Microsoft.Maui.Layouts;
+using System.Collections;
 using System.Collections.ObjectModel;
 using UraniumUI.Dialogs;
 
 namespace UraniumUI.Material.Controls;
 public partial class MultiplePickerField : InputField
 {
-    public ContentView MaincontentView => Content as ContentView;
+    public ContentView MainContentView => Content as ContentView;
 
     private bool isBusy;
     public bool IsBusy
@@ -24,32 +25,14 @@ protected set
 
     protected IDialogService DialogService { get; }
 
-    protected HorizontalStackLayout chipsHolderStackLayout = new HorizontalStackLayout
-    {
-        HorizontalOptions = LayoutOptions.Start,
-#if IOS || MACCATALYST
-        VerticalOptions = LayoutOptions.Center,
-#endif
-    };
+    protected FlexLayout chipsHolderLayout;
 
     private Command _destroyChipCommand;
     private Command _pickSelectionsCommand;
 
     public MultiplePickerField()
     {
-
-        MaincontentView.Content = new ScrollView
-        {
-            Orientation = ScrollOrientation.Horizontal,
-#if ANDROID
-            HorizontalOptions = LayoutOptions.Start,
-#endif
-#if !IOS && !MACCATALYST
-            VerticalOptions = LayoutOptions.Center,
-#endif
-            Content = chipsHolderStackLayout,
-        };
-
+        MainContentView.Content = chipsHolderLayout = CreateLayout();
         base.RegisterForEvents();
 
         DialogService = UraniumServiceProvider.Current.GetRequiredService<IDialogService>();
@@ -94,14 +77,33 @@ SelectedItems as IEnumerable<object>
                 UpdateState();
             }
         });
+    }
 
-        BindableLayout.SetItemTemplate(chipsHolderStackLayout, new DataTemplate(() =>
+    protected FlexLayout CreateLayout()
+    {
+        var layout = new FlexLayout
+        {
+            HorizontalOptions = LayoutOptions.Start,
+            AlignItems = Microsoft.Maui.Layouts.FlexAlignItems.Center,
+            AlignContent = Microsoft.Maui.Layouts.FlexAlignContent.Center,
+            Wrap = Microsoft.Maui.Layouts.FlexWrap.Wrap,
+            Margin = new Thickness(4),
+#if IOS || MACCATALYST
+        VerticalOptions = LayoutOptions.Center,
+#endif
+        };
+
+        BindableLayout.SetItemTemplate(layout, new DataTemplate(() =>
         {
             var chip = new Chip();
             chip.SetBinding(Chip.TextProperty, new Binding("."));
             chip.DestroyCommand = _destroyChipCommand;
             return chip;
         }));
+
+        BindableLayout.SetItemsSource(layout, SelectedItems);
+
+        return layout;
     }
 
     protected virtual void OnItemsSourceSet()
@@ -111,7 +113,7 @@ protected virtual void OnItemsSourceSet()
 
     protected virtual void OnSelectedItemsSet()
     {
-        BindableLayout.SetItemsSource(chipsHolderStackLayout, SelectedItems);
+        BindableLayout.SetItemsSource(chipsHolderLayout, SelectedItems);
     }
 
     public IList ItemsSource { get => (IList)GetValue(ItemsSourceProperty); set => SetValue(ItemsSourceProperty, value); }