Edited at

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. 次のように編集。commandMSBuild.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アプリを作れるはず!