Previous part: Infinite Scroll and Loading Indicator in ListView in MAUI MVVM .NET 9 [GamesCatalog] - Part 5
Step 1. Let's create the page responsible for adding a game to our database.
Step 1.1. Create the ContentPage and the ViewModel.
Step 1.2. AddGameVM.
public partial class AddGameVM : ViewModelBase
{
}
Step 1.3. Binding the ViewModel to AddGame.xaml.cs.
public AddGame(AddGameVM addGameVM)
{
InitializeComponent();
BindingContext = addGameVM;
}
Step 1.4. Define the route in MauiProgram.
Step 2. Let's create a function to handle tapping on a list item.
Step 2.1. In IGDBResults, we'll define the function to pass the selected UIIGDBGame object to AddGame.
private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
if (e.Item is UIIGDBGame tappedItem)
Shell.Current.GoToAsync($"{nameof(AddGame)}", true, new Dictionary<string, object>
{
{ "Game", tappedItem }
});
}
Step 2.2. Now, our add game page is accessible.
Note. I debug as a Windows App for the sake of speed when running the system multiple times during development. You always have the option to compile for Android or, if you have a Mac/iPhone available, for iOS. Choose whatever is more comfortable for you to focus on.
I set the app window size to make development more comfortable on a Windows machine by defining it in the Windows/App.xaml.cs file.
Code
const int WindowWidth = 600;
const int WindowHeight = 800;
/// <summary>
/// Initializes the singleton application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
{
#if WINDOWS
IWindow mauiWindow = handler.VirtualView;
Microsoft.UI.Xaml.Window nativeWindow = handler.PlatformView;
nativeWindow.Activate();
IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(nativeWindow);
WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
appWindow.Resize(new SizeInt32(WindowWidth, WindowHeight));
#endif
});
}
Step 3. Let's read the UIIGDBGame object passed to AddGameVM.
Step 3.1. To do this, we'll make AddGameVM inherit from IQueryAttributable and use the ApplyQueryAttributes function.
public partial class AddGameVM : ViewModelBase, IQueryAttributable
{
private UIIGDBGame Game { get; set; }
public async void ApplyQueryAttributes(IDictionary<string, object> query)
{
if (query is not null)
{
if (query.TryGetValue("Game", out object game))
{
if (game is not null and UIIGDBGame uiGame)
{
Game = uiGame;
}
}
}
}
}
Step 3.2. We'll create the variables to bind with the front end and assign their values.
private UIIGDBGame Game { get; set; }
public string Id = "", name = "", releaseDate = "", coverUrl = "", platforms = "";
public string Name
{
get => name;
set => SetProperty(ref name, value);
}
public string ReleaseDate
{
get => releaseDate;
set => SetProperty(ref releaseDate, value);
}
public string CoverUrl
{
get => coverUrl;
set => SetProperty(ref coverUrl, value);
}
public string Platforms
{
get => platforms;
set => SetProperty(ref platforms, value);
}
public async void ApplyQueryAttributes(IDictionary<string, object> query)
{
if (query is not null)
{
if (query.TryGetValue("Game", out object? game))
{
if (game is not null and UIIGDBGame uiGame)
{
Game = uiGame;
Id = Game.Id;
Name = Game.Name;
ReleaseDate = Game.ReleaseDate;
CoverUrl = Game.CoverUrl;
Platforms = Game.Platforms;
}
}
}
}
Step 4. Let's work on AddGame.xaml.
Step 4.1. As usual, we add the DataType and define the base style.
xmlns:vm="clr-namespace:GamesCatalog.ViewModels"
Title=""
x:DataType="vm:AddGameVM"
Style="{StaticResource ContentPage}"
Step 4.2. We'll add a base color for secondary labels in the UI in Colors.xaml.
<Color x:Key="SecondaryLabelColor">#98BDD3</Color>
Join the conversation! Your thoughts help the community grow.