Windows GUIプログラミング入門3 各種設定

# ■はじめに
今回は、よく使いそうなプロジェクト設定、Visual Studioの設定と、
まだ説明していないコントロール配置方法とイベントハンドラの作成方法を紹介します。

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

# ■開発環境
* Windows 10
* Visual Studio Community 2015 Update 3

# ■プロジェクトの設定

## ◇アイコンの変更
実行プログラムのアイコンを任意のものに変更する方法です。
アイコンファイル（*.ico）は事前に用意しておいてください。

※アイコンファイルの作り方は、 [こちらの記事](http://qiita.com/Kosen-amai/items/4700100342c76f9fda78 "アイコンファイル（*.ico）作成 - Qiita") 参照。

ソリューションエクスプローラーでプロジェクトを右クリック、「プロパティ」を選択、
またはVisual Studioのメニュー「プロジェクト」 - 「【プロジェクト名】のプロパティ」を選択します。

![wbg3-01.png](https://qiita-image-store.s3.amazonaws.com/0/142879/05bc30fc-7400-9261-cfd2-d30ff1032a27.png)

「アイコン」コンボボックスの右端の「`...`」ボタンで任意のicoファイルを指定します。
![wbg3-02.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d1ce77b2-733f-1c6e-b57e-fe0a611ef2f9.png)

ビルドするとexeファイルのアイコンが指定したものに変わります。
![wbg3-03.png](https://qiita-image-store.s3.amazonaws.com/0/142879/23346754-4230-e9eb-02bf-0a03f95c5a32.png)

ウィンドウ左上のアイコンも変える場合は、画面デザイナかXAMLでWindowを選択し、プロパティ、`Icon`を変更します。
先ほどプログラムのアイコンを変えたため、プロジェクトにicoファイルが追加されて、プロパティでアイコンを選択できるようになっています。
![wbg3-04.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d5c1e7d9-8127-02c4-385d-7105b0c713ff.png)

実行結果
![wbg3-05.png](https://qiita-image-store.s3.amazonaws.com/0/142879/73ddb40e-9fe6-25bd-4ac2-012eddf686a8.png)

# ■Visual Studioの設定

## ◇タブのピン留め、多段タブ
編集するファイルが多くなってタブがたくさん増えてきたときに便利な設定です。
頻繁に参照するタブの右端にある「ピン」のアイコンをクリックしてピンを刺した状態にします（横になっているのを縦にする）。
そうすると、そのタブが左端に固定され、タブを切り替えても迷子にならなくなります。

![wbg3-06.png](https://qiita-image-store.s3.amazonaws.com/0/142879/8474a688-15ba-3bd2-488b-e6b94f7c7ca3.png)

　　　↓

![wbg3-07.png](https://qiita-image-store.s3.amazonaws.com/0/142879/17614233-0be1-6903-86bc-dff409ef5bec.png)

表示しきれないタブはタブの右端のドロップダウンを開いて選択します。
![wbg3-08.png](https://qiita-image-store.s3.amazonaws.com/0/142879/52f66dc7-4feb-f7be-ef5b-8e7e53c4f83e.png)

Visual Studioメニューの「ツール」 - 「オプション」で「環境」 - 「タブとウィンドウ」の「固定されたタブを別の行で表示する」にチェックを入れると、、、
![wbg3-09.png](https://qiita-image-store.s3.amazonaws.com/0/142879/705aea14-00e0-b640-9dca-a98615c1a464.png)

多段タブ表示になります。
![wbg3-10.png](https://qiita-image-store.s3.amazonaws.com/0/142879/6a71bc03-69f7-8344-06bc-49104a445295.png)

## ◇行番号表示
行番号の表示/非表示を切り替えます。
ソースの種類ごとに設定することもできますし、「すべての言語」で一括設定することもできます。
![wbg3-11.png](https://qiita-image-store.s3.amazonaws.com/0/142879/1dba3cab-fcb0-f5be-a709-4ad235b711c6.png)

## ◇スクロールバーにミニマップを表示
「マップモード」を選択すると、スクロールバーの幅を太くして中にソースの縮小イメージを表示します。
![wbg3-12.png](https://qiita-image-store.s3.amazonaws.com/0/142879/b4a6a592-76ba-5724-627d-617b164b256a.png)

こんな見た目ですが、ちゃんとスクロールバーとして使えます。
![wbg3-13.png](https://qiita-image-store.s3.amazonaws.com/0/142879/00d05265-e3a8-07e7-83c7-b3ffbfb51dae.png)

# ■コントロールの配置方法、イベントハンドラ作成方法

## ◇コントロールの配置

ツールボックスからのドラッグ＆ドロップ以外のコントロールの配置方法です。
まず、ツールボックスから配置したいコントロールをクリックして選択状態にします。
![wbg3-14.png](https://qiita-image-store.s3.amazonaws.com/0/142879/8f2be92a-ec0c-8507-c9d7-53b3fc7e601e.png)

画面デザイナに配置したい位置・サイズになるようにドラッグします。
![wbg3-15.png](https://qiita-image-store.s3.amazonaws.com/0/142879/19f9dbb5-ef02-9f95-e3ca-b90f9c8fe6a6.png)

![wbg3-16.png](https://qiita-image-store.s3.amazonaws.com/0/142879/a48d7053-3673-65d0-9adf-a0a215df09cd.png)

次は、ツールボックスで配置したいコントロールをダブルクリックします。
![wbg3-17.png](https://qiita-image-store.s3.amazonaws.com/0/142879/e67333e8-dd34-ff94-9d03-40ab6494af15.png)

ボタンが追加されました。
![wbg3-18.png](https://qiita-image-store.s3.amazonaws.com/0/142879/97d6105a-964a-3da1-f40d-8ecccf11bcc1.png)

## ◇イベントハンドラ作成
XAMLを編集してイベントを追加する方法です。
`Button`タグの適当な場所にスペースを空けて、
![wbg3-19.png](https://qiita-image-store.s3.amazonaws.com/0/142879/657b97a6-1be0-6fcd-0960-8029d5205116.png)

`Click`と入力します。
![wbg3-20.png](https://qiita-image-store.s3.amazonaws.com/0/142879/3376b9f8-4a82-542a-bbc5-918a58d52b6d.png)

「新しいイベントハンドラー」というのが出てくるので選択するとイベントハンドラ名が自動で付けられます。自分で好きな名前を書くこともできます。
![wbg3-21.png](https://qiita-image-store.s3.amazonaws.com/0/142879/baef450d-ed41-ed26-d139-24f283b92004.png)

XAMLでイベント定義の部分を右クリックして「定義に移動」を選択するとコードビハインドの該当箇所が表示されます。
![wbg3-22.png](https://qiita-image-store.s3.amazonaws.com/0/142879/023c68a9-4525-784e-697b-56f1fc0391e4.png)

![wbg3-23.png](https://qiita-image-store.s3.amazonaws.com/0/142879/d43483eb-6164-6a59-5602-6d7fbd812a89.png)

おしまい

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](http://qiita.com/Kosen-amai/items/88b3d987b41f46ebea4b "Windows GUIプログラミング入門2 デジタル時計") 　 [次の記事 ＞](http://qiita.com/Kosen-amai/items/af0c4962763f1b587387 "Windows GUIプログラミング入門4 画面レイアウト(1)")