.NET Core3を使ってVisualStudioなしで WPFアプリを作ってみる

# きっかけは
[Announcing .NET Core 3.0](https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0/)で以下のような正式リリースの発表がありました

```
.NET Core 3.0のリリースを発表できることを嬉しく思います。Windows FormsとWPFの追加、新しいJSON APIの追加、ARM64のサポート、
全般的なパフォーマンスの改善など、多くの改善が含まれています。C＃8もこのリリースの一部であり、null可能、非同期ストリーム、
その他のパタ​​ーンが含まれています。F＃4.7が含まれており、構文を緩和し、.NET Standard 2.0をターゲットにしています。
```

しばらく.NETの世界から離れていたのですがオープンソースでWPFアプリケーションが作成できると聞いてVisualStudioなしの開発がどこまで可能か試してみました。

__注意__
WPFやWindows FormはMacOSやLinux上では動作しません。以下の記事はWindows上で実行する前提の記事になります。
ただし、コンソールアプリや ASP.Net CoreはLinux,MacOSでも実行可能です。実行するための詳細な前提条件は下記のMicrosoftのガイドを参照してください。

* [macOS における .NET Core の前提条件](https://docs.microsoft.com/ja-jp/dotnet/core/macos-prerequisites?tabs=netcore30)
* [Linux における .NET Core の前提条件](https://docs.microsoft.com/ja-jp/dotnet/core/linux-prerequisites?tabs=netcore30)

# まずはインストール

上記のブログにリンクのあるダウンロードページ [Download .NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0) を開いて、SDK 3.0.100 (2019/9/25現在)からご自身の環境に合ったものを選んでダウンロードします。
選べる実行環境には
- Windows
- Mac OS
- Linux
- Other
とあります。
![dotnet234157.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/7b657fa7-c301-e530-e4a7-695313b98472.jpeg)

また、Microsoft公式のDockerイメージも[Docker Hub](https://hub.docker.com/_/microsoft-dotnet-core)上に用意されています。
![dotnet234424.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/4f418178-b291-668f-4af4-df5ebe192846.jpeg)


今回は基本的なインストール方法としてWindows 64Bit版をダウンロードして使用することとします。

ダウンロードしたファイル `dotnet-sdk-3.0.100-win-x64.exe` を実行するとインストーラーが起動するのでインストールを実行します。
![dotnet234806.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/cdcd82cd-00ef-9528-ed02-08435fe154cd.jpeg)

インストールが終了すると、以下の表示になりインストール終了です。

![dotnet235000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/3afade2e-8918-af94-6193-03f0aed37e22.jpeg)

インストールされるものはSDKの他に.Net Core, ASP.NET Core,.NET Core Windows Desktopのランタイムが一緒にインストールされるようです。

* .NET Core SDK 3.0.100
* .NET Core Runtime 3.0.0
* ASP.NET Core Runtime 3.0.0
* .NET Core Windows Desktop Runtime 3.0.0

インストール完了したら、コマンドプロンプトを開いて`dotnet --info`を実行します

```
>dotnet --info
.NET Core SDK (global.json を反映):
 Version:   3.0.100
 Commit:    04339c3a26

ランタイム環境:
 OS Name:     Windows
 OS Version:  10.0.18362
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100\

Host (useful for support):
  Version: 3.0.0
  Commit:  7d57652f33

.NET Core SDKs installed:
  3.0.100 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download
```

# Visual Studio CodeにC#開発環境を作る

VisualStudio無しとはいってもソースコード書く環境は欲しいのでVisual Studio Codeに開発環境を整えます。
Visual Studio Codeのインストールは済んでいるものとして進めます。

拡張機能のマーケットプレースを開いて `.NET Core`で検索してみると多くの拡張機能が出てきます。

![vscode001707.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/4d73acb5-faf4-babc-afeb-2ab05da5ae2c.jpeg)

この中でダウンロード数も多く、機能も多そうな `.NET Core Extension Pack` をインストールしてみます。Extension Packは関係するいろいろな拡張機能の詰め合わせになっています。

![vscode001739.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/5bc1d2db-c238-19f9-96cb-65819b306b4a.jpeg)
https://marketplace.visualstudio.com/items?itemName=doggy8088.netcore-extension-pack

インストールされる拡張機能

* C#
* C# Snippets
* C# Extensions
* C# FixFormat
* Super Sharp (C# extensions)
* C# XML Documentation Comments
* Paste JSON as Code
* TODO Highlight
* .NET Core Test Explorer
* NuGet & Build Tools
* NuGet Package Manager
* MSBuild project tools
* .NET Core Tools
* Path Intellisense
* Version Lens
* Essential ASP.NET Core Snippets
* ASP.NET Helper
* gitignore

いっぱい拡張機能入りますが、最低限必要なものはC#だけなのでごちゃごちゃ入れたくない人は C#だけ入れれば大丈夫です。

# プロジェクトを作る

いよいよWPFアプリを作っていきましょう。
まずは最初にインストールした .NET Core3で何ができるか`dotnet -h`を実行して確認してみます。

```
>dotnet -h
.NET Core SDK (3.0.100)
使用法: dotnet [runtime-options] [path-to-application] [arguments]

.NET Core アプリケーションを実行します。

runtime-options:
  --additionalprobingpath <path>   調査ポリシーと調査対象アセンブリを含むパス。
  --additional-deps <path>         追加の deps.json ファイルへのパス。
  --fx-version <version>           アプリケーションを実行するために使用するインストール済み Shared Framework のバージョ ン。
  --roll-forward <setting>         フレームワーク バージョン (LatestPatch、Minor、LatestMinor、Major、LatestMajor、Disable) にロールフォワードします。

path-to-application:
  実行するアプリケーション .dll ファイルへのパス。

使用法: dotnet [sdk-options] [command] [command-options] [arguments]

.NET Core SDK コマンドを実行します。

sdk-options:
  -d|--diagnostics  診断出力を有効にします。
  -h|--help         コマンド ラインのヘルプを表示します。
  --info            .NET Core 情報を表示します。
  --list-runtimes   インストール済みランタイムを表示します。
  --list-sdks       インストール済み SDK を表示します。
  --version         使用中の .NET Core SDK バージョンを表示します。

SDK コマンド:
  add               .NET プロジェクトにパッケージまたは参照を追加します。
  build             .NET プロジェクトをビルドします。
  build-server      ビルドによって開始されたサーバーとやり取りします。
  clean             .NET プロジェクトのビルド出力をクリーンします。
  help              コマンド ラインのヘルプを表示します。
  list              .NET プロジェクトのプロジェクト参照を一覧表示します。
  msbuild           Microsoft Build Engine (MSBuild) コマンドを実行します。
  new               新しい .NET プロジェクトまたはファイルを作成します。
  nuget             追加の NuGet コマンドを提供します。
  pack              NuGet パッケージを作成します。
  publish           .NET プロジェクトを配置のために発行します。
  remove            .NET プロジェクトからパッケージまたは参照を削除します。
  restore           .NET プロジェクトに指定されている依存関係を復元します。
  run               .NET プロジェクトの出力をビルドして実行します。
  sln               Visual Studio ソリューション ファイルを変更します。
  store             指定されたアセンブリをランタイム パッケージ ストアに格納します。
  test              .NET プロジェクトに指定されているテスト ランナーを使用して、単体テストを実行します。
  tool              .NET のエクスペリエンスを向上するツールをインストールまたは管理します。
  vstest            Microsoft Test Engine (VSTest) コマンドを実行します。

バンドルされたツールからの追加コマンド:
  dev-certs         開発証明書を作成し、管理します。
  fsi               F# Interactive を開始するか、F# スクリプトを実行します。
  sql-cache         SQL Server キャッシュ コマンドライン ツール。
  user-secrets      開発ユーザーのシークレットを管理します。
  watch             ファイルが変更されたときにコマンドを実行するファイル ウォッチャーを起動します。

コマンドに関する詳細情報については、'dotnet [command] --help' を実行します。
```

.NET Core CLIではプロジェクトを作成するときにあらかじめ用意されているテンプレートを基に作成することができます。
この辺のエコシステムはRailsから始まりYeomanなどのコマンドで行う今のWeb開発のエコシステムの流れをくむものといえるでしょう。
`dotnet new`コマンドを調べてみると以下のように多くのテンプレートがすでに用意されています。

```
>dotnet new --help
使用法: new [options]

オプション:
  -h, --help          Displays help for this command.
  -l, --list          Lists templates containing the specified name. If no name is specified, lists all templates.
  -n, --name          The name for the output being created. If no name is specified, the name of the current directory is used.
  -o, --output        Location to place the generated output.
  -i, --install       Installs a source or a template pack.
  -u, --uninstall     Uninstalls a source or a template pack.
  --nuget-source      Specifies a NuGet source to use during install.
  --type              Filters templates based on available types. Predefined values are "project", "item" or "other".
  --dry-run           Displays a summary of what would happen if the given command line were run if it would result in a template creation.
  --force             Forces content to be generated even if it would change existing files.
  -lang, --language   Filters templates based on language and specifies the language of the template to create.
  --update-check      Check the currently installed template packs for updates.
  --update-apply      Check the currently installed template packs for update, and install the updates.


Templates                                         Short Name               Language          Tags                       
----------------------------------------------------------------------------------------------------------------------------------
Console Application                               console                  [C#], F#, VB      Common/Console             
Class library                                     classlib                 [C#], F#, VB      Common/Library             
WPF Application                                   wpf                      [C#]              Common/WPF
...... 以下続きます
```

今回はwpfプロジェクトを作成するので `dotnet new wpf [任意のプロジェクト名]` を任意のフォルダで実行します。

```
>dotnet new wpf -o hellowpf
The template "WPF Application" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on hellowpf\hellowpf.csproj...
  D:\workspace\hellowpf\hellowpf.csproj の復元が 172.24 ms で完了しました。

Restore succeeded.
```
上記のようにプロジェクトフォルダが作成されます。
作成されたフォルダに行って `dotnet run`を実行してみます。
すると内側が真っ白なウィンドが立ち上がります。
![wpf010037.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/d8faedd5-ac12-6f77-661d-c27341779062.jpeg)

たったこれだけでWPFのアプリが作成できちゃいます。

テンプレートで作成されたファイルを確認すると今まで見ていたような名前のファイルができていることが分かります。

![wpf010452.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/0b710271-1f1c-77b2-b2ae-612ddc62827c.jpeg)

あとはこのXAMLファイルの見た目を整えるのですが、XAMLデザイナーを使用する場合はVisual Studio 2019 [ダウンロードリンク](https://visualstudio.microsoft.com/ja/downloads/)を使用する必要があります。個人で使用する場合はCommunity版などを使用することで恩恵受けることができますね。

```xml

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

</Window>
```


# XAML Studio

ただ今回は、VisualStudioなしでVSCodeで開発するのが目的なのでこの方法は使えません、
いろいろ探してこれは使えそうかなというものがなんとMicrosoftから見つかったので紹介します。

![xamlstudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/629b37e2-e93a-5214-b9c4-1ddbac35bacc.png)

インストールは Microsoft Store から行います。 [XAML Studio](https://www.microsoft.com/ja-jp/p/xaml-studio/9ntls214tkmq?activetab=pivot:overviewtab)

起動画面はこんな感じ
![xamlstudio2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/fa22a731-1bf7-13a9-e321-405a1946b6c9.png)

さっそく、先ほど作成された MainWindow.xamlを読み込んでみましたがコンパイルエラーになりました。
![xamlstudio3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/35f90a1b-70cb-cc67-2d18-1c7e0fdf552f.png)

しかし、XAMLStudioで新規作成したものは、以下のようにプレビューも表示できています。
![xamlstudio4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/2ed1123b-058f-f781-a92c-ba1589fc2990.png)
おそらくXAMLStudioではWindowタグは認識できなさそうなので、Pageタグと置き換えることでプレビューができそうです。

左側のアイコンの一番下をクリックするとTOOLBOXとしてXAMLのタグ一覧が出てきてタグをクックすると右側の編集画面に追加されます。タグの横の？アイコンをクリックするとそのタグを説明したページ[https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.grid)などがブラウザで表示されるので各タグの細かいパラメータなどはそちらを参考にして記述ができそうですね。

サンプルからタグを張り付けてプレビューした結果は以下の通りです。
![xamlstudio5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/ef3de368-085a-f441-20d2-5775399dfb9e.png)

デザイン確認したらVSCode側に張り付けてみます。
![コメント 2019-10-12 135950.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/fde93633-2763-57c5-074a-5f6362badd58.png)

これをコンパイル実行した結果が以下の画像になります。
![コメント 2019-10-12 135841.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24418/2de12a34-fe49-5359-1c2d-b0398406b2b7.png)

若干の手間はありますが、これでWPFアプリを作れそうですね。