✨ Add champions list with binding on list

App/App.csproj

@@ -12,7 +12,7 @@
 		<ImplicitUsings>enable</ImplicitUsings>
 
 		<!-- Display name -->
-		<ApplicationTitle>App</ApplicationTitle>
+		<ApplicationTitle>LOL App</ApplicationTitle>
 
 		<!-- App Identifier -->
 		<ApplicationId>com.companyname.app</ApplicationId>
@@ -62,10 +62,15 @@
 	  <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" />
 	</ItemGroup>
 	<ItemGroup>
 	  <BundleResource Include="Resources\Images\icon_home.png" />
 	  <BundleResource Include="Resources\Images\icon_sword.png" />
-	  <BundleResource Include="Resources\Images\icon_sword.png" />
+	  <BundleResource Include="Resources\Images\lol_logo.png" />
+	</ItemGroup>
+	<ItemGroup>
+	  <ProjectReference Include="..\ViewModel\ViewModel.csproj" />
+	  <ProjectReference Include="..\StubLib\StubLib.csproj" />
 	</ItemGroup>
 </Project>

App/AppShell.xaml.cs

@@ -1,10 +1,15 @@
-namespace App;
+using App.Pages;
+
+namespace App;
 
 public partial class AppShell : Shell
 {
 	public AppShell()
 	{
 		InitializeComponent();
-	}
+
+        Routing.RegisterRoute(nameof(ChampionAddEditPage), typeof(ChampionAddEditPage));
+        Routing.RegisterRoute(nameof(ChampionDetailPage), typeof(ChampionDetailPage));
+    }
 }
 

App/MauiProgram.cs

@@ -1,4 +1,8 @@
 using Microsoft.Extensions.Logging;
+using Model;
+using StubLib;
+using ViewModel;
+using App.Pages;
 
 namespace App;
 
@@ -13,7 +17,13 @@ public static class MauiProgram
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
 				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
-			});
+			})
+			.Services.AddSingleton<IDataManager, StubData>()
+			.AddSingleton<ChampionManagerVM>()
+			.AddSingleton<ChampionsListPage>()
+
+			.AddTransient<ChampionVM>()
+			.AddTransient<ChampionDetailPage>();
 
 #if DEBUG
 		builder.Logging.AddDebug();

App/Pages/ChampionAddEditPage.xaml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="App.Pages.ChampionAddEditPage"
+             Title="Add Champion">
+    <ContentPage.ToolbarItems>
+        <ToolbarItem Text="Edit"/>
+
+    </ContentPage.ToolbarItems>
+
+    <VerticalStackLayout>
+        <Label 
+            Text="Welcome to .NET MAUI!"
+            VerticalOptions="Center" 
+            HorizontalOptions="Center" />
+    </VerticalStackLayout>
+</ContentPage>

App/Pages/ChampionAddEditPage.xaml.cs

@@ -0,0 +1,9 @@
+namespace App.Pages;
+
+public partial class ChampionAddEditPage : ContentPage
+{
+	public ChampionAddEditPage()
+	{
+		InitializeComponent();
+	}
+}

App/Pages/ChampionDetailPage.xaml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="App.Pages.ChampionDetailPage"
+             Title="Champion Page">
+    <VerticalStackLayout>
+        <Label 
+            Text="{Binding Name}"
+            VerticalOptions="Center" 
+            HorizontalOptions="Center" />
+    </VerticalStackLayout>
+</ContentPage>

App/Pages/ChampionDetailPage.xaml.cs

@@ -0,0 +1,14 @@
+using ViewModel;
+
+namespace App.Pages;
+
+public partial class ChampionDetailPage : ContentPage
+{
+	//public ChampionVM ChampionVM { get; private set; }
+
+	public ChampionDetailPage(ChampionVM championVM)
+	{
+		InitializeComponent();
+        BindingContext = championVM;
+    }
+}

App/Pages/ChampionsListPage.xaml

@@ -4,19 +4,17 @@
              x:Class="App.Pages.ChampionsListPage"
              Title="Champions">
     <ContentPage.ToolbarItems>
-        <ToolbarItem Text="Ajouter"/>
+        <ToolbarItem Text="Add" Clicked="AddClicked"/>
     </ContentPage.ToolbarItems>
 
-    <VerticalStackLayout>
+    <ListView ItemsSource="{Binding ChampionVMs}" ItemSelected="ListView_ItemSelected">
-        <ListView ItemsSource="{Binding Champions}">
+        <ListView.ItemTemplate>
-            <ListView.ItemTemplate>
+            <DataTemplate>
-                <DataTemplate>
+                <TextCell 
-                    <ImageCell ImageSource="{Binding Image}"
+                        Text="{Binding Name}"
-                               Text="{Binding Name}"
+                        Detail="{Binding Bio}">
-                               Detail="{Binding Description}">
+                </TextCell>
-                    </ImageCell>
+            </DataTemplate>
-                </DataTemplate>
+        </ListView.ItemTemplate>
-            </ListView.ItemTemplate>
+    </ListView>
-        </ListView>
-    </VerticalStackLayout>
 </ContentPage>

App/Pages/ChampionsListPage.xaml.cs

@@ -1,9 +1,28 @@
-namespace App.Pages;
+using ViewModel;
+
+namespace App.Pages;
 
 public partial class ChampionsListPage : ContentPage
 {
-	public ChampionsListPage()
+    public ChampionManagerVM ChampionManagerVM { get; private set; }
+
+	public ChampionsListPage(ChampionManagerVM championManagerVM)
 	{
+		ChampionManagerVM = championManagerVM;
 		InitializeComponent();
-	}
+		BindingContext = ChampionManagerVM;
+    }
+
+    async void AddClicked(System.Object sender, System.EventArgs e)
+    {
+		await Shell.Current.GoToAsync(nameof(ChampionAddEditPage));
+    }
+
+    async void ListView_ItemSelected(System.Object sender, Microsoft.Maui.Controls.SelectedItemChangedEventArgs e)
+    {
+        await Shell.Current.GoToAsync(nameof(ChampionDetailPage), true, new Dictionary<string, object>
+        {
+            { "ChampionVM", e.SelectedItem }
+        });
+    }
 }

App/Pages/MainPage.xaml

@@ -4,13 +4,12 @@
              x:Class="App.Pages.MainPage"
              Title="Home">
 
-    <ScrollView>
+    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
-        <VerticalStackLayout
+        <Image Source="lol_logo.png"/>
-            Spacing="25"
+        <Label HorizontalOptions="Center" Text="League of Legend Data" FontAttributes="Bold"/>
-            Padding="30,0"
+        <Label Text="Find informations about champions, skins and runes"/>
-            VerticalOptions="Center">
+    </StackLayout>
-        </VerticalStackLayout>
+
-    </ScrollView>
 
 </ContentPage>
 

LeagueOfLegends.sln

@@ -13,7 +13,9 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ConsoleTests", "Tests\Conso
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tests", "Tests", "{A88951E3-B544-49E0-A7A2-47360DD69239}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "App", "App\App.csproj", "{AF68E1F2-F41E-42C5-A8DA-331A22854064}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "App", "App\App.csproj", "{9A58F419-4627-4656-9C36-959DA39A55E9}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ViewModel", "ViewModel\ViewModel.csproj", "{7A222D06-D84F-4DA7-ADCC-71D339261117}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -37,10 +39,14 @@ Global
 		{D2E5D03F-C14A-4E6D-AF5C-9749A75ACBA0}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{D2E5D03F-C14A-4E6D-AF5C-9749A75ACBA0}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{D2E5D03F-C14A-4E6D-AF5C-9749A75ACBA0}.Release|Any CPU.Build.0 = Release|Any CPU
-		{AF68E1F2-F41E-42C5-A8DA-331A22854064}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{9A58F419-4627-4656-9C36-959DA39A55E9}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{AF68E1F2-F41E-42C5-A8DA-331A22854064}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{9A58F419-4627-4656-9C36-959DA39A55E9}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{AF68E1F2-F41E-42C5-A8DA-331A22854064}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{9A58F419-4627-4656-9C36-959DA39A55E9}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{AF68E1F2-F41E-42C5-A8DA-331A22854064}.Release|Any CPU.Build.0 = Release|Any CPU
+		{9A58F419-4627-4656-9C36-959DA39A55E9}.Release|Any CPU.Build.0 = Release|Any CPU
+		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

ViewModel/BaseToolkit.cs

@@ -0,0 +1,15 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace ViewModel
+{
+    public class BaseToolkit : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler? PropertyChanged;
+
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+    }
+}

ViewModel/ChampionManagerVM.cs

@@ -0,0 +1,61 @@
+using System.Collections.ObjectModel;
+using Model;
+
+namespace ViewModel
+{
+    public class ChampionManagerVM : BaseToolkit
+    {
+        public ReadOnlyObservableCollection<ChampionVM> ChampionVMs { get; private set; }
+        private ObservableCollection<ChampionVM> _championVMs { get; set; } = new ObservableCollection<ChampionVM>();
+
+        public IDataManager DataManager
+        {
+            get => _dataManager;
+            set
+            {
+                if (_dataManager == value) return;
+                _dataManager = value;
+                OnPropertyChanged();
+                LoadChampions();
+            }
+        }
+        private IDataManager _dataManager;
+
+        public ChampionManagerVM(IDataManager dataManager)
+        {
+            DataManager = dataManager;
+            ChampionVMs = new ReadOnlyObservableCollection<ChampionVM>(_championVMs);
+            PropertyChanged += ChampionManagerVM_PropertyChanged;
+        }
+
+        public int Index
+        {
+            get => _index;
+            set
+            {
+                if (_index == value) return;
+                _index = value;
+            }
+
+        }
+        private int _index;
+
+        public int Count { get; set; } = 5;
+
+        private async void ChampionManagerVM_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == nameof(Index))
+                await LoadChampions();
+        }
+
+        private async Task LoadChampions()
+        {
+            _championVMs.Clear();
+            var champions = await DataManager.ChampionsMgr.GetItems(0, Count);
+            foreach (var champion in champions)
+            {
+                _championVMs.Add(new ChampionVM(champion));
+            }
+        }
+    }
+}

ViewModel/ChampionVM.cs

@@ -0,0 +1,46 @@
+using Model;
+
+namespace ViewModel
+{
+    public class ChampionVM : BaseToolkit
+    {
+        public Champion Model
+        {
+            get => _model;
+            set
+            {
+                //if (_model.Equals(value) || _model.Equals(null)) return;
+                _model = value;
+                OnPropertyChanged();
+            }
+        }
+        private Champion _model;
+
+
+        public ChampionVM(Champion model)
+        {
+            Model = model;
+        }
+
+        public ChampionVM()
+        {
+            Model = new Champion("Poppy", ChampionClass.Tank);
+        }
+
+        public string Name
+        {
+            get => Model.Name;
+        }
+
+        public string Bio
+        {
+            get => Model.Bio;
+            set
+            {
+                if (value == null) return;
+                _model.Bio = value;
+                OnPropertyChanged();
+            }
+        }
+    }
+}

ViewModel/ViewModel.csproj

@@ -0,0 +1,12 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Model\Model.csproj" />
+  </ItemGroup>
+</Project>