3753817_s

本記事ではVisual Studioを使ってWPFの開発環境を構築する方法を紹介していきます。



Visual Studioのダウンロード


最初にVisual Studioをインストールします。

すでにインストール済みの人は読み飛ばしてもらっても大丈夫です。

Visual Studioは以下のリンクからダウンロードできます。



コミュニティ版は学生、個人利用者、オープンソース貢献者は無償で使用できるみたいです。マイクロソフトは心が広いですね。

以下の画面の赤で囲まれている部分をクリックすることでダウンロードすることができます。

キャプチャ

ダウンロードが完了したらインストーラを起動してください。

インストーラを起動したら続行をクリックします。

キャプチャ

次に.NET デスクトップ環境にチェックを入れてインストールボタンをクリックしてください。

そうするとインストールが始まります。

キャプチャ

キャプチャ

インストールが完了すると一度PCの再起動を求められるので再起動してください。

キャプチャ

再起動がしたらデスクトップからメニューを開いてVの項目にあるVisual Studio2019を起動してください。

キャプチャ

起動するとマイクロソフトアカウントでのサインインが求められるのでサインインしてください。

アカウントがない場合は、アカウントを作成してください。

キャプチャ

サインインすると配色の設定が聞かれるので好みの色に設定してVisual Studioの開始をクリックします。

キャプチャ

以下の画面が起動したらVisual Studioが起動できたためインストールは完了です。

キャプチャ



WPFプロジェクトを作成する


Visual StudioがインストールできたろことでWPFのプロジェクトを作成していきます。

以下の画面から新しいプロジェクトの作成をクリックしてください。

キャプチャ

検索ボックスにWPFと入力して、以下の画像の赤枠で囲っているWPFアプリケーションを選択して次へをクリックしてください。

Visual Basic用などと間違えないように注意してください。

キャプチャ

プロジェクト名や場所は適当なものを入力して次へをクリックしてください。今回はデフォルトのままで進みます。

キャプチャ

ターゲットフレームワークもなんでもいいのですが今回は現時点で最新の5.0を使用します。

ターゲットフレームワークが選択できたら作成をクリックしてください。

キャプチャ

以下の画面が表示されたらWPFプロジェクトの作成は完了です。

キャプチャ





Hello Worldアプリを作成する


プロジェクトが作成できたら、ボタンを押したら画面にHello Worldと表示する単純なアプリを作成します。

ここではあくまでアプリを実行することを目的とするのでコードの意味などは説明しません。

MainWindow.xamlのコードを以下に示します。

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel>
            <Label x:Name="Label1" Margin="10" Height="40" Width="200" HorizontalContentAlignment="Center"/>
            <Button Content="ボタン" Height="40" Width="80" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.csのコードを以下に示します。

using System.Windows;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object senderRoutedEventArgs e)
        {
            Label1.Content = "Hello World!!";
        }
    }
}

このコードを張り付けて、実行ボタンを押すとアプリが起動します。

キャプチャ

キャプチャ

ボタンをクリックすると画面中央にHello Worldと表示されます。

キャプチャ



まとめ


Visual StudioをインストールしてWPFでHello Worldアプリを作成するまで1時間ほどでできました。

関係ないですがいつの間にかホットリロード機能が付いたんですね!