Visual Studio Codeで簡単なWPFアプリを作る

Visual Studio Code (VS Code) でWPFアプリを作ってみます。MSBuildを使います。

Windowsユーザーで、Visual Studioを使うまでもないけどC#でWPFアプリを作ってみたいという変人向けです。

# はじめに
OSはWindows 10 x64で、.NET Frameworkがインストールされている前提で進めます。大体の場合は `%windir%/Microsoft.NET/Framework64` とかにあると思います。

VS Codeで編集する上でとりあえず拡張機能“C#”をダウンロードします（他にもっといいものがあるかも）。

# ファイルの作成
ワークスペース（というかフォルダ）に次のファイルを作ります。

- project.proj
- src/
    - App.xaml
    - Main.xaml
    - Main.cs

project.projの名前はなんでもいいです。

## project.proj
AssemblyNameは任意の名前にしてください。以下の例だとExampleApp.exeになります。

RequiredTargetFrameworkも適宜環境に合わせて変更します。

```xml:project.proj
<Project DefaultTargets="Build"
    xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <Configuration Condition="'$(Configuration)' == ''">Debug</Configuration>
        <Platform Condition="'$(Platform)' == ''">AnyCPU</Platform>
        <RootNamespace>App</RootNamespace>
        <AssemblyName>ExampleApp</AssemblyName>
    </PropertyGroup>
    <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
        <DebugSymbols>true</DebugSymbols>
        <DebugType>full</DebugType>
        <Optimize>false</Optimize>
        <OutputPath>bin\Debug\</OutputPath>
        <DefineConstants>DEBUG;TRACE</DefineConstants>
        <ErrorReport>prompt</ErrorReport>
        <WarningLevel>4</WarningLevel>
    </PropertyGroup>
    <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|AnyCPU'">
        <DebugType>pdbonly</DebugType>
        <Optimize>true</Optimize>
        <OutputPath>bin\Release\</OutputPath>
        <OutputType>WinExe</OutputType>
        <DefineConstants>TRACE</DefineConstants>
        <ErrorReport>prompt</ErrorReport>
        <WarningLevel>4</WarningLevel>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System" />
        <Reference Include="System.Core">
          <RequiredTargetFramework>4.0</RequiredTargetFramework>
        </Reference>
        <Reference Include="System.Data" />
        <Reference Include="System.Xml" />
        <Reference Include="System.Xaml" />
        <Reference Include="WindowsBase" />
        <Reference Include="PresentationCore" />
        <Reference Include="PresentationFramework" />
        <ApplicationDefinition Include="src\App.xaml" />
        <Page Include="src\Main.xaml" />
        <Compile Include="src\Main.cs" />
        <!--
        <Resource Include="" />
        -->
    </ItemGroup>
    <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets" />
</Project> 
```

## App.xaml
クラス（`x:Class`）はMain.xamlやMain.csで使うので、わかりやすいものにしておきます。

`StartupUri`にはMainWindowとなるxamlを指定します。

```xml:App.xaml
<Application
    x:Class="ExampleApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="\src\Main.xaml">
    <Application.Resources>
    </Application.Resources>
</Application> 
```

## Main.xaml
```xml:Main.xaml
<Window x:Class="App.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Hello, WPF!"
    >
    <Grid>
        <!--
            ここにいろいろ書く
        -->
    </Grid>
</Window>
```

## Main.cs
```cs:Main.cs
using System;

namespace App {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            // ここに書く
        }
        // ここに書く
    }
}
```

# デバッグ
VSCodeではF5キーでデバッグですが、その前に構成 (`.vscode/launch.json`) とビルドタスク (`.vscode/tasks.json`) を作成します。

## 構成
1. メニュー[デバッグ(_D)] から [構成を開く] か [構成を追加] を選択
2. .NET Core を選択（ちゃんとした拡張機能を使えばFrameworkも選択可能？）
3. 次のように編集。`program`のパスはproject.projのAssemblyNameに合わせておきます。

```json-doc:launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (console)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/ExampleApp.exe",
            "args": [],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}
```

## ビルドタスク
1. メニュー[ターミナル(_T)] から [タスクの構成] か [既定のビルドタスクの構成] を選択
2. テンプレートからtasks.jsonを生成 を選択
3. MSBuild を選択
4. 次のように編集。`command`は`MSBuild.exe`のパスにします。先述の通り大体は`%windir%/Microsoft.NET/Framework64`以下にあると思います。PATHを通している場合はそのままでいいと思います。

```json-doc:tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "msbuild",
            "args": [
                "/property:GenerateFullPaths=true",
                "/t:build",
                "/tv:4.0"
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}
```

---
これで日曜プログラマにも簡単なWPFアプリを作れるはず！