✨ Add pagination + selected item

App/App.csproj

@@ -52,17 +52,20 @@
 
 	<ItemGroup>
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
+		<PackageReference Include="CommunityToolkit.Maui" Version="5.2.0" />
 	</ItemGroup>
 
 	<ItemGroup>
 	  <Folder Include="Pages\" />
 	  <Folder Include="Resources\Images\" />
+	  <Folder Include="ViewModel\" />
 	</ItemGroup>
 	<ItemGroup>
 	  <None Remove="Resources\Images\" />
 	  <None Remove="Resources\Images\icon_home.png" />
 	  <None Remove="Resources\Images\icon_sword.png" />
 	  <None Remove="Resources\Images\lol_logo.png" />
+	  <None Remove="ViewModel\" />
 	</ItemGroup>
 	<ItemGroup>
 	  <BundleResource Include="Resources\Images\icon_home.png" />

App/AppShell.xaml.cs

@@ -8,7 +8,6 @@ public partial class AppShell : Shell
 	{
 		InitializeComponent();
 
-        Routing.RegisterRoute(nameof(ChampionAddEditPage), typeof(ChampionAddEditPage));
         Routing.RegisterRoute(nameof(ChampionDetailPage), typeof(ChampionDetailPage));
     }
 }

App/MauiProgram.cs

@@ -1,8 +1,10 @@
 using Microsoft.Extensions.Logging;
+using CommunityToolkit.Maui;
 using Model;
 using StubLib;
 using ViewModel;
 using App.Pages;
+using App.ViewModel;
 
 namespace App;
 
@@ -13,12 +15,14 @@ public static class MauiProgram
 		var builder = MauiApp.CreateBuilder();
 		builder
 			.UseMauiApp<App>()
+            .UseMauiCommunityToolkit()
             .ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
 				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
 			})
 			.Services.AddSingleton<IDataManager, StubData>()
+            .AddSingleton<ChampionListPageVM>()
             .AddSingleton<ChampionManagerVM>()
             .AddSingleton<ChampionsListPage>();			
 

App/Pages/ChampionDetailPage.xaml.cs

@@ -6,15 +6,15 @@ public partial class ChampionDetailPage : ContentPage
 {
 	public ChampionVM ChampionVM { get; private set; }
 
-	public ChampionDetailPage(ChampionVM championVM)
+	public ChampionDetailPage()
 	{
-        ChampionVM = championVM;
+        //ChampionVM = championVM;
         InitializeComponent();
         BindingContext = ChampionVM;
     }
 
     async void ToolbarItem_Clicked(System.Object sender, System.EventArgs e)
     {
-        await Navigation.PushAsync(new ChampionAddEditPage());
+        await Navigation.PushModalAsync(new ChampionAddEditPage());
     }
 }

App/Pages/ChampionsListPage.xaml

@@ -2,10 +2,11 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:converters="clr-namespace:App.Converters"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              x:Class="App.Pages.ChampionsListPage"
              Title="Champions">
     <ContentPage.ToolbarItems>
-        <ToolbarItem Text="Add" Clicked="AddClicked"/>
+        <ToolbarItem Text="Add" Command="{Binding NaviagteToChampionAddEditPageCommand}"/>
     </ContentPage.ToolbarItems>
 
     <ContentPage.Resources>
@@ -24,9 +25,14 @@
         </Grid.RowDefinitions>
 
         <ListView Grid.Row="0"
-                  ItemsSource="{Binding ChampionVMs}"
+                  ItemsSource="{Binding ChampionManagerVM.ChampionVMs}"
-                  ItemSelected="ListView_ItemSelected"
                   SelectionMode="Single">
+            <ListView.Behaviors>
+                <toolkit:EventToCommandBehavior
+                    EventName="ItemSelected"
+                    Command="{Binding NavigateToChampionDetailCommand}"/>
+
+            </ListView.Behaviors>
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <ViewCell>
@@ -60,11 +66,11 @@
         </ListView>
 
         <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="End">
-            <Button Text="&lt;"/>
+            <Button Text="&lt;" Command="{Binding ChampionManagerVM.PreviousPageCommand}"/>
-            <Label Text="{Binding Index}"/>
+            <Label Text="{Binding ChampionManagerVM.Index}"/>
             <Label Text="/"/>
-            <Label Text="{Binding NbPages}"/>
+            <Label Text="{Binding ChampionManagerVM.Index}"/>
-            <Button Text="&gt;"/>
+            <Button Text="&gt;"  Command="{Binding ChampionManagerVM.NextPageCommand}"/>
         </StackLayout>
     </Grid>
 </ContentPage>

App/Pages/ChampionsListPage.xaml.cs

@@ -1,25 +1,17 @@
 using ViewModel;
+using App.ViewModel;
 
 namespace App.Pages;
 
 public partial class ChampionsListPage : ContentPage
 {
-    public ChampionManagerVM ChampionManagerVM { get; private set; }
+    public ChampionListPageVM ChampionListPageVM { get; private set; }
 
-	public ChampionsListPage(ChampionManagerVM championManagerVM)
+	public ChampionsListPage(ChampionListPageVM championListPageVM)
 	{
-		ChampionManagerVM = championManagerVM;
+        ChampionListPageVM = championListPageVM;
+        ChampionListPageVM.Navigation = this.Navigation;
         InitializeComponent();
-		BindingContext = ChampionManagerVM;
+		BindingContext = ChampionListPageVM;
-    }
-
-    async void AddClicked(System.Object sender, System.EventArgs e)
-    {
-        await Navigation.PushAsync(new ChampionAddEditPage());
-    }
-
-    async void ListView_ItemSelected(System.Object sender, Microsoft.Maui.Controls.SelectedItemChangedEventArgs e)
-    {
-        await Navigation.PushAsync(new ChampionDetailPage(e.SelectedItem as ChampionVM));
     }
 }

App/ViewModel/ChampionListPageVM.cs

@@ -0,0 +1,33 @@
+using System;
+using System.Windows.Input;
+using App.Pages;
+using ViewModel;
+
+namespace App.ViewModel
+{
+	public class ChampionListPageVM
+	{
+		public INavigation Navigation { get; set; }
+
+		public ChampionManagerVM ChampionManagerVM { get; private set; }
+
+		public ICommand NavigateToChampionDetailCommand { get; private set; }
+		public ICommand NaviagteToChampionAddEditPageCommand { get; private set; }
+
+        public ChampionListPageVM(ChampionManagerVM championManager)
+		{
+			ChampionManagerVM = championManager;
+
+            NavigateToChampionDetailCommand = new Command (
+				execute: async () => await Shell.Current.GoToAsync(nameof(ChampionDetailPage)),
+				canExecute: () => ChampionManagerVM is not null
+			);
+
+            NaviagteToChampionAddEditPageCommand = new Command(
+				execute: async () => await Navigation.PushModalAsync(new ChampionAddEditPage()),
+				canExecute: () => ChampionManagerVM is not null
+            );
+        }
+	}
+}
+

ViewModel/BaseToolkit.cs

@@ -1,9 +1,10 @@
-using System.ComponentModel;
+using System;
+using System.ComponentModel;
 using System.Runtime.CompilerServices;
 
 namespace ViewModel
 {
-    public class BaseToolkit : INotifyPropertyChanged
+    public class BaseToolkit
     {
         public event PropertyChangedEventHandler? PropertyChanged;
 
@@ -13,3 +14,4 @@ namespace ViewModel
         }
     }
 }
+

ViewModel/ChampionManagerVM.cs

@@ -1,10 +1,14 @@
-using System.Collections.ObjectModel;
+using System;
 using Model;
+using System.Collections.ObjectModel;
+using System.Windows.Input;
 
 namespace ViewModel
 {
 	public class ChampionManagerVM : BaseToolkit
 	{
+        #region Properties
+
         public ReadOnlyObservableCollection<ChampionVM> ChampionVMs { get; private set; }
         private ObservableCollection<ChampionVM> _championVMs { get; set; } = new ObservableCollection<ChampionVM>();
 
@@ -16,18 +20,11 @@ namespace ViewModel
                 if (_dataManager == value) return;
                 _dataManager = value;
                 OnPropertyChanged();
-                LoadChampions();
+                LoadChampions(Index, Count);
             }
         }
         private IDataManager _dataManager;
 
-        public ChampionManagerVM(IDataManager dataManager)
-        {
-            DataManager = dataManager;
-            ChampionVMs = new ReadOnlyObservableCollection<ChampionVM>(_championVMs);
-            PropertyChanged += ChampionManagerVM_PropertyChanged;
-        }
-
         public int Index
         {
             get => _index;
@@ -35,6 +32,9 @@ namespace ViewModel
             {
                 if (_index == value) return;
                 _index = value;
+                OnPropertyChanged();
+                (NextPageCommand as Command).ChangeCanExecute();
+                (PreviousPageCommand as Command).ChangeCanExecute();
             }
 
         }
@@ -42,10 +42,46 @@ namespace ViewModel
 
         public int Count { get; set; } = 5;
 
+        #endregion
+
+        #region Commands
+
+        public ICommand LoadChampionsCommand { get; private set; }
+        public ICommand NextPageCommand { get; private set; }
+        public ICommand PreviousPageCommand { get; private set; }
+
+        #endregion
+
+        #region Constructors
+
+        public ChampionManagerVM(IDataManager dataManager)
+        {
+            DataManager = dataManager;
+            ChampionVMs = new ReadOnlyObservableCollection<ChampionVM>(_championVMs);
+            PropertyChanged += ChampionManagerVM_PropertyChanged;
+
+            LoadChampionsCommand = new Command(
+                execute: async () => await LoadChampions(Index, Count),
+                canExecute: () => DataManager is not null
+                );
+
+            NextPageCommand = new Command(
+                execute: () => NextPage(),
+                canExecute: () => CanNextPage()
+                );
+
+            PreviousPageCommand = new Command(
+                execute: () => PreviousPage(),
+                canExecute: () => CanPreviousPage()
+                );
+        }
+
+        #endregion
+
         private async void ChampionManagerVM_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
         {
             if (e.PropertyName == nameof(Index))
-                await LoadChampions();
+                await LoadChampions(Index, Count);
         }
 
         public int NbPages => NbChampions / Count;
@@ -66,14 +102,40 @@ namespace ViewModel
             OnPropertyChanged(nameof(NbPages));
         }
 
-        private async Task LoadChampions()
+        #region Commands methods
+
+        private async Task LoadChampions(int index, int count)
         {
             _championVMs.Clear();
-            var champions = await DataManager.ChampionsMgr.GetItems(0, Count);
+            var champions = await DataManager.ChampionsMgr.GetItems(index, count);
             foreach (var champion in champions)
             {
                 _championVMs.Add(new ChampionVM(champion));
             }
         }
+
+        private void NextPage()
+        {
+            Index += 1;
+        }
+
+        private bool CanNextPage()
+        {
+            return true;
+        }
+
+
+        private void PreviousPage()
+        {
+            Index -= 1;
+        }
+
+        private bool CanPreviousPage()
+        {
+            return Index > 0;
+        }
+   
+        #endregion
     }
 }
+

ViewModel/ChampionVM.cs

@@ -1,5 +1,5 @@
-using Model;
+using System;
-using System;
+using Model;
 
 namespace ViewModel
 {
@@ -17,17 +17,6 @@ namespace ViewModel
         }
         private Champion _model;
 
-
-        public ChampionVM(Champion model)
-        {
-            _model = model;
-        }
-
-        public ChampionVM()
-        {
-            _model = new Champion("Poppy", ChampionClass.Tank);
-        }
-
         public string Name
         {
             get => Model.Name;
@@ -70,5 +59,16 @@ namespace ViewModel
         {
             get => Model.Characteristics;
         }
+
+        public ChampionVM(Champion model)
+        {
+            _model = model;
+        }
+
+        public ChampionVM()
+        {
+            _model = new Champion("Poppy", ChampionClass.Tank);
         }
     }
+}
+

ViewModel/Platforms/Android/PlatformClass1.cs

@@ -0,0 +1,7 @@
+namespace ViewModel;
+
+// All the code in this file is only included on Android.
+public class PlatformClass1
+{
+}
+

ViewModel/Platforms/MacCatalyst/PlatformClass1.cs

@@ -0,0 +1,7 @@
+namespace ViewModel;
+
+// All the code in this file is only included on Mac Catalyst.
+public class PlatformClass1
+{
+}
+

ViewModel/Platforms/Tizen/PlatformClass1.cs

@@ -0,0 +1,9 @@
+using System;
+
+namespace ViewModel
+{
+	// All the code in this file is only included on Tizen.
+	public class PlatformClass1
+	{
+	}
+}

ViewModel/Platforms/Windows/PlatformClass1.cs

@@ -0,0 +1,7 @@
+namespace ViewModel;
+
+// All the code in this file is only included on Windows.
+public class PlatformClass1
+{
+}
+

ViewModel/Platforms/iOS/PlatformClass1.cs

@@ -0,0 +1,7 @@
+namespace ViewModel;
+
+// All the code in this file is only included on iOS.
+public class PlatformClass1
+{
+}
+

ViewModel/ViewModel.csproj

@@ -1,11 +1,25 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+		<TargetFrameworks>net7.0;net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>
+		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
+		<!-- <TargetFrameworks>$(TargetFrameworks);net7.0-tizen</TargetFrameworks> -->
+		<UseMaui>true</UseMaui>
+		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
-    <Nullable>enable</Nullable>
+
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
+		<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
 	</PropertyGroup>
 
+	<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net7.0-ios|AnyCPU'">
+	  <CreatePackage>false</CreatePackage>
+	</PropertyGroup>
 	<ItemGroup>
 	  <ProjectReference Include="..\Model\Model.csproj" />
 	</ItemGroup>