WPF

前提条件 まずは以下の記事内容を踏まえてください。 カップ麺シリーズ：一から学べるWPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(1) 簡単な依存性注入とデータバインディング カップ麺シリーズ：一から学べる、WPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(2) 依存性注入を利用した簡単なサンプル カップ麺シリーズ：一から学べるWPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(3) メッセージングの簡単なサンプル CommunityToolkit.Mvvm V8について 今回、プロジェクト作成は行いません。覚え書き(1)に沿って、最低限コンパイルできる所まで進めてください。 CommunityToolkit.Mvvm V8 は、ざっくり言うと、繰り返しとなる記述を省略できる仕組みが取り入れられています。 [ObservableProperty] 例えば以下のコード private string _username = string.Empty; public string Username { get => _username; set => SetProperty(ref _username, value); } であれば [ObservableProperty] private string _Username = string.Empty; で済みます。 実際はこの時クラスが partial になり、裏側で同等のコードが生成あされています。コンパイルエラーが出ることもあるので、partial クラスになることは最低限覚えておきましょう。 そして、このようなコード private string _username = string.Empty; public string Username { get => _username; set { SetProperty(ref _username, value); NameCommand.NotifyCanExecuteChanged(); } } では、結局従来型の利用方法になるじゃないかと思ったでしょうが、ご安心を。このようにします。 ...

はじめに この記事は、そこそこ攻撃的な内容になります。不快に思ったなら、その時点でブラウザバックをしてください。 MVVM とは？ MVVMは言うまでもなく Model - View - ViewModel を利用した設計手法で、WPFのみならず .NET MAUI などでも利用されます。 そこで、MVVMを活用するにはどうすればいいのか、という点を中心に語りたいと思います。 まず、論外なのは ViewModel と Model を相互参照するパターンです。 View は ViewModel を知っているが、ViewModel は View を知らない。ViewModel は Model を知っているが、Model は ViewModel を知らない。これが大原則です。 何故かというと、Model とはそれ単体でアプリケーションロジックを全て網羅してるからです。特定の ViewModel に依存してはいけません。 例えば、WPF でアプリケーションを作っている時に、Model は「Modelさえ流用すればコンソールアプリだって作れる」そういう状況が理想です。 …いや、理想っていうか、MVVMってそういうモノなんですけどね？ 故に、Model が ViewModel を参照しているサイト…正直私も参照したことがありますが、あの人はおそらく MVVM の根本を分かっていないでしょう。 Model から ViewModel に何かを伝えるためには？ Model は ViewModel を知らないのが大原則、ではどうすればいいのか？一応の答えは「イベント通知」になります。 ただし、ある程度の規模になると面倒で複雑で、正直やっていられません。私もサンプルコードを提示できません。 ただし、PrismのEvent AggregatorやCommunityToolkit.MVVMのMessengerといったメッセージングを使えるなら、話はグッと楽になります。 Model から ViewModel にメッセージを飛ばせば良いのです。 メッセージングを利用することで疎結合が守られ、ユニットテストも容易になり、さらにViewModelに依存しない構成を作れます。 さて、ここで読者の皆さんは何か気づきませんか？思い当たる節がなければそれに超したことはありませんが… Model で ObservableCollection を使うのは基本的に誤りです！ObservableCollection は ViewModel から View に更新通知するコレクションですから。 ...

多言語対応をしよう 今やグローバル時代！世界を相手にしなければ勝てない！ そう、東京弁だけでなく大阪弁、名古屋弁、博多弁など…ごめんなさい調子に乗りました、単純に「日本語」「英語」「ロシア語」対応について語ります。 真面目な話、ソフトウェアで最低限英語対応すると、ターゲットが英語圏の人にまで届く可能性が高まります。 もちろん、ドキュメントも英語化が必要ですけど、今ならDeepLとか使えば便利にそれっぽく翻訳してくれますからね。 さらにChatGPTで添削とかさせれば、ニュアンス踏まえて指摘してくれますよ！ 今回は、WPFにおいてViewとViewModelだけを使った、極めてシンプルな多言語対応サンプルを示したいと思います。 プロジェクト作成 今回は「WPFアプリケーション」で MultiLanguageTest というプロジェクトを作りましょう。フレームワークは「.NET 9.0」を使用します。 そして開かれた MainWindow.xaml を以下のようにしましょう。 「Language」の中に「Japanese」「English」「Russian」として、ウィンドウ内全域にボタンを貼り付けているだけです。 <Window x:Class="MultiLanguageTest.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:MultiLanguageTest" mc:Ignorable="d" Title="MultiLanguageTest" Height="450" Width="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Menu> <MenuItem Header="Language"> <MenuItem Header="Japanese" Command="{Binding ToJapanese}"/> <MenuItem Header="English" Command="{Binding ToEnglish}"/> <MenuItem Header="Russian" Command="{Binding ToRussian}"/> </MenuItem> </Menu> <Button Grid.Row="1" Margin="5" Content="{Binding Greetings}" Command="{Binding ExecuteGreetings}"/> </Grid> </Window> シンプルなテストなので、UIに関しては最低限の実装になっています。画面とかは本題じゃないからいいよね？ 下準備に CommunityToolkit.Mvvm の導入 利便性のため、NuGetで CommunityToolkit.Mvvm を導入します。 メニューの「ツール」-「NuGetパッケージマネージャ」-「ソリューションのNuGetパッケージの管理」から、 「参照」タブをクリックして CommunityToolkit.Mvvm を検索してプロジェクトにインストールします。 ライセンスが不安かも知れませんが CommunityToolkit.Mvvm はMITライセンスという、オープンソースライセンスの中で最も緩いライセンスです。 CommunityToolkit.Mvvm 自体を配布しないのであれば、商用とかクローズドソースもOKなので心配は要らないでしょう。 ほら、あの Xamarin で使われていた(もう過去形なんだよな…) Mono と同じライセンスです。 っていうか、これは CommunityToolkit.Mvvm 覚え書きに書くべき内容だったか…？ 自分の目で確認したい方は.NET Community Toolkitをどうぞ。 ...

プロジェクトの準備 この記事では、メッセージングの利用自体は簡単であることを実感してもらうため、 コンソールアプリケーションでの、新規プロジェクトによるサンプルとなります。 Visual Studioから「新しいプロジェクト」で「C#」「Windows」経由で「コンソール アプリ」を選び、 プロジェクト名は「MessagingTest」にして、ソリューションを作成してください。今回はプロジェクト名を変更しても問題ありません。 フレームワークは「.NET 9.0」を使用します。 MVVM Toolkfit の利用準備 ソリューションに対し、Visual Studioのメニュー「ツール」「NuGetパッケージマネージャ」から「ソリューションのNuGetパッケージの管理」を選び、「参照」タブから CommunityToolkit.Mvvm をインストールします。 (1)基本のメッセージング まずは Program.cs を全削除し、以下の内容に置き換えます。 この際、コピペでは身につかないとか言いません。プロジェクトを作って動かせば、見えてくるものもあるでしょう。 using CommunityToolkit.Mvvm.Messaging; namespace MessageingTest { /// <summary> /// 送信クラス(Main含む) /// </summary> public static class Sender { public static void Main() { // 保持する必要はないが、ここでは受信クラスを作る必要がある var _ = new Receiver(); // 弱い参照でのメッセージング var message = new MyMessage("もりゃき", 12); WeakReferenceMessenger.Default.Send(message); // メッセージが出力されるまで待機 Console.ReadKey(); } } /// <summary> /// 受信クラス /// </summary> public class Receiver { public Receiver() { // 弱い参照での受信設定 WeakReferenceMessenger.Default.Register<MyMessage>(this, HandleRegistrationInfo); } // 受信メッセージの処理メソッド private void HandleRegistrationInfo(object recipient, MyMessage message) { Console.WriteLine($"{message.Name} の所持金は {message.Value} 円。"); } } /// <summary> /// メッセージクラス /// </summary> public class MyMessage { public string Name { get; set; } = string.Empty; public int Value { get; set; } public MyMessage() { } public MyMessage(string name, int value) { Name = name; Value = value; } } } こうすると、以下の出力になります。 ...

前提条件 まずは 「WPF における MVVM ToolKit覚え書き(1) 簡単な依存性注入とデータバインディング」 を完読して、プロジェクトを作成してください。 DIを使うための、新しいウィンドウ ViewName を作成する ソリューションエクスプローラーで「Views」フォルダで「追加」から「ウィンドウ(WPF)」を選び、名前に ViewName.xaml と設定してウィンドウを作成します。 そして以下のように置き換えます。 <Window x:Class="NameTest.Views.ViewName" 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:NameTest.Views" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="ViewName" Width="800" Height="450" mc:Ignorable="d"> <Grid VerticalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Label Grid.Row="0" Width="300" Height="30" Content="あなたの名前" /> <TextBox Grid.Row="1" Width="300" Height="30" Text="{Binding Username, UpdateSourceTrigger=PropertyChanged}" /> </Grid> </Window> 次に、ViewModels フォルダにおいて「追加」から「クラス」を選び、名前に ViewNameViewModel.cs と設定してクラスを追加します。 内容は無視して以下のように書き換えます。 using CommunityToolkit.Mvvm.ComponentModel; namespace NameTest.ViewModels { public interface IViewNameViewModel; public class ViewNameViewModel : ObservableObject, IViewNameViewModel { private string _name = string.Empty; public string Name { get => _name; set => SetProperty(ref _name, value); } } } そして、このViewModelをDIコンテナに登録します。App.xaml 直下にある App.xaml.cs を開いてください。 ...

プロジェクトの準備 Visual Studioから新しいプロジェクトで「C#」「Windows」経由で「WPFアプリケーション」を選び、プロジェクト名は「NameTest」にして、ソリューションを作成してください。これでソリューションも NameTest になります。説明通りに動かないことを避けるため、この記事に関しては可能な限りソリューション名を NameTest にしてください。 フレームワークは「.NET 9.0」を使用します。 この「WPF における CommunityToolkit.Mvvm 覚え書き」シリーズは、ある程度のMVVM知識を有していることを前提としております！ 簡単に言うとViewは見た目、ViewModelはViewにデータバインディグする関連の処理、Modelはアプリケーションのコアとなる処理群ですね。大規模プロジェクトなら、おそらくModelが一番大きくなります。 MVVM Toolkit の利用準備 ソリューションに対し、Visual Studioのメニュー「ツール」「NuGetパッケージマネージャ」から「ソリューションのNuGetパッケージの管理」を選び、「参照」タブから CommunityToolkit.Mvvm をインストールします。 Microsoft.Extensions.DependencyInjection も同様にインストールします。 もちろん理解している方なら、コマンドからInstall-Package CommunityToolkit.Mvvm等としても構いません。 Ioc - 制御の逆転って？ DI（依存性注入）については、簡単に言うと、オブジェクトの生成や依存関係の解決を外部(具体的には後に出てくる App.xaml.cs)に委譲することで、コードの柔軟性とテストの容易さを向上させるパターンです。この記事では、具体的な手順を通じてDIの使い方を学びます。 何より大切なのは、自分でソリューションを作り、手を動かすことです。コピペしても何も習得できず、応用が利きません。 App.xaml の書き換え まずは MVVM としてのスタンダードとして、プロジェクト直下に [追加] から [新しいフォルダ] を利用して Views 、ViewModels そして Models フォルダを作ります、(今回は Models 使わないので省いていいですけど、一般的な構成として覚えておいてください、すなわち大規模アプリケーション開発に直接アドバイスする記事ではありません)。 プロジェクト直下にある MainWindow.xaml を Views にドラッグドロップで移動します。移動時、名前空間も調整してください。 そして App.xaml を以下のように調整してください。 <Application x:Class="NameTest.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:NameTest" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application> から <Application x:Class="NameTest.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:NameTest" StartupUri="Views/MainWindow.xaml"> <Application.Resources /> </Application> と変更します。StartupUri の行に Views フォルダを追加するだけです。 ...