Platform code for CategoryPage CollectionView span (#1479)

Co-authored-by: Hamish Duff <[email protected]>
Co-authored-by: Hamish Duff <[email protected]>

Author: williambohrmann3

src/MAUI/Maui.Samples/Views/CategoryPage.xaml

@@ -6,8 +6,37 @@
              xmlns:models="clr-namespace:ArcGIS.Samples.Shared.Models"
              xmlns:viewModels="clr-namespace:ArcGIS.ViewModels"
              Title="{Binding SelectedCategory}"
-             Shell.FlyoutBehavior="Flyout"
-             x:DataType="viewModels:CategoryViewModel">
+             x:DataType="viewModels:CategoryViewModel"
+             Shell.FlyoutBehavior="Flyout">
+
+    <ContentPage.Resources>
+        <converters:SampleToBitmapConverter x:Key="SampleToBitmapConverter" />
+        <converters:BoolToFavoriteGlyphConverter x:Key="BoolToFavoriteGlyphConverter" />
+        <Style x:Key="AndroidStyle" TargetType="CollectionView">
+            <Setter Property="VisualStateManager.VisualStateGroups">
+                <VisualStateGroupList>
+                    <VisualStateGroup>
+                        <VisualState x:Name="Horizontal">
+                            <VisualState.StateTriggers>
+                                <OrientationStateTrigger Orientation="Landscape" />
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="ItemsLayout" Value="{OnIdiom Phone='VerticalGrid, 2', Tablet='VerticalGrid, 3'}" />
+                            </VisualState.Setters>
+                        </VisualState>
+                        <VisualState x:Name="Vertical">
+                            <VisualState.StateTriggers>
+                                <OrientationStateTrigger Orientation="Portrait" />
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="ItemsLayout" Value="{OnIdiom Phone='VerticalGrid, 1', Tablet='VerticalGrid, 2'}" />
+                            </VisualState.Setters>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </Setter>
+        </Style>
+    </ContentPage.Resources>
 
     <ContentPage.ToolbarItems>
         <ToolbarItem Clicked="SearchClicked"
@@ -20,25 +49,19 @@
                      IconImageSource="feedback.png"
                      Text="Feedback" />
     </ContentPage.ToolbarItems>
-    <ContentPage.Resources>
-        <converters:SampleToBitmapConverter x:Key="SampleToBitmapConverter" />
-        <converters:BoolToFavoriteGlyphConverter x:Key="BoolToFavoriteGlyphConverter" />
-    </ContentPage.Resources>
+
     <CollectionView x:Name="SamplesCollection"
                     BackgroundColor="Transparent"
                     ItemsSource="{Binding SamplesItems}">
         <CollectionView.ItemsLayout>
             <GridItemsLayout x:Name="SamplesGridItemsLayout"
                              HorizontalItemSpacing="5"
                              Orientation="Vertical"
-                             Span="{OnPlatform Default=4,
-                                               iOS=1,
-                                               Android=1}"
                              VerticalItemSpacing="5" />
         </CollectionView.ItemsLayout>
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="viewModels:SampleViewModel">
-                <Border StrokeThickness="{OnPlatform Default=0, Android=1}">
+                <Border Margin="{OnPlatform Default=0, Android=5}" StrokeThickness="{OnPlatform Default=0, Android=1}">
                     <Border.GestureRecognizers>
                         <PointerGestureRecognizer PointerEntered="PointerGestureRecognizer_PointerEntered" />
                         <PointerGestureRecognizer PointerExited="PointerGestureRecognizer_PointerExited" />
@@ -58,6 +81,8 @@
 
                         <Button x:Name="FavoriteButton"
                                 Grid.Row="0"
+                                Margin="{OnPlatform Default=0,
+                                                    WinUI='-1'}"
                                 Padding="2"
                                 Background="#A52F2F2F"
                                 Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:CategoryViewModel}}, Path=UpdateFavoriteCommand}"

src/MAUI/Maui.Samples/Views/CategoryPage.xaml.cs

@@ -27,22 +27,30 @@ private void Initialize()
         BindingContext = _viewModel;
 
         WeakReferenceMessenger.Default.Register<string>(this, (message, category) => ScrollToTop());
+
+        // Handle platform differences in updating the layout.
 #if !ANDROID
+        // Event raised during an orientation state change or window resize. 
         SizeChanged += (s, e) =>
         {
+            var numberOfColumns = (int)Math.Floor(Width / _viewModel.SampleImageWidth);
 #if IOS || MACCATALYST
-            var numberOfColumns = Math.Floor(Width / _viewModel.SampleImageWidth);
-            var layout = new GridItemsLayout((int)numberOfColumns, ItemsLayoutOrientation.Vertical);
-            layout.HorizontalItemSpacing = 5;
-            layout.VerticalItemSpacing = 5;
-            SamplesCollection.ItemsLayout = layout;
+            // Don't update the layout when column count is the same, for example, when app height changes on Mac.
+            if (numberOfColumns != (SamplesCollection.ItemsLayout as GridItemsLayout)?.Span)
+            {
+                SamplesCollection.ItemsLayout = new GridItemsLayout(numberOfColumns, ItemsLayoutOrientation.Vertical)
+                {
+                    HorizontalItemSpacing = 5,
+                    VerticalItemSpacing = 5
+                };
+            }
 #elif WINDOWS
-            var numberOfColumns = Math.Floor(Width / _viewModel.SampleImageWidth);
-            SamplesGridItemsLayout.Span = (int)numberOfColumns;
+            SamplesGridItemsLayout.Span = numberOfColumns;
 #endif
         };
+#else
+        SamplesCollection.Style = Resources["AndroidStyle"] as Style;
 #endif
-
     }
 
     private async void FeedbackToolbarItem_Clicked(object sender, EventArgs e)