improve mac and ios appearance

Esri · Jan 20, 2024 · b0b4f47 · b0b4f47
1 parent b0f598d
commit b0b4f47
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/MAUI/Maui.Samples/Views/CategoryPage.xaml b/src/MAUI/Maui.Samples/Views/CategoryPage.xaml
@@ -16,33 +16,31 @@
                      IconImageSource="settings.png"
                      Text="Settings" />
     </ContentPage.ToolbarItems>
-
     <ContentPage.Resources>
         <converters:SampleToBitmapConverter x:Key="SampleToBitmapConverter" />
         <converters:BoolToFavoriteGlyphConverter x:Key="BoolToFavoriteGlyphConverter" />
     </ContentPage.Resources>
     <CollectionView BackgroundColor="Transparent"
+                    x:Name="SamplesCollection"
                     ItemsSource="{Binding SamplesItems}"
                     SelectionChanged="CollectionView_SelectionChanged"
                     SelectionMode="Single">
         <CollectionView.ItemsLayout>
-            <GridItemsLayout x:Name="SamplesGridItemsLayout"
-                             HorizontalItemSpacing="5"
+            <GridItemsLayout HorizontalItemSpacing="5"
                              Orientation="Vertical"
-                             SnapPointsAlignment="Start"
                              Span="{OnPlatform Default=4,
                                                iOS=1,
                                                Android=1}"
                              VerticalItemSpacing="5" />
         </CollectionView.ItemsLayout>
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="viewModels:SampleViewModel">
-                <Border MinimumWidthRequest="{Binding SampleImageWidth}" WidthRequest="{Binding SampleImageWidth}">
+                <Border StrokeThickness="{OnPlatform Default=0, Android=1}">
                     <Border.GestureRecognizers>
                         <PointerGestureRecognizer PointerEntered="PointerGestureRecognizer_PointerEntered" />
                         <PointerGestureRecognizer PointerExited="PointerGestureRecognizer_PointerExited" />
                     </Border.GestureRecognizers>
-                    <Grid>
+                    <Grid WidthRequest="{Binding SampleImageWidth, Mode=OneTime}" >
                         <Grid.RowDefinitions>
                             <RowDefinition Height="*" />
                             <RowDefinition Height="45" />

diff --git a/src/MAUI/Maui.Samples/Views/CategoryPage.xaml.cs b/src/MAUI/Maui.Samples/Views/CategoryPage.xaml.cs
@@ -3,6 +3,7 @@
 using ArcGIS.Samples.Shared.Managers;
 using ArcGIS.ViewModels;
 using CommunityToolkit.Maui.Views;
+using CommunityToolkit.Mvvm.Messaging;
 using System.Diagnostics;
 
 namespace ArcGIS;
@@ -24,15 +25,21 @@ private void Initialize()
         _viewModel = new CategoryViewModel();
         BindingContext = _viewModel;
 
+        WeakReferenceMessenger.Default.Register<string>(this, (message, category) => ScrollToTop());
+
         SizeChanged += (s, e) =>
         {
             var numberOfColumns = Math.Floor(Width / _viewModel.SampleImageWidth);
-            SamplesGridItemsLayout.Span = (int)numberOfColumns;
+            var layout = new GridItemsLayout((int)numberOfColumns, ItemsLayoutOrientation.Vertical);
+            layout.HorizontalItemSpacing = 5;
+            layout.VerticalItemSpacing = 5;
+            SamplesCollection.ItemsLayout = layout;
         };
+
     }
 
     private async void SettingsClicked(object sender, EventArgs e)
-    {
+    { 
         await Navigation.PushAsync(new SettingsPage(), true);
     }
 
@@ -78,6 +85,15 @@ protected override void OnNavigatedTo(NavigatedToEventArgs args)
         }
     }
 
+    private void ScrollToTop()
+    {
+        var firstItem = _viewModel.SamplesItems.FirstOrDefault();
+        if (firstItem != null)
+        {
+            SamplesCollection.ScrollTo(firstItem, null, ScrollToPosition.Start);
+        }
+    }
+
     private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
     {
         try