はじめに
WinUI3 と MVVM toolkit を使い始めて1ヶ月ほど経ちました。（まだまだ慣れない）
この記事では、WinUI3とMVVM toolkitを組み合わせて デスクトップアプリ を開発する際、どのようにして 一定の周期で実行するタスク を実装したかを説明します。
ちなみに、ボタンを押すとラベルのテキストが変わるアプリのMVVM実装の説明は複数みかけました。でもこれは、View-ViewModelで完結してしまうんですね。
一定の周期で実行するタスクを実装するとなると Model層にも手を入れる必要がある のですが、このサンプルをなかなか見つけることができず、苦労しました。
同じように困っている誰かの一助になれば幸いです。
この記事の主な対象者
- MVVM、MVVM toolkitに興味がある人
- WinUI3に興味がある人
- WPF,UWPを扱っている人。（MVVM toolkitを使うと同じ手順で実装できるはず）
この記事の目標
- MVVM toolkit＋WinUI3に定期実行するタスクを作ることができるようになる。
- WinUI3やらMVVMやら敬遠してたけど、やればできるんじゃね？と思い始める。
この記事に含めないこと
- WinUI3の説明
- MVVMの説明
- MVVM toolkitの説明
環境
- Microsoft Visual Studio Community 2022 (64 ビット) Version 17.2.6
プロジェクトを作成
まずはTemplate Studio for WinUI (C#)をインストールをします。
インストール完了後、「新しいプロジェクトの作成」からTemplate Studio for WinUI (C#)を選択し、次へ>>作成を選択します。
テンプレート作成のためのナビゲーション画面が表示されます。
アプリの種類やページの数を設定できるようになっていることが確認できます。
今回は何も考えず《作成》ボタンをクリックしてプロジェクト作成を完了させましょう。
起動確認
まずは動作することを確認しましょう。
デバッグ＞デバッグの開始を選択します。
次のように表示されればOKです。
一定の周期で実行するタスクを作る
ファイルを作成
Template Studioが生成するプログラムに倣って、2つのファイル、IIntervalServive.csとIntervalServive.csをそれぞれ次のように作成します。
IIntervalServive.cs
using System;
namespace YourAppName.Contracts.Services;
public interface IIntervalService
{
}
IntervalServive.cs
using YourAppName.Contracts.Services;
namespace YourAppName.Services;
public class IntervalService : IIntervalService
{
// コンストラクタ
public IntervalService()
{
}
}
一定周期で実行する関数を実装
System.Timers.Timerクラスを用い、一定周期で実行する関数を実装します。
IntervalServive.csにTimerクラスのフィールドと、Run(),Stop(),Clock()メソッドを追加し、コンストラクタからRun()を実行します。
IntervalServive.cs
using System;
using System.Diagnostics;
using System.Timers;
using App11.Contracts.Services;
namespace App11.Services;
public class IntervalService : IIntervalService
{
Timer _timer;
// コンストラクタ
public IntervalService()
{
Run();
}
public void Run()
{
Debug.WriteLine("タイマ開始");
_timer = new Timer();
_timer.Elapsed += new ElapsedEventHandler(Clock);
_timer.Interval = 1000; // コンストラクタでも指定可
_timer.AutoReset = true; // デフォルト
_timer.Enabled = true; // timer.Start()と同じ
}
public void Stop()
{
_timer.Enabled = false; // timer.Stop()と同じ
_timer.Dispose();
Debug.WriteLine("タイマ停止");
}
private void Clock(object sender, ElapsedEventArgs e)
{
Debug.WriteLine(DateTime.Now.ToString("HH:mm:ss"));
}
}
アプリケーションにサービスを追加
作成したサービスをアプリケーションにシングルトンパターンで追加します。
App.xamlのコードビハインド（App.xaml.cs）を開きます。
NavigationServiceを追加している行の下に、IntervalServiceを追加します。
// Services
services.AddTransient<INavigationViewService, NavigationViewService>();
services.AddSingleton<IActivationService, ActivationService>();
services.AddSingleton<IPageService, PageService>();
services.AddSingleton<INavigationService, NavigationService>();
services.AddSingleton<IIntervalService, IntervalService>(); // この行を追加
// Core Services
services.AddSingleton<IFileService, FileService>();
サービスを実行
シングルトンパターンなので、追加しただけで動作してくれるのでは？と思ってしまいますが、そうなっていないようです。
サービスを実行してあげましょう。
具体的には、ViewModelにてサービスを参照するとコンストラクタが実行されるようです。（コンストラクタが実行されるのは初回のみ）
MainviewModel.csを開き、次のように実装します。
MainviewModel.cs
YourAppName.Contracts.Services;
using CommunityToolkit.Mvvm.ComponentModel;
namespace YourAppName.ViewModels;
public class MainViewModel : ObservableRecipient
{
private readonly IIntervalService _intervalService;
public MainViewModel(IIntervalService intervalService)
{
_intervalService = intervalService;
}
}
アプリケーションを起動
Clock()メソッドが一定の周期（1秒）ごとに実行されている様子が確認できます。
最後に
いかがだったでしょうか。
なんとか（？）MVVMを崩さずに一定周期で実行するタスクを実装できたかと思います。
ただ、MVVM Toolkitの仕組みを理解できておらず、なぜこの実装で動作するのか、まだ理解できておりません。
より適切な実装方法があるのかもしれません。
熟練者の方。ぜひアドバイスやフィードバックをお願いします。(ｏ_ _)ｏ
参考
- タイマにより一定時間間隔で処理を行うには？（サーバベースタイマ編） タイマの実装方法を参考にさせていただきました。