✨ Add champion detail page and addedit page

App/App.csproj

@@ -70,7 +70,7 @@
 	  <BundleResource Include="Resources\Images\lol_logo.png" />
 	</ItemGroup>
 	<ItemGroup>
-	  <ProjectReference Include="..\ViewModel\ViewModel.csproj" />
 	  <ProjectReference Include="..\StubLib\StubLib.csproj" />
+	  <ProjectReference Include="..\ViewModel\ViewModel.csproj" />
 	</ItemGroup>
 </Project>

App/Converters/Base64ToImage.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+
+namespace App.Converters
+{
+	public class Base64ToImage : IValueConverter
+	{
+		public Base64ToImage()
+		{
+            
+		}
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var bytes = System.Convert.FromBase64String(value as string);
+            MemoryStream imageDecode = new MemoryStream(bytes);
+            return ImageSource.FromStream(() => imageDecode);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
+

App/MauiProgram.cs

@@ -20,10 +20,7 @@ public static class MauiProgram
 			})
 			.Services.AddSingleton<IDataManager, StubData>()
 			.AddSingleton<ChampionManagerVM>()
-			.AddSingleton<ChampionsListPage>()
+			.AddSingleton<ChampionsListPage>();			
-
-			.AddTransient<ChampionVM>()
-			.AddTransient<ChampionDetailPage>();
 
 #if DEBUG
 		builder.Logging.AddDebug();

App/Pages/ChampionAddEditPage.xaml

@@ -2,16 +2,47 @@
 <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">
+             xmlns:converters="clr-namespace:App.Converters"
-    <ContentPage.ToolbarItems>
+             Title="Add Champion"
-        <ToolbarItem Text="Edit"/>
+             BackgroundColor="Black">
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
 
-    </ContentPage.ToolbarItems>
+        <Style TargetType="Label">
+            <Setter Property="TextColor" Value="{StaticResource Primary}"/>
+        </Style>
+
+        <Style TargetType="Entry">
+            <Setter Property="ClearButtonVisibility" Value="WhileEditing"/>
+            <Setter Property="TextColor" Value="{StaticResource Black}"/>
+            <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
+            <Setter Property="PlaceholderColor" Value="{StaticResource Gray500}"/>
+        </Style>
+    </ContentPage.Resources>
 
     <VerticalStackLayout>
-        <Label 
+        <ScrollView>
-            Text="Welcome to .NET MAUI!"
+            <StackLayout Padding="20,0,0,0" Orientation="Vertical">
-            VerticalOptions="Center" 
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
-            HorizontalOptions="Center" />
+                    <Label Text="Name"/>
+                    <Entry Placeholder="Champion name"/>
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Icon"/>
+                    
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Image"/>
+                    
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Bio"/>
+                    <Entry/>
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
     </VerticalStackLayout>
 </ContentPage>

App/Pages/ChampionDetailPage.xaml

@@ -1,12 +1,55 @@
 <?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"
+             xmlns:converters="clr-namespace:App.Converters"
              x:Class="App.Pages.ChampionDetailPage"
-             Title="Champion Page">
+             Title="Champion Page"
-    <VerticalStackLayout>
+             BackgroundColor="Black">
-        <Label 
+    <ContentPage.ToolbarItems>
-            Text="{Binding Name}"
+        <ToolbarItem Text="Edit" Clicked="ToolbarItem_Clicked"/>
-            VerticalOptions="Center" 
+
-            HorizontalOptions="Center" />
+    </ContentPage.ToolbarItems>
-    </VerticalStackLayout>
+
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
+
+        <Style TargetType="Label">
+            <Setter Property="TextColor" Value="{StaticResource Primary}"/>
+        </Style>
+    </ContentPage.Resources>
+
+    <ScrollView>
+        <StackLayout Orientation="Vertical">
+            <Image Source="{Binding Path=Image, Converter={StaticResource Base64ToImageConv}}"/>
+
+            <StackLayout Orientation="Horizontal" Padding="0,0,0,20">
+                <Label Text="{Binding Name}"
+                       HorizontalOptions="Start"
+                       FontSize="Title"/>
+
+                <Image HorizontalOptions="End"/>
+            </StackLayout>
+
+            <Label Text="{Binding Bio}"/>
+
+            <Label Text="Characteristics"
+                   FontSize="Title"
+                   Padding="0,0,0,20"/>
+
+            <CollectionView ItemsSource="{Binding Characteristics}"
+                            ItemsLayout="VerticalGrid, 3">
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <Border Margin="10" Stroke="{StaticResource Primary}" StrokeThickness="3">
+                            <StackLayout Orientation="Vertical" VerticalOptions="Center">
+                                <Label HorizontalOptions="Center" Text="{Binding Key}"/>
+                                <Label HorizontalOptions="Center" Text="{Binding Value}"/>
+                            </StackLayout>
+                        </Border>
+                    </DataTemplate>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+        </StackLayout>
+    </ScrollView>
+
 </ContentPage>

App/Pages/ChampionDetailPage.xaml.cs

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

App/Pages/ChampionsListPage.xaml

@@ -1,20 +1,70 @@
 <?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"
+             xmlns:converters="clr-namespace:App.Converters"
              x:Class="App.Pages.ChampionsListPage"
              Title="Champions">
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="Add" Clicked="AddClicked"/>
     </ContentPage.ToolbarItems>
 
-    <ListView ItemsSource="{Binding ChampionVMs}" ItemSelected="ListView_ItemSelected">
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
+
+        <Style TargetType="Button">
+            <Setter Property="WidthRequest">40</Setter>
+            <Setter Property="HeightRequest">20</Setter>
+        </Style>
+    </ContentPage.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition/>
+            <RowDefinition/>
+        </Grid.RowDefinitions>
+
+        <ListView Grid.Row="0"
+                  ItemsSource="{Binding ChampionVMs}"
+                  ItemSelected="ListView_ItemSelected"
+                  SelectionMode="Single">
             <ListView.ItemTemplate>
                 <DataTemplate>
-                <TextCell 
+                    <ViewCell>
-                        Text="{Binding Name}"
+                        <SwipeView Grid.Row="0">
-                        Detail="{Binding Bio}">
+                            <SwipeView.RightItems>
-                </TextCell>
+                                <SwipeItems>
+                                    <SwipeItem Text="Delete"
+                                               BackgroundColor="{StaticResource DeleteColor}"/>
+                                    <SwipeItem Text="Edit"
+                                               BackgroundColor="{StaticResource EditColor}"/>
+                                </SwipeItems>
+                            </SwipeView.RightItems>
+
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="3*"/>
+                                </Grid.ColumnDefinitions>
+
+                                <Image Grid.Column="0" Source="{Binding Path=Icon, Converter={StaticResource Base64ToImageConv}}"/>
+
+                                <StackLayout Grid.Column="1">
+                                    <Label Text="{Binding Name}"/>
+                                </StackLayout>
+                            </Grid>
+
+                        </SwipeView>
+                    </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
+
+        <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="End">
+            <Button Text="&lt;"/>
+            <Label Text="{Binding Index}"/>
+            <Label Text="/"/>
+            <Label Text="{Binding NbPages}"/>
+            <Button Text="&gt;"/>
+        </StackLayout>
+    </Grid>
 </ContentPage>

App/Pages/ChampionsListPage.xaml.cs

@@ -15,14 +15,11 @@ public partial class ChampionsListPage : ContentPage
 
     async void AddClicked(System.Object sender, System.EventArgs e)
     {
-		await Shell.Current.GoToAsync(nameof(ChampionAddEditPage));
+        await Navigation.PushAsync(new ChampionAddEditPage());
     }
 
     async void ListView_ItemSelected(System.Object sender, Microsoft.Maui.Controls.SelectedItemChangedEventArgs e)
     {
-        await Shell.Current.GoToAsync(nameof(ChampionDetailPage), true, new Dictionary<string, object>
+        await Navigation.PushAsync(new ChampionDetailPage(e.SelectedItem as ChampionVM));
-        {
-            { "ChampionVM", e.SelectedItem }
-        });
     }
 }

App/Resources/Styles/Colors.xaml

@@ -17,6 +17,10 @@
     <Color x:Key="Gray600">#404040</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
+
+    <Color x:Key="EditColor">#AEAEB1</Color>
+    <Color x:Key="DeleteColor">#FE3C30</Color>
+
     <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
     <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
     <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>

LeagueOfLegends.sln

@@ -15,7 +15,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tests", "Tests", "{A88951E3
 EndProject
 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}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ViewModel", "ViewModel\ViewModel.csproj", "{75E3813D-87BE-4837-B318-916CFA6A276F}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -43,10 +43,10 @@ Global
 		{9A58F419-4627-4656-9C36-959DA39A55E9}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{9A58F419-4627-4656-9C36-959DA39A55E9}.Release|Any CPU.ActiveCfg = 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
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.Build.0 = Release|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

ViewModel/ChampionManagerVM.cs

@@ -48,6 +48,24 @@ namespace ViewModel
                 await LoadChampions();
         }
 
+        public int NbPages => NbChampions / Count;
+
+        public int NbChampions
+        {
+            get => _nbChampions;
+            set
+            {
+                _nbChampions = value;
+            }
+        }
+        private int _nbChampions;
+
+        private async Task GetNbChampions()
+        {
+            NbChampions = await DataManager.ChampionsMgr.GetNbItems();
+            OnPropertyChanged(nameof(NbPages));
+        }
+
         private async Task LoadChampions()
         {
             _championVMs.Clear();

ViewModel/ChampionVM.cs

@@ -1,4 +1,5 @@
 using Model;
+using System;
 
 namespace ViewModel
 {
@@ -9,7 +10,7 @@ namespace ViewModel
             get => _model;
             set
             {
-                //if (_model.Equals(value) || _model.Equals(null)) return;
+                if (_model.Equals(value) || value == null) return;
                 _model = value;
                 OnPropertyChanged();
             }
@@ -19,12 +20,12 @@ namespace ViewModel
 
         public ChampionVM(Champion model)
         {
-            Model = model;
+            _model = model;
         }
 
         public ChampionVM()
         {
-            Model = new Champion("Poppy", ChampionClass.Tank);
+            _model = new Champion("Poppy", ChampionClass.Tank);
         }
 
         public string Name
@@ -42,5 +43,32 @@ namespace ViewModel
                 OnPropertyChanged();
             }
         }
+
+        public string Icon
+        {
+            get => Model.Icon;
+            set
+            {
+                if (value == null) return;
+                _model.Icon = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public string Image
+        {
+            get => Model.Image.Base64;
+            set
+            {
+                if (value == null) return;
+                _model.Image.Base64 = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public IReadOnlyDictionary<string, int> Characteristics
+        {
+            get => Model.Characteristics;
+        }
     }
 }