【C# WPF】WPFを理解したいC#初心者の話【プロジェクト作成編】

C# WPFについて学んでいく過程を備忘録として残して置きたいと思います。

1. C#とWPFを使ってみる


前回、Visual Studioをインストールして環境構築のセットアップを進めました。

これでようやく、実際にC#とWPFを触りながらの学習に入ることができます。

早速ですが、Visual Studioを起動してどんなことができそうかを探ってみます。

2. とにもかくにもプロジェクト

Visual Studioを使ってアプリケーションを開発するために、まずは「プロジェクト」と呼ばれるものを作成していきます。

「プロジェクト」とは、プログラムを作成していく為のソースコードを記述したソースファイルを管理するための単位のようなものです。


例えば拡張子が「.cs」のファイルがC#で書かれたソースファイルということになるのですが、大規模なプログラムの作成の場合は、ソースファイルを分けてコーディングを行っていくことになります。

その複数のソースファイルを1つのプログラムのように管理するためのものが「プロジェクト」です。


更に言うと、複数のプロジェクトを管理するための「ソリューション」と呼ばれるものも存在します。

大規模な開発ともなると、複数のプログラムを作成することになるので、それを「ソリューション」と呼ばれるもので管理します。


少し話がそれましたが、C#とWPFを使ってみるためにプロジェクトを作成してみましょう。

Visual Studioを起動すると以下の画面が表示されます。そこから「新しいプロジェクトの作成」を選択しましょう。


「新しいプロジェクトの作成」を選択すると、以下のプロジェクトテンプレートの選択画面に移動します。

ここで様々なアプリケーションを開発するための便利なテンプレートを選択するのですが、沢山あってどれを選ぶか迷ってしまいますね。


今回はとりあえずドロップダウンリストの中から「C#」「Windows」「すべてのプロジェクトの種類」を選択します。

その中から「C#」の「WPFアプリケーション」を選択してみます。


「WPFアプリケーション」のプロジェクトテンプレートを選択して「次へ」ボタンを押下すると、今度はプロジェクトについての設定画面に移動します。

ここでは「プロジェクト名」「場所」「ソリューション名」を設定することができます。


「プロジェクト名」と「ソリューション名」はその名の通り、作成するプロジェクトとソリューションの名前を設定することができます。

作成するアプリケーションやプログラムに応じたわかりやすい名前を付けましょう。

今回は学習目的でどんな機能があるのかを試してみるだけのプロジェクトを作成するので、初期設定の「WpfApp1」を使います。


「場所」はプロジェクトやソリューションを保存・管理するファイルパスを設定する項目です。

自分が管理しやすいと思う場所にしておきましょう。


「ソリューションとプロジェクトを同じディレクトリに配置する」というチェックボックスもあります。

こちらにチェックを入れると、実質的にソリューションとプロジェクトが同じものの扱いになります。

より小規模な開発であればチェックを入れるのもアリですが、基本的にはソリューションとプロジェクトは分けておいたほうがよいと思うので、このままチェックを外して「次へ」のボタンを押下します。


次の画面は「WPFアプリケーション」についての設定画面です。


「.NET Framework」のバージョンを選択するためのドロップダウンリストがあります。

ここで選択できるバージョンは「.NET 6」と「.NET 7」の2種類です。「.NET 6」はサポートの期間が長くて対応しているOSのバージョンが広い、「.NET 7」はより新しいバージョンで機能が増えていてOSはWindows 10以降で対応、という違いがあるようです。

今回は「.NET 7」を選択し、「作成」のボタンを選択します。


これでようやくプロジェクトの作成が完了します。少し長くて大変でしたね。

3. プロジェクトの作成完了


先ほどまでの手順をすべて完了して「作成する」ボタンを押下し、プロジェクトの作成が完了するまでしばらく待つと、上の画面に移動すると思います。

この画面が、実際にソースコードを書きながらプログラムを作成していく画面です。


左側の「ソリューションエクスプローラー」と書かれたボックスに「プロジェクト」とそこで管理されるソースファイルが入っています。

今回はWPFアプリケーションを開発するために用意されたプロジェクトテンプレートを使用したので既にいくつかのソースファイルが作成されていますね。

4. Visual Studioの画面に慣れる


早速、コードを書いたりGUIの配置をしたりしてアプリケーションのかいはつのがくしゅうにはいっていきたいところですが、画面のあちこちに様々なモノが表示されていて、一体どこを触ればよいかがわかりません。

まずはいろいろ触ってみて、どんなことが出来そうかを探ってみようと思います。

4-1. ソリューションエクスプローラー

画面左側に表示されているボックスで、先ほど軽く触れましたね。

こちらは「ソリューションエクスプローラー」と呼ばれるもので、まさに「ソリューション」や「プロジェクト」、そこに配置された「ソースファイル」の管理をおこなう為の部分です。

開発が進んで様々なソースファイルを追加していくと、ここにどんどん追加されていき、ここで管理を行うことになります。

4-2. WPFデザイナー・コードエディター

画面中央に表示されている大きな部分がWPFデザイナーもしくはコードエディターと呼ばれる部分です。


編集しているファイルがXAMLファイルの場合はWPFデザイナーが表示されます。

WPFデザイナーの画面は上部分が「デザインビュー」と呼ばれる、実際にユーザーが見て触って操作を行うGUIの部分を編集する画面です。

ここにテキストボックスやラジオボタン、ドロップダウンリストのようなコントロールUIの配置を行ったりすることが可能です。

デザインビューの左側にはよく使うツールをまとめたアイコン群が縦に並んでおり、下側の「>>」のようなボタンを押すと、更に多くの種類のツールのコントロールを選択することが可能です。


一方、下の部分はXAMLビューと呼ばれるもので、配置されたコントロールに応じたXAMLのマークアップが追加されていきます。

ここを直接編集することも可能です。

C#ファイルを編集している場合はコードエディターが表示され、コーディングを行うことができます。

4-3. その他

他の部分も編集しているファイルに応じて様々変化します。

この辺りは実際に触りながら覚えていくほうが分かりやすいと感じましたので、学習を進めながら紹介していきます。

5. まとめ

今回はVisual StudioでWPFアプリケーションを開発するためのプロジェクトとソリューションを作成することができました。

ようやく実際の開発画面まで進むことができたので、次回からは早速アプリケーションの開発の学習を進めていきたいと思います。


まずは、どのプログラム言語の学習でも使われる「Hello World!!」を表示させるような簡単なアプリケーションを開発してみようと考えています。