【WPF】MVVM + MaterialDesignプロジェクトの作り方（テンプレート化まで）

WPF

記事の概要

MVVM：簡単にデータと画面表示を紐づけられるやつ
material design：簡単に「今っぽい見た目」にできるやつ

これらを含めたプロジェクトを作る手順を紹介します。

大雑把な流れ

プロジェクトを作る
↓
便利ツールをインストールする
↓
自動で作られるフォルダ・ファイルたちを、
管理しやすいフォルダ構成に移動する
↓
テンプレート化する

①WPFプロジェクトの作成

Visual Studioを起動して右上の「新しいプロジェクトの作成」をクリック

アイコンに「C#」のマークがある「WPF アプリケーション」を選択して「次へ」をクリック
※(.NET Framework)って書いてあるやつではないよ

プロジェクト名とソリューション(複数のプロジェクトを管理するためのデカい箱)名をつける
※今回は小規模のプロジェクトということにしてどっちも同じ名前に設定

.NET 10.0を選択。（長期的なサポート）って書いてあったらなんでもいいと思うよ。

②フォルダ作成（MVVM構成）

MVVM向けのフォルダ構成にするためにフォルダを4つ追加する

プロジェクト名を右クリック　＞　追加　＞　新しいフォルダー

プロジェクトの直下にModels,Services,ViewModels,Viewsの4つのフォルダを作る

③MainWindow.xamlをViewsフォルダに移動

MainWindow.xamlをドラッグしてViewsに移動

なんか言われるけどOKをクリック

MainWindow.xaml.csも一緒に移動してくれるよ
この構成になってたらOK

④MainWindow.xamlを参照してるファイルを修正

MainWindow.xamlを移動したから、パスが書かれてるファイルは修正する

App.xaml

「最初にこのxamlを画面表示してね」って記述があるとこ

<Application x:Class="TestProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TestProject"
             StartupUri="MainWindow.xaml">　←　ここを修正する
    <Application.Resources>
         
    </Application.Resources>
</Application>

↓修正後（対象の行だけ）

             StartupUri="Views/MainWindow.xaml">

MainWindow.xaml

<Window x:Class="TestProject.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:TestProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

↓修正後（対象の行だけ）

<Window x:Class="TestProject.Views.MainWindow"

MainWindow.xaml.cs

using System.Windows;　←　不要なusing削除済み

namespace TestProject　←　ここを修正
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

↓修正後（対象の行だけ）

namespace TestProject.Views

修正する箇所は以上。ここまでで一度F5キーでデバッグを開始して、空っぽのウインドウが表示されるか確認しておくといいよ。

↓こんな画面が出たらOK

⑤ NuGetパッケージをインストール

便利ツールを入れていく

ツール　＞　NuGet パッケージ マネージャー　＞　ソリューションの NuGet パッケージの管理

参照タブに移動して「CommunityToolkit.Mvvm」で検索

一番上に出てきたやつを選択したら右側にインストールの設定が出てくるから、
プロジェクトにチェックを入れてインストールボタンをクリック

なんか言ってくるから「適用」とか「同意する」とか押してインストール

同じ手順で「MaterialDesignThemes」もインストールする

インストール済みタブがこんな感じになってたらOK

⑥ App.xamlにMaterialDesign追加

「このプロジェクトではMaterialDesignのオシャレな部品を使えるようにします」って記述を追加する

<Application x:Class="TestProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TestProject"
             StartupUri="Views/MainWindow.xaml">
    <Application.Resources>
         ここにMaterialDesignを使えるようにする記述を追加
    </Application.Resources>
</Application>

↓記述追加後（<Application.Resources>内のみ）

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

※pack:// はWPFでライブラリ内のリソースを参照するためのURI

便利ツールの追加はここまでで完了！

⑦ ViewModel作成

画面とデータのやりとりをするのに必要なViewModelを作っておく

ViewModelsを右クリック　＞　追加　＞　新しい項目

C#のクラスファイルを追加

ファイル名はMainWindowViewModel.csとかでいいと思う

中身はこんな感じにしておくとどのプロジェクトでも作業をしやすいよ

using CommunityToolkit.Mvvm.ComponentModel;

namespace TestProject.ViewModels
{
    public partial class MainWindowViewModel:ObservableObject
    {

    }
}

⑧ ViewとViewModelを紐づける

MainWindow.xaml.csに以下のような記述を追加

using System.Windows;
using TestProject.ViewModels;　←　ViewModelsフォルダを参照する宣言

namespace TestProject.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new MainWindowViewModel(); ←　DataContextという名前で
                                                        ViewModelを参照する宣言
        }
    }
}

ex.テンプレート化

プロジェクト　＞　テンプレートのエクスポート

自分の環境だとResourcesなんてフォルダないじゃんってエラーが出た。

どうせ使わないしResourcesフォルダの参照を削除してテンプレート化したよ。

最終的なフォルダ構成はこうなった（Resourcesを削除した）

おわりに

今回のは一例で色んな記法があるみたい。

例えばViewとViewModelを紐づけるための記述は
App.xamlに定義していく方法もあるらしい。

プロジェクトの規模とか、導入してる拡張機能とかによってもどんどん記述を短くできるような気がする。

キリないね・・・

タイトルとURLをコピーしました