C#：WPFでのHelloWorld

以前の記事では、WindowsFormでのHelloWorld（https://akira2kun.hatenablog.com/entry/2020/03/01/184434）を試しました。
今回の記事では、WPFでのHelloWorldを試してみます。
　
WPFはWindowsFormの後発にあたるWindows向け画面アプリの形式であり、画面がXAMLというマークアップ言語で記述されていること（デザイナーとプログラマーの分業がしやすい）、MVVM（単一スレッドしか操作できない、リストで表示されている分のオブジェクトしか生成されない、といったUIの制約を意識せずにビジネスロジックを書くための手法）を実現しやすいこと、が特徴となっています。
　
以下では、Visual Studio Communityを使用したHelloWorldの手順を紹介します。
操作感はWindowsFormと似ているので、注意する箇所だけ詳細に書きます。
XAMLの項目とクラスの値をバインドさせる（クラスの値が変更された際にXAMLの画面上に反映する）点がミソです。
　
【手順】
１．Visual Studio Community を開く。
２．「ファイル > スタートページ」でスタートページを表示させ、スタートページ上の「新しいプロジェクトを作成」をクリック。
３．「WPF アプリ」を選択する。名前は任意で良い。これで「OK」を押下すると、「場所」で指定した場所にプロジェクト（作業フォルダ）が生成される。
４．ボタンやラベルを配置する。すると以下のようなXAMLが生成される。
・MainWindow.xaml
<Window x:Class="HelloWorld3.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:HelloWorld3"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="77" Margin="271,195,0,0" VerticalAlignment="Top" Width="239" Click="button_Click"/>
        <Label x:Name="label" Content="{Binding Text.Value}" HorizontalAlignment="Left" Height="33" Margin="319,88,0,0" VerticalAlignment="Top" Width="166"/>
    </Grid>
</Window>
　
５．下記のクラスを作成する。
・MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace HelloWorld3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// Viewに相当
    /// </summary>
    public partial class MainWindow : Window
    {
        MainViewModel viewModel = new MainViewModel();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            // DataContextにMainViewModelオブジェクトををバインドさせる
            // そうすることで、{Binding Text.Value}で値を反映できる
            // DataContextは参照渡しできないのでreturnで受け取る
            DataContext = viewModel.TextRead(DataContext);
        }
    }
}
　
・MainViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Reactive.Bindings; // 自分で落としてくる必要がある

namespace HelloWorld3
{
    /// <summary>
    /// ViewModelに相当
    /// ModelとViewの間に入ることで、ModelがUIの制約を受けるのを防ぐ
    /// 　制約の例…・単一スレッドしか操作できない
    /// 　　　　　　・リストで表示されている分のオブジェクトしか生成されない
    /// </summary>
    class MainViewModel
    {
        MainModel model = new MainModel();

        public ReactiveProperty<string> Text { get; private set; }

        public object TextRead(object dataContext)
        {
            this.Text = model.Text;
            dataContext = this;
            return dataContext;
        }
    }
}
　
・MainModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Reactive.Bindings; // 自分で落としてくる必要がある

namespace HelloWorld3
{
    /// <summary>
    /// Modelに相当
    /// ビジネスロジックを記述する。
    /// </summary>
    class MainModel
    {
        public ReactiveProperty<string> Text { get; private set; }
                = new ReactiveProperty<string>();

        public MainModel()
        {
            Text.Value = "Hello World!";
        }
    }
}
　
※補足
バインドさせる際には、「ReactiveProperty」を使用すると便利です。
自分で「NuGet パッケージの管理」から落とす必要があります。

　
【実行結果】
ボタン押下で「Hello World!」が表示されます。