🚀 [Code] Updated FavoritePage.xaml, adding dynamic columns in Collect…

…ionView based on device width
danielmonettelli · Apr 19, 2024 · c6815f9 · c6815f9
1 parent 0b4af60
commit c6815f9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/Meow/ViewModels/FavoriteViewModel.cs b/Meow/ViewModels/FavoriteViewModel.cs
@@ -8,6 +8,9 @@ public partial class FavoriteViewModel : BaseViewModel
     [ObservableProperty]
     private FavoriteCatResponse selectedFavoriteCat = new();
 
+    [ObservableProperty]
+    private int columns;
+
     private readonly ICatService _catService;
 
     public FavoriteViewModel(ICatService catService)

diff --git a/Meow/Views/FavoritePage.xaml b/Meow/Views/FavoritePage.xaml
@@ -10,7 +10,8 @@
     xmlns:reusablecomponent="clr-namespace:Meow.ReusableComponents"
     xmlns:viewModel="clr-namespace:Meow.ViewModels"
     ios:Page.UseSafeArea="true"
-    x:DataType="viewModel:FavoriteViewModel">
+    x:DataType="viewModel:FavoriteViewModel"
+    SizeChanged="ContentPage_SizeChanged">
 
     <ContentPage.Resources>
         <Style TargetType="Border">
@@ -49,7 +50,7 @@
                 <GridItemsLayout
                     HorizontalItemSpacing="16"
                     Orientation="Vertical"
-                    Span="2"
+                    Span="{Binding Columns}"
                     VerticalItemSpacing="16" />
             </CollectionView.ItemsLayout>
             <CollectionView.ItemTemplate>

diff --git a/Meow/Views/FavoritePage.xaml.cs b/Meow/Views/FavoritePage.xaml.cs
@@ -17,4 +17,9 @@ protected async override void OnAppearing()
 
         await vm.InitializeDataAsync();
     }
+
+    private void ContentPage_SizeChanged(object sender, EventArgs e)
+    {
+        vm.Columns = (int)(Width / 168);
+    }
 }