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も適宜環境に合わせて変更します。

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を指定します。

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

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

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に合わせておきます。

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を通している場合はそのままでいいと思います。

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アプリを作れるはず！