Windows GUIプログラミング入門1 メッセージボックス表示

# ■はじめに
Windows環境でC#を使って簡単なGUIアプリケーションを作っていきます。
理屈は最小限に、こうやればできる的な流れで行きたいと思っています。

# ■対象読者
WindowsのC# GUIアプリケーションを作ったことがない、
けれども何らかのプログラミング言語はそこそこ読み書きできる人。

# ■GUIデスクトップアプリ、主な選択肢

## ◇Windowsフォームアプリケーション
古い。
大規模開発や複数人開発、現代のPC環境には不向き。
![wbg1-01.png](https://qiita-image-store.s3.amazonaws.com/0/142879/4f4eb7f2-b2db-b09c-2904-a998e4291952.png)

* [WinForms関連記事](https://qiita.com/tags/winforms)

## ◇WPF(Windows Presentation Foundation)アプリケーション
Windowsフォームの次世代。
小さな使い捨てプログラムから大規模なものまで対応しやすい。
![wbg1-02.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d17905e6-046b-5898-34b9-b09a7347ceba.png)

* [WPF関連記事](https://qiita.com/tags/wpf)

## ◇UWP(Universal Windows Platform)アプリケーション
一番新しいやつ。Windows 10シリーズで動くアプリが作れる。
ただし、Windows 7や8.1では動かない。
セキュリティを強化した分、色々と面倒くさい。
ちょっとしたツールを作って一部の人に配布、というような用途には向かない。
USBメモリ等に入れて、借り物PCの設定を変えない・ゴミを残さない使い方（いわゆるポータブル版）も駄目。
デスクトップアプリのプラットフォームとしては諦めたのか、UWPの機能を切り出してWPF等から使えるようにする流れに。

* [UWP関連記事](https://qiita.com/tags/uwp)

## ◇どれにする？
対応OSの幅広さ・将来性・開発効率・自由度の高さのバランスからWPFを選択します。

※この連載では、**C#を使ったWindowsデスクトップアプリ開発の入門**を書いていきます。
WPFで開発しますが、タイトルの通り、WPF入門ではありません。また、Windowsフォームを卒業したい人もスムーズに取り組めるよう、開発手法や取り扱うトピックを調整しています。


# ■開発環境を整える
個人利用では無償の`Visual Studio Community 2015`を使います。
（連載の9回目からは`Visual Community 2017`を、19回目からは`Visual Studio Community 2019`を使用しています）
持っていない場合はこちらからダウンロードしましょう。

* [Visual Studio](https://visualstudio.microsoft.com/ja/)

Visual Studio 2015のサポートOSはWindows 7～です。
この記事ではWindows 10を使っています。

**※Visual Studio 2017～はワークロードで「.NET デスクトップ開発」をインストールしてください。**

# ■さっそく作る
Visual Studioを起動したら、新しいプロジェクトを作成します。
テンプレートの「Visual C#」 - 「Windows」 - 「WPFアプリケーション [^1] [^2] [^3]」を選択してください。

[^1]: Visual Studioのバージョンによっては`WPFアプリ(.NET Framework)`の他に、`WPF App(.NET Core)`または`WPF App(.NET)`が表示されます。.NET Core（.NET）版の方が新しいですが、この連載で環境の明記が無い場合は.NET Framework版で作成しているため、.NET Framework版を選択することをお勧めします。

[^2]: [こちらの記事](https://qiita.com/Kosen-amai/items/a8df0f4acc877a249297 ".NET Core 3.1とVisual Studioでデスクトップアプリ")で軽く.NET Core版のWPFを使ってみています。使用感は全く同じです。

[^3]: こちらも参考に：[.NET Frameworkと.NET Core、どちらを選ぶか](https://qiita.com/Kosen-amai/items/c5393aeeb092b26d0907)

![wbg1-03.png](https://qiita-image-store.s3.amazonaws.com/0/142879/9afd3694-5c37-530d-d6a2-05633eb8a1f9.png)
「名前」欄はプロジェクトの名前です。
1プロジェクトが1実行プログラム（やライブラリ）と考えてよいです。
ソリューションというのはプロジェクトをまとめる単位です。
規模が大きいものになると1つのソリューションの中に複数のプロジェクトが入っていたりします。

新規プロジェクト画面でOKを押すとこんな画面になります。
![wbg1-04.png](https://qiita-image-store.s3.amazonaws.com/0/142879/0e92a1b5-55cb-76c8-ca01-093c133e38a8.png)

左のツールボックスから`Button`を右の画面デザイナにドラッグ＆ドロップします。
（お使いの環境でツールボックスが無い場合、メニューの「表示」 - 「ツールボックス」で表示されます。）
そうすると画面デザイナ上にボタンが配置され、下のエディタ部分にButtonのタグが自動的に作成されます。
![wbg1-05.png](https://qiita-image-store.s3.amazonaws.com/0/142879/fb74fccb-5860-8fa7-297e-e3ded35abfea.png)
このXML形式のものは**XAML（ザムル）**という言語で書かれていて、画面定義の実体です。
画面デザイナ上の変更はXAMLに反映されますし、XAMLを直接編集しても画面デザイナに反映されます。
XAMLのタグを見てみると、`Window`の中に`Grid`、そして`Grid`の中に`Button`があることが階層構造で分かりやすく表現されています。
![bg01_xaml_tree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1ea5f6af-483a-0e69-fea3-e5898b374437.png)
画面デザイナを見なくても、XAMLだけで大体の画面イメージが分かります。[^3]
複数人で開発していると、画面のどこをどのように修正したか差分をとって確認するものですが、画面定義がXAMLで書かれていることで、確認がとてもやりやすくなります。

[^3]: そのため、画面はなるべくコードよりもXAMLで書くようにしましょう。

画面デザイナでボタンの角の`□`をマウスでドラッグしてボタンサイズを大きくしましょう。
![wbg1-06.png](https://qiita-image-store.s3.amazonaws.com/0/142879/7a331431-edc6-6054-a654-1e528d2aa551.png)

次はプロパティウィンドウを使用します。
プロパティウィンドウが見つからない場合、メニューの「表示」 - 「プロパティ ウィンドウ」で表示されます。
お使いの環境によってはソリューションエクスプローラーのウィンドウと一つになっているかもしれません。
![bg01_prop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d83e1694-5106-037f-33cc-d3c2d6b6c499.png)

ボタンを選択した状態で、プロパティウィンドウからボタンのテキストを変更します。
ボタンのテキストは`Content`プロパティが該当します。
![wbg1-07.png](https://qiita-image-store.s3.amazonaws.com/0/142879/4bf82cf2-9c70-d629-9263-ca927403da18.png)

`Content`に`押してください`と入力してEnterしたらXAMLと画面デザイナに反映されました。
![wbg1-08.png](https://qiita-image-store.s3.amazonaws.com/0/142879/f6d8db93-94f6-5d11-b4ed-fb5213988bba.png)
XAMLで `Content="Button"` の `Button` 部分を直接編集してもよいです。
慣れてくるとXAMLを直接編集した方が効率よく開発できます。

今度はボタンの文字の大きさを変えてみます。
プロパティの「テキスト」カテゴリでフォントサイズを変えます。
![wbg1-09.png](https://qiita-image-store.s3.amazonaws.com/0/142879/cf526296-4ca8-29c8-8745-a96f8de5684e.png)

大きくなりました。今度もきちんと反映されていますね。
![wbg1-10.png](https://qiita-image-store.s3.amazonaws.com/0/142879/1e871761-2f1c-c597-0c37-211e85c20857.png)

次はボタンを押したら何か処理をさせましょう。
画面デザイナでボタンをダブルクリックしてください。
![wbg1-11a.png](https://qiita-image-store.s3.amazonaws.com/0/142879/9a47719d-1d26-e010-79f4-a97dc4e0a81d.png)

エディタ画面に飛んでボタンクリック時の処理を書く場所（イベントハンドラ）が作成されました。
このC#のソースファイルは**コードビハインド（分離コード）**と言って、画面定義のXAMLと対になっています。
![wbg1-11b.png](https://qiita-image-store.s3.amazonaws.com/0/142879/02c0faff-817c-0e77-a948-7cdc50383539.png)

ソリューションエクスプローラーで`MainWindow.xaml`の横の三角をクリックすると、
![wbg1-13.png](https://qiita-image-store.s3.amazonaws.com/0/142879/11b9d1c4-37f4-e6be-d2cb-4559fefd061a.png)

`MainWindow.xaml.cs`が出てきます。これがコードビハインドです。
![wbg1-14.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d205de70-3a3f-05e6-3aa0-e3728c5d3d9d.png)

XAMLに戻ってボタンの定義を見てみるとクリックイベントが作成されています。
![wbg1-12.png](https://qiita-image-store.s3.amazonaws.com/0/142879/6fcafe14-f62c-b8d6-1fef-b1126f8a64af.png)

コードビハインドの`button_Click`イベントの中にメッセージボックスを表示するコードを書きます。

```CSharp
MessageBox.Show("こんにちは");
```

途中まで入力すれば入力候補が表示されます。
![wbg1-15.png](https://qiita-image-store.s3.amazonaws.com/0/142879/a38b7e14-68a7-0bde-447e-5d9ef712ba47.png)

![wbg1-16.png](https://qiita-image-store.s3.amazonaws.com/0/142879/4ac2e879-c520-ef7b-66e2-4e211fe410fa.png)

# ■動かしてみる

ツールバーの「開始」ボタンを押します。
編集内容が保存・ビルドされてエラーが無ければプログラムが起動します。
![wbg1-17.png](https://qiita-image-store.s3.amazonaws.com/0/142879/13dad2d7-56d4-aa25-814e-b96fe7ccf84e.png)

※起動時にこんなのが出て邪魔な場合は、[この記事](http://qiita.com/Kosen-amai/items/b9f724b873661b223d83#-xaml%E3%81%AEui%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB) を参照
![wbg1-20.png](https://qiita-image-store.s3.amazonaws.com/0/142879/ae952f3b-30fa-189f-eb11-d790428a8cb7.png)


起動しました。ボタンを押してみます。
![wbg1-18.png](https://qiita-image-store.s3.amazonaws.com/0/142879/039694cc-4fad-7773-7df3-887837c10616.png)

メッセージが出ました。
![wbg1-19.png](https://qiita-image-store.s3.amazonaws.com/0/142879/2ba7061f-38ee-9058-2ccc-ec62aaec6ae4.png)

おしまい

---

~~＜ 前の記事~~ 　 [次の記事 ＞](http://qiita.com/Kosen-amai/items/88b3d987b41f46ebea4b "Windows GUIプログラミング入門2 デジタル時計")

---

# ■Windows GUIプログラミング入門 連載一覧

* 第1回 メッセージボックス表示
* [第2回 デジタル時計](https://qiita.com/Kosen-amai/items/88b3d987b41f46ebea4b)
* [第3回 各種設定](https://qiita.com/Kosen-amai/items/1ef3685a0178e134320a)
* [第4回 画面レイアウト(1)](https://qiita.com/Kosen-amai/items/af0c4962763f1b587387)
* [第5回 画面レイアウト(2)、画面遷移(1)](https://qiita.com/Kosen-amai/items/f2451acb2addd221193f)
* [第6回 画面遷移(2)](https://qiita.com/Kosen-amai/items/9f5e56e8c80b348b127f)
* [第7回 システムカラー、画面レイアウト(3)](https://qiita.com/Kosen-amai/items/3ca00ebdbdee7776b67b)
* [第8回 画像、ボタン](https://qiita.com/Kosen-amai/items/c06f4c89f636b781795a)
* [第8.1回 Visual Studio 2017インストール](https://qiita.com/Kosen-amai/items/f7b6f5e4aa2cbd04db63)
* [第9回 ラベル、テキスト、選択系](https://qiita.com/Kosen-amai/items/2c03e1342fb6f042effc)
* [第10回 設定保存(1)](https://qiita.com/Kosen-amai/items/792c59392e72e65316bd)
* [第11回 設定保存(2)](https://qiita.com/Kosen-amai/items/7835aac8df7cc925eddd)
* [第12回 リストビュー(1)](https://qiita.com/Kosen-amai/items/def339ea71cc69eeb9d0)
* [第13回 リストビュー(2)、メニュー](https://qiita.com/Kosen-amai/items/b07b9d7c905efdbaf6d7)
* [第14回 処理中表示](https://qiita.com/Kosen-amai/items/58e597c98967ca34ecd1)
* [第15回 インストーラー(1)](https://qiita.com/Kosen-amai/items/44392fdf3bd8b56cfacb)
* [第16回 アラーム](https://qiita.com/Kosen-amai/items/02208712c8cac15ef995)
* [第17回 変換ツール](https://qiita.com/Kosen-amai/items/c2542fe0d0b62d108096)
* [第18回 電卓](https://qiita.com/Kosen-amai/items/966bcbe2b0652cd512cc)
* [第19回 NuGet(1), 通知領域（タスクトレイ）](https://qiita.com/Kosen-amai/items/9533ce90e61b4873aafb)
* [第20回 NuGet(2), コントロール集](https://qiita.com/Kosen-amai/items/c5cecf81240407693cda)
* [第21回 NuGet(3), ブラウザコントロール](https://qiita.com/Kosen-amai/items/635897faa0c064d846c1)
* [第22回 画像ビューア](https://qiita.com/Kosen-amai/items/de49ab4c8b74ddf6f13c)
* [第23回 NuGet(4), トースト通知](https://qiita.com/Kosen-amai/items/5712dc35d7eb8b7730fe)
* [第24回 ドラッグ＆ドロップ](https://qiita.com/Kosen-amai/items/231969eef137c770cc8c)
* [第25回 コード整形](https://qiita.com/Kosen-amai/items/e31b62a6f892cb5a7c14)
* [第26回 画面キャプチャ](https://qiita.com/Kosen-amai/items/e852840f8f4b30680458)
* [第27回 ヘルプ画面](https://qiita.com/Kosen-amai/items/8a5b89f6d7237c5cd671)