プログラム初心者勉強会　7回目　-C# Windowsフォーム入門

#目次
[1. 前回リンク](#1-前回リンク)
[2. 次回リンク](#2-次回リンク)
[3. やったこと](#3-やったこと)
[4. 配信時の録画](#4-配信時の録画)
[5. 今回学んだこと](#5-今回学んだこと)
[6. タブページの配置と追加](#6-タブページの配置と追加)
[7. バージョン情報の表示](#7-バージョン情報の表示)
[8. ツールボックスから使用できるダイアログについて](#8-ツールボックスから使用できるダイアログについて)
[9. 振り返り](#9-振り返り)
[10． 次回予告](#10-次回予告)

#1. 前回リンク
https://qiita.com/Usyuuu-program-beginner/items/cc17e799bc0538902ffd

#2. 次回リンク
https://qiita.com/Usyuuu-program-beginner/items/7e3f3ada4750cb3adff5

#3. やったこと
下のサイトの 9. ダイアログ(1)、10 ダイアログ(2)を学習

http://kaitei.net/csforms/

#4. 配信時の録画
https://www.youtube.com/watch?v=jnIbkJRjs-0

#5. 今回学んだこと
ファイルの参照ボタンとかどういう風につくるのか、やっと学べてよかった。面白かったね

#6. タブページの配置と追加
デザイナー画面の「TabControl」から、タブページ2枚構成の画面を配置できます。

![Tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/3bd371b3-2e0a-b689-5900-ed971ceb54af.png)

#6.1 タブページの増やし方 1：プロパティから増やす方法

![TabControlを示す.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/de537089-d100-0515-7331-7a5c86332e6a.png)

画像の赤枠をクリックし、tabControlのプロパティを編集可能とする。
プロパティ画面の一番下に”タブの追加”、”タブの削除”
”ボタンがあり、これでページの追加、削除が可能

![TabControlのプロパティ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/762a7bb3-5419-6c77-41da-2c7019726ea5.png)

#6.2 tabページを右クリックし、「タブの追加」「タブの削除」を押す
右クリックして、画像赤枠をクリックでOK

![TabControl　右クリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/fa86674c-5ffb-142c-a6c2-4d649cd3b402.png)

#6.3 TabControlのTabPagesから追加、削除する
TabContorlのプロパティ内「TabPages」から追加、削除ができます。

![TabPages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/56099222-dd08-7f0c-0122-a9052c59847a.png)

TabPagesを開くと、以下の様に各ページのプロパティ設定と、ページの追加が出来る画面が開かれます。これが一番便利かもしれない。

![TabPagesの画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/0ba0c711-736a-a501-2bd1-41581a0fe8a7.png)

#7. バージョン情報の表示
ここでは**情報ボックス**を用いたバージョン情報画面の作成方法を記載します

#7.1 情報ボックスの表示手順

　1. ソリューションエクスプローラのプロジェクト名を右クリックし、「追加(D)」→「Windowsフォーム(F)...」をクリック

![情報ボックス1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/9a1a62ef-071d-8afd-2d0b-c42d30f63305.png)

 2．AboutBox1.csというファイルが追加され、下画像の画面が表示される。これが情報ボックス

![情報ボックス_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/35edb147-e3e9-3383-83cf-2fe490f855a3.png)

#7.2 情報ボックスの画像編集

　1. 情報ボックスのデザイン画面、画像枠右上の◁ボタンをクリックする
　2. PictureBoxタスクが表示されるので「イメージの選択...」をクリック
　3. 「リソースの選択」画面が表示されるので、「インポート(M)...」から表示させたい画像を選択

![情報ボックスの画像編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/fe946583-5b1e-41dc-930b-85234e9806e5.png)

　4. 「OK」を押すと、選択した画像が表示される

![情報ボックス_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/c606f7d4-9d7b-631b-6c35-14103ec3df8f.png)

「バージョン」とかのデフォルト文字は、プロパティから変更可能です。
![情報ボックスの説明文変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/3d770bd1-bc8f-54c8-ff8c-05791614875c.png)


#7.3 情報ボックスに表示するバージョン情報の編集
　1. プロジェクト名のプロパティ画面を開き、アプリケーションタブメニューの「アセンブリ情報(i)...」をクリックする。
![バージョン情報の更新.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/4b9edb79-e107-940e-8b76-0d4b0b30c579.png)

 2．以下の画面が表示されるので、それぞれの内容を更新する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/ca3b6882-6f8a-3a2f-4746-7a7473a2e4b5.png)

　3. デバックでどんな画面になってるか確認する。ちゃんと内容更新されてますね
![情報ボックス_更新後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/b4ca6758-a603-7349-354d-f704f2198e50.png)

#8. ツールボックスから使用できるダイアログについて
ツールボックス内に「ダイアログ」があるのをご存じだろうか。これを使うと、カラーダイアログやファイルダイアログを簡単に使用できます。8.1章以降は各ダイアログの使用方法についてまとめます。

![ダイアログ_デザイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/56f38736-a5b7-4c76-95ea-81a144337ee5.png)
デザイン画面に各ダイアログを配置すると、画像の赤枠部分にダイアログ名が追加表示されます。

##8.1 カラーダイアログについて
ボタンのイベントハンドラに下記コードを記載すれば、ボタン押下後にカラーダイアログが表示され、選択した色が背景色になります。

```C#:カラーダイアログ表示ボタンのイベントハンドラ関数
private void ColorDiagButton_Click(object sender, EventArgs e)
{
     ColorDialog dialog = new ColorDialog()
     {
         // 現在のフォームの背景色をダイアログに渡す
         Color = this.BackColor
     };

     DialogResult result = dialog.ShowDialog();

     if (result == DialogResult.OK)
     {
         // ダイアログで選択された色をフォームの背景色に反映
         this.BackColor = dialog.Color;
     }
}
```
![カラーダイアログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/c2bac15b-5ff9-74c6-e512-fb87db2ad8cd.png)

ボタンを押すと、上手右手のダイアログが表示される。
色を選択してOKを押すと、Form画面の背景色が選択色に変わる。

#8.2 フォルダダイアログについて
フォルダのPATH情報等を取得するダイアログが表示できる。
以下のコードでは、デザイン画面に配置したラベルに、フォルダダイアログ上で選択したフォルダPATHを表示するサンプルコード。

```C#:フォルダダイアログ表示ボタンのイベントハンドラ関数
private void FolderButton_Click(object sender, EventArgs e)
{
    FolderBrowserDialog dialog = new FolderBrowserDialog()
    {
        //この辺りは、フォルダダイアログのプロパティから編集可能 
        SelectedPath = label.Text,  // 選択されるフォルダの初期値
        RootFolder = Environment.SpecialFolder.Desktop,  // ルート
        Description = "フォルダを選択してください。",   // 説明文
    };

    DialogResult result = dialog.ShowDialog();

    if (result == DialogResult.OK)
    {
        // 選択されたフォルダのパスをラベルに表示
        label.Text = dialog.SelectedPath;
    }
}
```
##8.3 ファイルダイアログについて
これが今後一番使うであろうダイアログ。

###8.3.1 選択したファイルをFormの背景に設定
以下サンプルコードを使うことで、選択した画像が背景になるよ

```C#:　(背景設定）ファイルダイアログ表示ボタンのイベントハンドラ関数
private void SelectBackgroundButton_Click(object sender, EventArgs e)
{
    DialogResult result = openFileDialog1.ShowDialog();
    if(result == DialogResult.OK)
    {
        // 背景画像を取得
        System.IO.Stream stream = openFileDialog1.OpenFile();
        // 背景画像に上の画像を設定
        this.BackgroundImage = new Bitmap(stream);
        // ファイル名をタイトルバーに設定
        this.Text = openFileDialog1.SafeFileName;
    }
    else if(result == DialogResult.Cancel)
    {
        //Nothing
    }
}
```
ファイルダイアログで「背景.png」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/103494dd-61c6-be97-85b5-0970da523124.png)
↓
背景が選択画像になったね！
![背景選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/763ccd5d-c7bd-2897-241a-ef2a1c12575a.png)

###8.3.2 ファイル保存ボタンの作成
以下サンプルコードを使用すると、保存したテキストファイルに「GoodMorning！」が表示されてる

```C#:　(保存）ファイルダイアログ表示ボタンのイベントハンドラ関数
private void SaveFileButton_Click(object sender, EventArgs e)
{
    DialogResult result = saveFileDialog1.ShowDialog();
    if(result == DialogResult.OK)
    {
        File.WriteAllText(saveFileDialog1.FileName,"GoodMorning!");
    }
}
```
以下の様にText.txtを選択し、保存ボタンを押す
![FileSave.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/5e70169b-7aef-8339-8959-82aca5ba92ef.png)
↓
「GoodMorning！」が表示されてる！！！
![FileSave結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2130837/2c887c96-4463-1059-c65c-9a70024ca431.png)

#9. 振り返り
業務に使えるところがいっぱい出てきてよかった。
次はメニューバーの編集もあるし、楽しみだね！

#10． 次回予告
次回はメニューバーの編集を学ぶよ。
第7回は11月21日(日）の夜8時から以下チャンネルで行います！

##ニコニコ配信先
https://com.nicovideo.jp/community/co3601066

##Twitch配信先
https://www.twitch.tv/programing_study_meeting

##Discordリンク
https://discord.gg/7rcqhMGpvA