🍥

WPF MVVMサンプル（処理中表示）

2021/07/03 に公開

.NET

WPFでMVVMを使った簡単なサンプルを作ります。
ボタンを押すと数秒、ぐるぐる処理中表示になってから完了表示になります。
MVVMライブラリにはWCT MVVM Toolkit(Microsoft.Toolkit.Mvvm)を使用します。

Windows 10 Version 21H1

.NET Framework 4.7.2

Visual Studio 2019 Version 16.10.3

Microsoft.Toolkit.Mvvm Version 7.0.2

ModernWpfUI Version 0.9.4

CalcBinding Version 2.5.2

広く普及している.NET Framework 4.7.2で作ります。

.NET 5.0で作る場合はこちら↓の3)～4)を、.NET 6.0で作る場合は12-3)～12-4-a)を参考にプロジェクトを作成してください。

<a href="https://zenn.dev/apterygiformes/articles/79a7c9e7e15106" style="" target="_blank">https://zenn.dev/apterygiformes/articles/79a7c9e7e15106</a> 新規プロジェクトで<code>WPFアプリ(.NET Framework)</code>を選択します。 プロジェクト名に<code>ProgressSample1</code>と入力し、フレームワークに<code>.NET Framework 4.7.2</code>を選択します。 <a class="header-anchor-link" href="#4)%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"/> 4)プロジェクトの設定</h1> [ツール]-[オプション]-[NuGetパッケージマネージャー]-[既定のパッケージ管理方式]で<code>PackageReference</code>を指定します。 <a class="header-anchor-link" href="#5)nuget%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E8%BF%BD%E5%8A%A0" aria-hidden="true"/> 5)NuGetパッケージ追加</h1> 以下のパッケージをNuGetで追加します。 <li><code>Microsoft.Toolkit.Mvvm</code></li> <li><code>ModernWpfUI</code></li> <li><code>CalcBinding</code></li> <a class="header-anchor-link" href="#6)%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%BA%96%E5%82%99" aria-hidden="true"/> 6)ファイル準備</h1> <code>MainWindow.xaml</code>を削除し、 プロジェクト直下に<code>ViewModels</code>フォルダと<code>Views</code>フォルダを作成します。 <code>ViewModels</code>フォルダにクラス<code>MainWindowViewModel.cs</code>を追加します。 <code>Views</code>フォルダにウィンドウ（WPF）<code>MainWindow.xaml</code>を追加します。 <a class="header-anchor-link" href="#7)%E7%94%BB%E9%9D%A2%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%89%E6%9B%B4" aria-hidden="true"/> 7)画面デザイン変更</h1> <code>App.xaml</code>に <code>xmlns:ui="http://schemas.modernwpf.com/2019"</code>を追加し、 <code>StartupUri</code>を<code>Views/MainWindow.xaml</code>に修正し、 <code>Application.Resources</code>に<code>ResourceDictionary</code>を追加します。 <div class="code-block-filename-container">App.xaml</div> <pre class="language-xml"><code class="language-xml">&lt;Application x:Class="ProgressSample1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:ProgressSample1" xmlns:ui="http://schemas.modernwpf.com/2019" StartupUri="Views/MainWindow.xaml"&gt; &lt;Application.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.MergedDictionaries&gt; &lt;ui:ThemeResources /&gt; &lt;ui:XamlControlsResources /&gt; &lt;!-- Other merged dictionaries here --&gt; &lt;/ResourceDictionary.MergedDictionaries&gt; &lt;!-- Other app resources here --&gt; &lt;/ResourceDictionary&gt; &lt;/Application.Resources&gt; &lt;/Application&gt; </div><code>MainWindow.xaml</code>に <code>xmlns:ui="http://schemas.modernwpf.com/2019"</code>と <code>ui:WindowHelper.UseModernWindowStyle="True"</code>を追加します。 <div class="code-block-filename-container">MainWindow.xaml</div> <pre class="language-xml"><code class="language-xml">&lt;Window x:Class="ProgressSample1.Views.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ProgressSample1.Views" xmlns:ui="http://schemas.modernwpf.com/2019" ui:WindowHelper.UseModernWindowStyle="True" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"&gt; &lt;/Grid&gt; &lt;/Window&gt; ここまでで一度「リビルド」しておきましょう。 正常にビルドできたら次に進みます。 <a class="header-anchor-link" href="#8)viewmodel%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"/> 8)ViewModelの作成</h1> <code>MainWindowViewModel.cs</code>を以下のように編集します。 <code>ObservableObject</code>を継承するようにします。</li> <li>処理中か否かを表すフラグを定義します。</li> <li>現在の状態を表示するメッセージを定義します。</li> <li>時間のかかる処理を実行するコマンドを定義します。</li> <div class="code-block-filename-container">MainWindowViewModel.cs</div> <pre class="language-csharp"><code class="language-csharp">using Microsoft.Toolkit.Mvvm.ComponentModel; using Microsoft.Toolkit.Mvvm.Input; using System.Threading.Tasks; using System.Windows.Input; namespace ProgressSample1.ViewModels public class MainWindowViewModel : ObservableObject private bool _isBusy; /// &lt;summary&gt; /// 処理中の時true /// &lt;/summary&gt; public bool IsBusy get =&gt; _isBusy; set =&gt; SetProperty(ref _isBusy, value); private string _statusMessage; /// &lt;summary&gt; /// ステータスメッセージ /// &lt;/summary&gt; public string StatusMessage get =&gt; _statusMessage; set =&gt; SetProperty(ref _statusMessage, value); /// &lt;summary&gt; /// 実行コマンド /// &lt;/summary&gt; public ICommand ExecCommand { get; } /// &lt;summary&gt; /// コンストラクタ /// &lt;/summary&gt; public MainWindowViewModel() IsBusy = false; StatusMessage = ""; ExecCommand = new AsyncRelayCommand(ExecAsync); /// &lt;summary&gt; /// 時間のかかる処理 /// &lt;/summary&gt; /// &lt;returns&gt;&lt;/returns&gt; private async Task ExecAsync() IsBusy = true; StatusMessage = "処理中..."; // 時間のかかる処理 await Task.Delay(5000); IsBusy = false; StatusMessage = "処理完了!"; <a class="header-anchor-link" href="#9)view%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"/> 9)Viewの作成</h1> <code>MainWindow.Xaml</code>を開き、 <code>Window</code>に <code>xmlns:vm～</code>, <code>d:DataContext～</code>, <code>xmlns:cb～</code>, <code>IsEnabled～</code>を追加します。 <code>Width</code>を<code>250</code>, <code>Height</code>を<code>200</code>に編集します。 <li>Windowの<code>IsEnabled</code>プロパティにはVMの<code>IsBusy</code>を反転した値をバインディングします。 <li>これによって処理中の間は画面が無効状態になります。</li> <code>!</code>で反転するのはNuGetで追加したCalcBindingの機能です。</li> <code>Window.DataContext</code>にVMを設定します。</li> <li>StackPanelに処理実行用のボタンと、処理中表示に使うコントロールを追加します。</li> <div class="code-block-filename-container">MainWindow.xaml</div> <pre class="language-xml"><code class="language-xml">&lt;Window x:Class="ProgressSample1.Views.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:ProgressSample1.Views" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ui="http://schemas.modernwpf.com/2019" ui:WindowHelper.UseModernWindowStyle="True" xmlns:vm="clr-namespace:ProgressSample1.ViewModels" d:DataContext="{d:DesignInstance Type=vm:MainWindowViewModel, IsDesignTimeCreatable=True}" xmlns:cb="clr-namespace:CalcBinding;assembly=CalcBinding" IsEnabled="{cb:Binding !IsBusy, Mode=OneWay}" Title="MainWindow" Width="250" Height="200" mc:Ignorable="d"&gt; &lt;Window.DataContext&gt; &lt;vm:MainWindowViewModel /&gt; &lt;/Window.DataContext&gt; &lt;StackPanel&gt; &lt;Button Margin="5" Command="{Binding ExecCommand, Mode=OneTime}" Content="実行" Style="{StaticResource AccentButtonStyle}" /&gt; &lt;ui:ProgressRing Width="50" Height="50" IsActive="{Binding IsBusy, Mode=OneWay}" /&gt; &lt;TextBlock Margin="5" HorizontalAlignment="Center" Text="{Binding StatusMessage, Mode=OneWay}" /&gt; &lt;/StackPanel&gt; &lt;/Window&gt; </div>完成です。 <a class="header-anchor-link" href="#10)%E5%AE%9F%E8%A1%8C" aria-hidden="true"/> 10)実行</h1> 実行してみます。 実行ボタンを押します。 ボタンが無効状態になり、プログレスリングが表示され、処理中のメッセージが表示されました。