Time, score and questions do not appear on the screen with .NET MAUI MVVM

Question

MultiplicationPage.xaml

<?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:viewModels="clr-namespace:MauiApp2.ViewModels"
             xmlns:models="clr-namespace:MauiApp2.Models"
             x:Class="MauiApp2.Views.MultiplicationPage"
             x:DataType="viewModels:MultiplicationPageViewModel"
             Title="MultiplicationPage">
    <VerticalStackLayout VerticalOptions="Start">
        <StackLayout x:DataType="models:PlayerModal">
            <Label Text="Score: " FontSize="18" />
            <Label Text="{Binding Score}" FontSize="18" />

            <Label Text="Time Remaining: " FontSize="18" />
            <Label Text="{Binding TimeReaming}" FontSize="18" />

            <Label Text="Question: " FontSize="18" />
            <Label Text="{Binding Question}" FontSize="18" />

            <Entry Placeholder="Enter Your Answer" Text="{Binding Answer}" FontSize="18" />
        </StackLayout>
        <Button Text="Submit" Command="{Binding SubmitAnswerCommand }" FontSize="18" />
    </VerticalStackLayout>
</ContentPage>

MultiplicationPage.xaml.cs

using MauiApp2.ViewModels;

namespace MauiApp2.Views;

public partial class MultiplicationPage : ContentPage
{
    public MultiplicationPage(MultiplicationPageViewModel viewModel)
    {
        InitializeComponent();
        this.BindingContext = viewModel;
    }
}

MultiplicationPageViewModel.cs

using CommunityToolkit.Mvvm.Input;
using MauiApp2.Models;
using MauiApp2.Services;
using MauiApp2.Views;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MauiApp2.ViewModels
{
    public partial class MultiplicationPageViewModel : BaseViewModel
    {
        public ObservableCollection<PlayerModal> PlayerDetails { get; set; } = new ObservableCollection<PlayerModal>();
        PlayerModal playerModal = new PlayerModal();
        public ICommand SubmitAnswerCommand { get; }
        public MultiplicationPageViewModel(INavigationService navigationService) : base(navigationService)
        {
            playerModal.Score = 0;
            playerModal.TimeReaming = 60;
            SubmitAnswerCommand = new Command(SubmitAnswer);

            // Create a question as an example
            GenerateQuestion();
            // Start the timer
            StartTimer();
        }

        [RelayCommand]
        public void GenerateQuestion()
        {
            Random random = new Random();
            int number1 = random.Next(1, 11); // a random number between 1 and 10
            int number2 = random.Next(1, 11); // a random number between 1 and 10

            playerModal.Answer = (number1 * number2).ToString();
            playerModal.Question = $"{number1} x {number2}";
        }
        public async void StartTimer()
        {
            while (true)
            {
                await Task.Delay(1000); // wait 1 sec
                playerModal.TimeReaming--;

                if (playerModal.TimeReaming == 0)
                {
                    GameOver(); // Finish the game when time is up
                }
            }
        }

        public void SubmitAnswer()
        {
            if (int.TryParse(playerModal.Answer, out int userAnswer))
            {
                int correctAnswer = int.Parse(playerModal.Answer);
                if (userAnswer == correctAnswer)
                {
                    playerModal.Score += 10; // Add 10 points if correct answer is given
                    playerModal.TimeReaming += 5; // Add 5 seconds if correct answer is given
                }
                else
                {
                    playerModal.Score -= 10; // 10 points subtract if the wrong answer is given.
                    playerModal.TimeReaming -= 5; // 5 seconds subtract if wrong answer is given
                }

                GenerateQuestion(); // Generate new question
            }
        }

        public async void GameOver()
        {
           await NavigationService.NavigateToAsync(nameof(GameOverPage));
        }
    }
}

PlayerModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiApp2.Models
{
    public class PlayerModal
    {
        public int Score { get; set; }
        public int HighScore { get; set; }
        public int TimeReaming { get; set; }
        public string Answer { get; set; }
        public string Question { get; set; }
    }
}

Hello, I am developing a simple mathematical operations application with .NET MAUI MVVM. First I was coding the multiplication operations page, I go to the page, the texts and the button appear on the screen, but the question, duration and score do not appear on the screen. I'm a beginner, please help me.

Answer 1

first, playerModal must be a public property

public PlayerModal playerModal { get; set; } = new PlayerModal();

then, the correct binding expression would be

Text="{Binding playerModal.Score}"