Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

_y_s
趣味でやってます。すべて独力で頑張ってます。主にJavaScript。最近はC#を勉強中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした