[SegmentedControl][iOS] Rewrote to use BindableLayout with Horizontal…

…StackLayout to fix a bug where SegmentedControl were put in a CollectionView's header. (#533)
DIPSAS · Jan 17, 2025 · 216ea25 · 216ea25
1 parent 56bd4ed
commit 216ea25
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## [40.0.1]
+- [SegmentedControl][iOS] Rewrote to use BindableLayout with HorizontalStackLayout to fix a bug where SegmentedControl were put in a CollectionView's header.
+
 ## [40.0.0]
 - Upgraded to .NET MAUI 9030.
 

diff --git a/src/app/Playground/VetleSamples/VetlePage.xaml b/src/app/Playground/VetleSamples/VetlePage.xaml
@@ -20,13 +20,35 @@
         <vetleSamples:TemplateSelector x:Key="TemplateSelector" />
     </dui:ContentPage.Resources>
 
-    <VerticalStackLayout WidthRequest="250"
-                         BindingContext="{Binding TimePlanningViewModel}">
-        <Switch x:Name="Switch"
-                Toggled="Switch_OnToggled"/>
+    <CollectionView>
 
-        <dui:ContentControl 
-                            TemplateSelector="{StaticResource TemplateSelector}"
-                            x:Name="ContentControl" />
-    </VerticalStackLayout>
+        <CollectionView.ItemsSource>
+            <x:Array Type="{x:Type x:String}">
+                <x:String>First</x:String>
+                <x:String>Second</x:String>
+                <x:String>Third</x:String>
+            </x:Array>
+        </CollectionView.ItemsSource>
+
+        <CollectionView.Header>
+            <VerticalStackLayout>
+
+            <dui:SegmentedControl SelectionMode="Multi">
+                <x:Array Type="{x:Type x:String}">
+                    <x:String>First</x:String>
+                    <x:String>Second askdlnjasoidjnaso</x:String>
+                    <x:String>Third asoidkjaoisdjoiasjdoia</x:String>
+                </x:Array>
+            </dui:SegmentedControl>
+            </VerticalStackLayout>
+
+        </CollectionView.Header>
+
+        <CollectionView.ItemTemplate>
+            <DataTemplate>
+                <Label Text="{Binding .}" />
+            </DataTemplate>
+        </CollectionView.ItemTemplate>
+
+    </CollectionView>
 </dui:ContentPage>
diff --git a/src/app/Playground/VetleSamples/VetlePage.xaml.cs b/src/app/Playground/VetleSamples/VetlePage.xaml.cs
@@ -111,7 +111,7 @@ private void Switch_OnToggled(object sender, ToggledEventArgs e)
     {
 
 
-        ContentControl.SelectorItem = e.Value;
+        /*ContentControl.SelectorItem = e.Value;*/
 
 
     }

diff --git a/src/library/DIPS.Mobile.UI/Components/Pickers/SegmentedControl/SegmentedControl.cs b/src/library/DIPS.Mobile.UI/Components/Pickers/SegmentedControl/SegmentedControl.cs
@@ -5,6 +5,7 @@
 using DIPS.Mobile.UI.Resources.Styles.Label;
 using Microsoft.Maui.Controls.Shapes;
 using CollectionView = Microsoft.Maui.Controls.CollectionView;
+using Colors = Microsoft.Maui.Graphics.Colors;
 using Label = DIPS.Mobile.UI.Components.Labels.Label;
 using Image = DIPS.Mobile.UI.Components.Images.Image.Image;
 using HorizontalStackLayout = DIPS.Mobile.UI.Components.Lists.HorizontalStackLayout;
@@ -15,24 +16,27 @@ namespace DIPS.Mobile.UI.Components.Pickers.SegmentedControl;
 [ContentProperty(nameof(ItemsSource))]
 public partial class SegmentedControl : ContentView
 {
-    private readonly CollectionView m_collectionView;
+    private readonly HorizontalStackLayout m_horizontalStackLayout;
     private List<SelectableItemViewModel> m_allSelectableItems = new();
 
-
     public SegmentedControl()
     {
-        m_collectionView = new Components.Lists.CollectionView()
+        m_horizontalStackLayout = new HorizontalStackLayout
         {
-            AutomationId = "CollectionView".ToDUIAutomationId<SegmentedControl>(),
+            AutomationId = "HorizontalStackLayout".ToDUIAutomationId<SegmentedControl>(),
             VerticalOptions = LayoutOptions.Start,
             HorizontalOptions = LayoutOptions.Start,
-            ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal) {ItemSpacing = 0},
-            HorizontalScrollBarVisibility = ScrollBarVisibility.Never,
-            VerticalScrollBarVisibility = ScrollBarVisibility.Never
         };
-        m_collectionView.ItemTemplate = new DataTemplate(CreateSegment);
+
+        BindableLayout.SetItemTemplate(m_horizontalStackLayout, new DataTemplate(CreateSegment));
 
-        Content = m_collectionView;
+        Content = new ScrollView
+        {
+            Content = m_horizontalStackLayout,
+            HorizontalScrollBarVisibility = ScrollBarVisibility.Never,
+            VerticalScrollBarVisibility = ScrollBarVisibility.Never,
+            Orientation = ScrollOrientation.Horizontal
+        };
     }
 
     private View CreateSegment()
@@ -84,11 +88,6 @@ private View CreateSegment()
         {
             if (sender is not View view) return;
 
-            if (m_collectionView.HeightRequest == -1)
-            {
-                m_collectionView.HeightRequest = view.Height;
-            }
-
             if (view.BindingContext is not SelectableItemViewModel selectableListItem) return;
 
             var radius = (double)Sizes.GetSize(SizeName.size_8);
@@ -159,8 +158,7 @@ private void ItemsSourceChanged()
             }
         }
 
-
         m_allSelectableItems = listOfSelectableItems;
-        m_collectionView.ItemsSource = m_allSelectableItems;
+        BindableLayout.SetItemsSource(m_horizontalStackLayout, m_allSelectableItems);
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         {
-            ContentControl.SelectorItem = e.Value;
+            /*ContentControl.SelectorItem = e.Value;*/
         }
@@ Expand Down @@