使用 DotNet CLI 建立自定義的 WPF 專案模板

描述

當我們安裝完 DotNetCore 3.0 版本的 SDK 後，我們就可以建立基於 DotNetCore 的 WPF 專案模板，透過如下 CLI 可以方便快捷的建立並執行我們的專案：

Copy

dotnet new wpf -n WpfApp
cd WpfApp
dotnet restore
dotnet run

做過 WPF 開發的朋友都知道，這個專案模板肯定不符合我們的預期，我們希望我們的專案模板能夠加入 MVVM 的預設程式碼段，並且能夠和 DotNetCore 緊密合作，這樣豈不是更加方便了嗎？ 所以本文使用 MVVM 的一種實現 MvvmLightStd10 來教大家如何建立一個我們理想的專案模板。

操作

首先，我們基於 DotNetCore 3.0 建立一個原始的 WPF 專案模板，然後取用如下庫：

• Microsoft.Extensions.DependencyInjection
• MvvmLightLibsStd10

可透過執行 cli 命令進行安裝

Copy

dotnet add package Microsoft.Extensions.DependencyInjection
dotnet add package MvvmLightLibsStd10

註：因為我們使用了 DotNetCore，所以我們儘量讓我們安裝的第三方包是基於 .NET Standard 方式來實現。

然後，嘗試修改我們的這個專案，把它改成我們以後期望建立的專案模板的樣子。可以參考我的如下修改：

專案結構如下圖所示：

其中，src\Models\DataItem.cs 的示例程式碼如下所示：

Copy

using System;
using System.Collections.Generic;
using System.Text;

namespace WpfApp.Models
{
public class DataItem
{
public string Title { get; private set; }

public DataItem(string title)
{
Title = title;
}
}
}

src\Models\IDataService.cs 的示例程式碼如下所示：

Copy

using System;
using System.Collections.Generic;
using System.Text;

namespace WpfApp.Models
{
public interface IDataService
{
void GetData(Action callback);
}
}

src\Models\DataService.cs 的示例程式碼如下所示：

Copy

using System;
using System.Collections.Generic;
using System.Text;

namespace WpfApp.Models
{
public class DataService : IDataService
{
public void GetData(Action callback)
{
var item = new DataItem("Hello .NET Core!");
callback(item, null);
}
}
}

src\ViewModels\MainViewModel.cs 的示例程式碼如下所示：

Copy

using GalaSoft.MvvmLight;
using WpfApp.Models;

namespace WpfApp.ViewModels
{
public class MainViewModel : ViewModelBase
{
private readonly IDataService _dataService;

private string _welcomeTitle;
public string WelcomeTitle
{
get { return _welcomeTitle; }
set { Set(ref _welcomeTitle, value); }
}

public MainViewModel(IDataService dataService)
{
_dataService = dataService;
_dataService.GetData(
(item, error) =>
{
if (error != null)
{
return;
}

WelcomeTitle = item.Title;
});
}
}
}

src\Views\MainView.xaml 的示例程式碼如下所示：

Copy

<Window
x:Class="WpfApp.Views.MainView"
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:WpfApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<Label
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding WelcomeTitle}"
FontSize="40" />
Grid>

Window>

src\Views\MainView.xaml.cs 的示例程式碼如下所示：

Copy

using System.Windows;
using WpfApp.ViewModels;

namespace WpfApp.Views
{
public partial class MainView : Window
{
public MainView(MainViewModel vm)
{
InitializeComponent();
this.DataContext = vm;
}
}
}

src\App.xaml 的示例程式碼如下所示：

Copy

<Application
x:Class="WpfApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp" />

src\App.xaml.cs 的示例程式碼如下所示：

Copy

using Microsoft.Extensions.DependencyInjection;
using System.Windows;
using WpfApp.Models;
using WpfApp.ViewModels;
using WpfApp.Views;

namespace WpfApp
{
public partial class App : Application
{
public ServiceProvider ServiceProvider { get; private set; }

protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);

var serviceCollection = new ServiceCollection();
ConfigureServices(serviceCollection);

ServiceProvider = serviceCollection.BuildServiceProvider();

var mainWindow = ServiceProvider.GetRequiredService();
mainWindow.Show();
}

private void ConfigureServices(ServiceCollection services)
{
services.AddTransient();
services.AddTransient();

services.AddScoped();
}
}
}

修改完畢後嘗試編譯執行我們的專案，確保可以正常編譯執行。

之後，在我們的專案根目錄 src 下新建一個 .template.config 檔案夾，然後在裡面新建一個 template.json檔案，進行如下示例配置：

Copy

{
"$schema": "http://json.schemastore.org/template",
"author": "hippiezhou ",
"classifications": ["wpf", "mvvmlight", "Dependency Injection"],
"name": "wpf mvvmlight: use dotnetcore to create wpf with mvvmlight.",
"tags": {
"language": "C#",
"type": "project"
},
"identity": "wpf.mvvmlight",
"shortName": "wpf-mvvmlight",
"sourceName": "wpf.mvvmlight",
"preferNameDirectory": true
}

最後，開啟我們的終端，將目錄切換至當前專案目錄下（就是 .template.config 所在的目錄），然後執行下述安裝操作

Copy

dotnet new -i C:\Users\hippieZhou\Desktop\helloworld\wpfapp

此時，我們的專案模板會被打包到 DotNetCore 的 CLI 中，如下圖所示：

同時，在 C:\Users\hippieZhou.templateengine\dotnetcli\v3.0.100-preview3-010431 目錄下的以 templatecache.json 結尾的 JSON 檔案內容也會發生修改，會在 TemplateInfo 結點下新增一個如下的節點內容：

Copy

{
"ConfigMountPointId": "f3861181-7a43-4fc5-ab1c-12d95e734c0a",
"Author": "hippiezhou ",
"Classifications": [
"wpf",
"mvvmlight",
"Dependency Injection"
],
"DefaultName": null,
"Description": "",
"Identity": "wpf.mvvmlight",
"GeneratorId": "0c434df7-e2cb-4dee-b216-d7c58c8eb4b3",
"GroupIdentity": "",
"Precedence": 0,
"Name": "wpf mvvmlight: use dotnetcore to create wpf with mvvmlight.",
"ShortNameList": [
"wpf-mvvmlight"
],
"Tags": {
"language": {
"Description": null,
"ChoicesAndDescriptions": {
"C#": ""
},
"DefaultValue": "C#"
},
"type": {
"Description": null,
"ChoicesAndDescriptions": {
"project": ""
},
"DefaultValue": "project"
}
},
"CacheParameters": {
"name": {
"DataType": "string",
"DefaultValue": null,
"Description": "The default name symbol"
}
},
"ConfigPlace": "/.template.config/template.json",
"LocaleConfigMountPointId": "00000000-0000-0000-0000-000000000000",
"LocaleConfigPlace": null,
"HostConfigMountPointId": "00000000-0000-0000-0000-000000000000",
"HostConfigPlace": null,
"ThirdPartyNotices": null,
"BaselineInfo": {},
"HasScriptRunningPostActions": false,
"ConfigTimestampUtc": null
},

註：如果後期我們不慎將我們的模板刪除了，我們透過刪除掉這兩個檔案裡面對應的模板節點就可以在 CLI 中取消應用了。

我們可以使用下述操作進行測試一下：

Copy


dotnet new wpf-mvvmlight -n test

cd test

dotnet restore

dotnet run

如果不出意外的話，我們就可以看到這個專案的程式碼段和我們自定義的模板程式碼段是一樣的。

如果解除安裝我們的專案模板可以使用如下命令：

Copy

dotnet new -u C:\Users\hippieZhou\Desktop\helloworld\wpfapp

註：我們需要確保我們的自定義模板不能丟失，要不然到時候就解除安裝就麻煩了（至少目前看來是這樣的）。

關於如何將我們的自定義模板可以上傳到 NuGet 供別人下載使用，這裡就不做介紹了，具體操作可參考園裡介紹如何在 DotNetCore MVC 中打造自己的專案模板方法是一樣的。我在本文中的建立的程式碼模板也不會提交上去，還是等著 MVVMLight 的原作者 Laurent Bugnion 來操刀會好一些。

總結

本文介紹瞭如何透過 DotNet CLI 來建立自定義的 WPF 專案模板。在實際的使用過程中，CLI 的功能和支援的引數會更多，所以感興趣的朋友可以自行研究。

相關參考

• how-to-create-a-dot-net-new-project-template-in-dot-net-core
• 打造自己的.NET Core專案模板