WPFを中心としたMVVM論

はじめに この記事は、そこそこ攻撃的な内容になります。不快に思ったなら、その時点でブラウザバックをしてください。 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 に更新通知するコレクションですから。...

2024年11月23日 · もりゃき

一から解説、WPFでの多言語対応方法

多言語対応をしよう 今やグローバル時代!世界を相手にしなければ勝てない! そう、東京弁だけでなく大阪弁、名古屋弁、博多弁など…ごめんなさい調子に乗りました、単純に「日本語」「英語」「ロシア語」対応について語ります。 真面目な話、ソフトウェアで最低限英語対応すると、ターゲットが英語圏の人にまで届く可能性が高まります。 もちろん、ドキュメントも英語化が必要ですけど、今なら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 を検索してプロジェクトにインストールします。...

2024年11月12日 · もりゃき

WPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(3) メッセージングの簡単なサンプル

プロジェクトの準備 この記事では、メッセージングの利用自体は簡単であることを実感してもらうため、コンソールアプリケーションでの、新規プロジェクトによるサンプルとなります。 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....

2024年5月26日 · もりゃき

WPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(2) 依存性注入を利用した簡単なサンプル

前提条件 まずは 「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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:NameTest.Views" mc:Ignorable="d" Title="ViewName" Height="450" Width="800"> <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 Name,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....

2024年5月25日 · もりゃき

WPF における CommunityToolkit.Mvvm(MVVM ToolKit) 覚え書き(1) 簡単な依存性注入とデータバインディング

プロジェクトの準備 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"> <!...

2024年5月20日 · もりゃき