27. [.NET MAUI] 시간제한 화면 만들기(Stopwatch사용)

이번 시간에는 Stopwatch를 이용하여 화면이 생성되고 나서부터 10초간 시간제한이 있는 화면을 만들어본다.

 

MVVM 패턴으로 ViewModel에 있는 스톱워치를 View에 바인딩( Binding)하여 특정시간에 알림과 화면이 사라지는 기능을 추가한다.

 

- 참고링크: https://learn.microsoft.com/ko-kr/dotnet/api/system.diagnostics.stopwatch?view=net-6.0 

Stopwatch 클래스 (System.Diagnostics)

---

 

1. Stopwatch의 시간을 볼 수 있도록 QnAPage.xaml(Voew)에 InTime이라는 개체를 Binding 해준다.

QnAPage.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"
             x:Class="MyMAUI.Views.QnAPage"
             Title="">
    <Grid RowDefinitions="*" ColumnDefinitions="*">
        <Frame Grid.Row="0" Grid.Column="0" ZIndex="1">
            <StackLayout>
                <Label Text="{Binding InTime}" HorizontalOptions="Center" VerticalOptions="Center" 
                       FontSize="Title" TextColor="Red"/>
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage>

 

---

 

2. MVVM패턴으로 작성하기위해서 코드비하인드인 QnAPage.xaml.cs의 BindingContext에 QnAVM(ViewModel)을 넣어준다.

QnAPage.xaml.cs

using MyMAUI.ViewModels;
namespace MyMAUI.Views;

public partial class QnAPage : ContentPage
{
	public QnAPage()
	{
		InitializeComponent();
		this.BindingContext = new QnAVM();
	}
}

 

---

 

3. Stopwatch의 시간을 볼 수 있도록 QnAPage.xaml(View)의 Label Text에 바인딩해주었던 InTime를 생성해준다.

 

4. INotif를 통해  시간이 흐름에 따라 Stopwatch의 값이 변한다는 것을 실시간으로 받고,

10초가 지나면 알림과 BackButton 이벤트를 발생 시킨다.

 

5. QnAVM() 생성자에 stopwatch를 Start() 메소드로 시작시킨다.

 

QnAVM.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using System.Collections.ObjectModel;
using MyMAUI.Models;
using MyMAUI.Services;
using static MyMAUI.Models.QuizEntity;
using Microsoft.Maui.Media;
using System.Diagnostics;

namespace MyMAUI.ViewModels
{
    class QnAVM : Notify
    {

        private Stopwatch stopwatch = new Stopwatch();
        private string _InTime { get; set; }
        public string InTime
        {
            get => _InTime;
            set
            {
                if(_InTime != value)
                {
                    _InTime = value;
                    OnPropertyChanged("InTime");
                    if(InTime == "0 분  10 초")
                    {
                        Shell.Current.SendBackButtonPressed();
                        Shell.Current.DisplayAlert("실패", "제한시간 내에 풀지 못했습니다.", "확인");

                    }
                }
            }
        }
        
        public ICommand cmd_submit { get; set; }
        
        
        public QnAVM()
        {
            stopwatch.Start();
            Device.StartTimer(TimeSpan.FromSeconds(1),() =>
            {
                InTime = stopwatch.Elapsed.Minutes.ToString() + " 분  " 
                + stopwatch.Elapsed.Seconds.ToString() +" 초";
                return true;
            });

        }

    }
}

---

INotify.cs

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

namespace MyMAUI.Services
{
    class Notify : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string PropertyName)
        {
            if(PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }
    }
}

 

빌드된 모습