VB.NET GUI画面作成 チュートリアル4

# 🍗1. はじめに

最終回は実践編です。

# 🍗2. 環境

* Windows 10（Version 20H2）
* Visual Studio Community 2019（Version 16.8.3）

# 🍗3. プロジェクトの作成

Visual Studio 2019を起動し、「新しいプロジェクトの作成」ボタンを押します。
「新しいプロジェクトの作成」画面で「WPF アプリ（.NET Framework）」を選択し、「次へ」ボタンを押します。
「プロジェクト名」に`Sample4`と入力し、「作成」ボタンを押します。
![400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0a93b969-e6d5-c3c0-50a9-21a30e06803d.png)

# 🍗4. 準備

## ◇4-1. 共通スタイル定義

まずは「Application.xaml」を開き、「Application.Resources」の中にスタイル定義を書きます。
![405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/bc6b8c1c-b4e9-257f-2761-88d6feedb547.png)

```xml
<!--  ラベルの基本スタイル  -->
<Style x:Key="BaseLabelStyle" TargetType="Label">
    <Setter Property="Foreground" Value="MediumBlue" />
    <Setter Property="Margin" Value="8" />
</Style>
```

これはラベルのスタイル定義です。
`<!-- 〇〇〇 -->`はコメントです。
文字色と余白を設定しています。

```xml
<!--  ラベルの既定スタイル  -->
<Style TargetType="Label" BasedOn="{StaticResource BaseLabelStyle}" />
```

そして「BasedOn」で定義したスタイルを適用しています。
このスタイルは「x:Key」指定がないため、Style指定なしのラベルに適用、
つまりラベルの既定スタイルになります。

※「TargetType」を先に書くことで、「BasedOn」を書くときに「BaseLabelStyle」が入力候補に出るようになります。
（保存するとXAML Stylerがアルファベット順に「BasedOn」、「TargetType」と並び変えます）
![406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0a8810f3-89b3-9358-a55a-1dfa28a88cad.png)

同様に他のコントロールのスタイルも定義します。

```xml
<!--  ボタンの基本スタイル  -->
<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="Margin" Value="8" />
    <Setter Property="Background" Value="DeepSkyBlue" />
</Style>
<!--  ボタンの既定スタイル  -->
<Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}" />

<!--  チェックボックスの基本スタイル  -->
<Style x:Key="BaseCheckBoxStyle" TargetType="CheckBox">
    <Setter Property="Margin" Value="8" />
</Style>
<!--  チェックボックスの既定スタイル  -->
<Style TargetType="CheckBox" BasedOn="{StaticResource BaseCheckBoxStyle}" />

<!--  テキストボックスの基本スタイル  -->
<Style x:Key="BaseTextBoxStyle" TargetType="TextBox">
    <Setter Property="Margin" Value="8" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<!--  テキストボックスの既定スタイル  -->
<Style TargetType="TextBox" BasedOn="{StaticResource BaseTextBoxStyle}" />

<!--  ウィンドウの基本スタイル  -->
<Style x:Key="BaseWindowStyle" TargetType="Window">
    <Setter Property="ResizeMode" Value="CanResizeWithGrip" />
    <Setter Property="MinWidth" Value="200" />
    <Setter Property="MinHeight" Value="200" />
</Style>
```

![410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3b28bf67-a764-a443-4795-3c5a9f03e498.png)

## ◇4-2. メニュー画面スタイル定義

サンプル画面を表示するためのメニュー画面を作成します。

「MainWindow.xaml」を開き、`Style="{StaticResource BaseWindowStyle}"`を入力し、
「Height」に`250`を、「Width」に`300`を入力します。
「BaseWindowStyle」は「Application.xaml」に定義した、画面の共通スタイルです。
![415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c21cb179-03d9-f7fc-0f0d-f5c1a7912bfe.png)

「MainWindow.xaml」に「Window.Resources」を作成します。

```xml:MainWindow.xaml
<Window.Resources>
    <Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="Height" Value="40" />
    </Style>
</Window.Resources>
```

「BaseButtonStyle」のプロパティ設定に加え、高さの指定が適用されます。
「x:Key」指定がないため、これが「MainWindow」内の既定のボタンスタイルになります。
![420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8c29f33e-13d4-86c5-833e-c17e6a8a6e0d.png)

## ◇4-3. ボタン配置

デザインビューで「Grid」を右クリックし、「レイアウトの種類の変更」-「StackPanel」を選択します。
![425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/83a0d3f6-84c4-771e-c1c9-b330bfaf3e96.png)

「Button」を「StackPanel」にドラッグ＆ドロップします。
![430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/61e503e0-17d3-2ef2-134e-6f584dcb4780.png)
「Button」を右クリックし、「レイアウト」-「余白のリセット」を選択します。
もう一度「Button」を右クリックし、「レイアウト」-「サイズのリセット」を選択します。
「Content」プロパティを`サンプル1`に書き換えます。
![435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8c705d25-5077-eabc-0f3a-91ad01254a2a.png)
「BaseButtonStyle」の「Margin」「Background」、そして「MainWindow.xaml」で定義した「Height」が適用されています。
スタイルが思った通りに適用されない場合は、メニューの「ビルド」-「ソリューションのビルド」をすると直ることがあります。
![770.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1ba75c47-a8c1-8ce7-638d-e9b53621e9fb.png)

「Button」をコピペして3つにします。「Content」プロパティを`サンプル2`, `サンプル3`にします。
![440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ee500f5e-d066-ef84-1cb2-aca2ceef28a4.png)

## ◇4-4. サンプル用画面追加

ソリューション エクスプローラーで「Sample4」プロジェクトを右クリックし、「追加」-「ウィンドウ(WPF)」を選択します。
![450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/16d892f3-2f71-b855-6ee7-c99dedf58cad.png)
名前に`Window1.xaml`を入力し、「追加」ボタンを押します。
![455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6fa41c2b-0c3b-677f-7215-af952b9494d8.png)
同様に`Window2.xaml`, `Window3.xaml`を追加します。
![460.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/de0153d8-9e5c-93e3-9196-e08294eb3d44.png)

## ◇4-5. ボタンクリック処理作成

デザインビューで「サンプル1」ボタンをダブルクリックします。
「MainWindow.xaml」に戻り、「サンプル2」ボタンをダブルクリックします。
「MainWindow.xaml」に戻り、「サンプル3」ボタンをダブルクリックします。
![465.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a3238fd9-18b9-69d7-fd29-9af2f2964ebf.png)
![470.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8b70aa8f-1c60-60b3-5c94-399b61936d99.png)

自動的に付けられたクリック処理の名前を修正します。
「Button_Click」の部分にカーソルを置き、右クリックし、「名前の変更」を選択します。
![475.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5b525fc8-505e-55a3-6c24-73e267f1d6d1.png)

「Button_Click」が選択状態になって名前変更モードになります。
![480.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f65984ce-d06b-965e-b238-1353d64a233b.png)

`Button1_Click`に修正します。
![485.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9083b2dd-39fd-117d-c5ea-f7722960a2f5.png)

Enterキーで確定します。
![490.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7f8a3220-949e-33d4-0c70-89bc57f639d6.png)

同様に残りの2つも「名前の変更」機能で`Button2_Click`, `Button3_Click`に変えます。
![495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7028dfa6-151b-c9c6-898d-34903d5c61e8.png)

XAMLビューに戻ると、ちゃんとこちらにも変更が反映されています。
![500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/faeef0ab-16d6-d694-24a1-80f86ce07d2a.png)

VBのコードに戻り、以下のように入力します。
先ほど追加した3つのウィンドウをそれぞれ表示する処理です。

```vb:MainWindow.xaml.vb
Class MainWindow
    Private Sub Button1_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window1
        w.ShowDialog()
    End Sub

    Private Sub Button2_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window2
        w.ShowDialog()
    End Sub

    Private Sub Button3_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window3
        w.ShowDialog()
    End Sub
End Class
```

これでサンプル画面を表示するための準備が整いました。

# 🍗5. サンプル1

## ◇5-1. 概要

何かの登録画面を作ります。
![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7ccc21df-b450-6cb3-d1a5-7305f5db6d2b.png)

親のレイアウトパネルは「Grid」で、入力項目とボタンのあるエリアを区切ります。
上は縦並びの「StackPanel」、下は横並びの「StackPanel」を埋め込みます。
![sample1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9e8d35eb-0a09-ca7f-f0ac-d0881d7af705.png)
こうすることで入力項目やボタンが増えても変更が容易な画面になります。

## ◇5-2. 作成

### ◎5-2-1

「Window1.xaml」を開き、「Window」に`Style="{StaticResource BaseWindowStyle}"`を入力し、
「Height」に`300`を、「Width」に`500`を入力します。
「Grid」の行を分割します。
![505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/70c904ca-c3a4-6746-4e89-8b59c0a984ff.png)

### ◎5-2-2

「StackPanel」を「Grid」のそれぞれの行にドラッグ＆ドロップします。
![510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8bb940e4-c855-2275-21b6-c8bb445f9bff.png)

上の「StackPanel」を選択し、プロパティ ウィンドウの「レイアウト」を以下のように入力します。

| プロパティ | 値   |
| ---------- | ---- |
| Row        | 0    |
| RowSpan    | 1    |
| Column     | 0    |
| ColumnSpan | 1    |

そしてデザインビューで「StackPanel」を右クリックし、「レイアウト」-「すべてリセット」を選択します。

次は下の「StackPanel」を選択し、プロパティ ウィンドウの「レイアウト」を以下のように入力します。

| プロパティ  | 値         |
| ----------- | ---------- |
| Row         | 1          |
| RowSpan     | 1          |
| Column      | 0          |
| ColumnSpan  | 1          |
| Orientation | Horizontal |

こちらも同様にデザインビューで「レイアウト」-「すべてリセット」します。
![515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/851e6883-395d-397f-d204-3c55990f7e92.png)

### ◎5-2-3

上の「StackPanel」に「Label」→「TextBox」→「Label」→「TextBox」→「CheckBox」→「CheckBox」の順に放り込んでください。
下の「StackPanel」に「Button」を2つ放り込んでください。
![520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a06f067d-0b48-1e61-bcd8-b991d75046a7.png)

勝手に付けられた余白やサイズをクリアします。
ドキュメント アウトラインで一番上の「Label」をクリックし、一番下の「CheckBox」をShiftを押しながらクリックします。
![525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/180e7b12-6e93-7a76-00cf-0cc4dcfa5ce8.png)
右クリックし、「レイアウト」-「すべてリセット」を選択します。
![530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f28f15ed-a3a9-b5ec-aaac-8c18b74024ef.png)
　↓
![535.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/24b7beb0-a4b5-1efe-2620-83bd4233ba22.png)

「Application.xaml」で定義したスタイルが適用されています。
スタイルが思った通りに適用されない場合は、メニューの「ビルド」-「ソリューションのビルド」をしてください。

「Label」と「TextBox」をもう少しくっつけるために余白を調整します。
![540.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/49033a81-4ef8-53d1-e27c-ebe18091847e.png)

「Window.Resources」を定義し、「Label」と「TextBox」の「Margin」を上書きします。
![545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/227c69c7-33bc-4e84-1ed4-ac5a95c3216f.png)

```xml
<Window.Resources>
    <Style TargetType="Label" BasedOn="{StaticResource BaseLabelStyle}">
        <Setter Property="Margin" Value="8,8,8,0" />
    </Style>
    <Style TargetType="TextBox" BasedOn="{StaticResource BaseTextBoxStyle}">
        <Setter Property="Margin" Value="8,0,8,8" />
    </Style>
</Window.Resources>
```

### ◎5-2-4

下の「StackPanel」を選択し、「HorizontalAlignment」プロパティを「Right」に設定します。
![550.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d1b4bae1-9196-9d02-19e8-6ad12a15b642.png)

「Button」を2つ選択状態にし、右クリックから「レイアウト」-「すべてリセット」を選択します。
![555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/412b498b-f1d5-ea7b-7510-dc8ad98426ff.png)

「Window.Resources」にボタンのスタイルを追加します。

```xml
<Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
    <Setter Property="Margin" Value="16,8" />
    <Setter Property="Height" Value="30" />
    <Setter Property="Width" Value="150" />
</Style>
```

「Grid」を選択し、矢印のあたりにマウスカーソルを移動します。
![560.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/455eaa12-32ec-89a1-d908-942e25a3ed8a.png)

「▼」部分をクリックします。
![565.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fa4485b1-9a6f-659f-55d5-25fc136cdb38.png)

表示されたメニューから「Auto」を選択します。
![570.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/eb7f9235-99e3-4fdf-da3b-86cc0fbf1726.png)

![575.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/17a4ec9c-d220-ee1d-6c45-ff8bcf787c2c.png)

## ◇5-3. 実行してみる

ツールバーの「開始」ボタンを押します。
「サンプル1」ボタンを押します。
![580.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fda9c2c4-4ca1-315e-00ac-8cd8520dd3be.png)
![585.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6a003275-d7c5-455f-f98c-5e98fa094879.png)
確認が終わったら2つの画面を「×」ボタンで閉じましょう。

# 🍗6. サンプル2

## ◇6-1. 概要

ブラウザ風の画面です。
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e281e171-bb4e-2c1f-7448-1429b3f6fa04.png)

「Grid」を3行、2列に区切ります。
1行1列はボタン、1行2列がアドレスバー、2行目はブックマークバー、3行目がWebページを表示するエリアです。
![sample2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/50ab378e-23ad-cb13-7f0e-c691467804be.png)

## ◇6-2. 作成

### ◎6-2-1

「Window2.xaml」を開き、「Window」に`Style="{StaticResource BaseWindowStyle}"`を入力します。
「Grid」の行を分割します。
![600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5a4bb90b-27c6-d8de-4d2b-f2f1d4caaa5f.png)

### ◎6-2-2

矢印の位置あたりに「StackPanel」と「TextBox」をドラッグ＆ドロップしてください。
![605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8849ad4e-dc78-1dda-a249-97fb255395d4.png)

左上に配置した「StackPanel」のプロパティを以下のように設定してください。

| プロパティ（レイアウト）  | 値         |
| ----------- | ---------- |
| Row         | 0          |
| RowSpan     | 1          |
| Column      | 0          |
| ColumnSpan  | 1          |
| Orientation | Horizontal |

そしてデザインビューで右クリックし、「レイアウト」-「すべてリセット」を選択してください。

右に配置した「TextBox」のプロパティを以下のように設定し、「レイアウト」-「すべてリセット」してください。

| プロパティ（レイアウト）  | 値         |
| ----------- | ---------- |
| Row         | 0          |
| RowSpan     | 1          |
| Column      | 1          |
| ColumnSpan  | 1          |

真ん中あたりに配置した「StackPanel」のプロパティを以下のように設定し、「レイアウト」-「すべてリセット」してください。

| プロパティ（レイアウト）  | 値         |
| ----------- | ---------- |
| Row         | 1          |
| RowSpan     | 1          |
| Column      | 0          |
| ColumnSpan  | 2          |
| Orientation | Horizontal |

「StackPanel」が図のように配置されました。
![610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/620ed4c8-095c-9acc-6438-e0f71d853e5b.png)

### ◎6-2-3

これから追加するボタン用のスタイルを定義します。

```xml:Window2.xaml
<Window.Resources>
    <Style x:Key="NaviButtonStyle" TargetType="Button">
        <Setter Property="Margin" Value="8,8,0,8" />
        <Setter Property="Padding" Value="8,2" />
    </Style>
    <Style x:Key="BookmarkButtonStyle" TargetType="Button">
        <Setter Property="MinWidth" Value="20" />
        <Setter Property="MaxWidth" Value="60" />
        <Setter Property="Margin" Value="8" />
    </Style>
</Window.Resources>
```

左上の「StackPanel」に「Button」を1つドラッグ＆ドロップし、
プロパティ ウィンドウの「その他の指定」-「Style」の「■」をクリックし、「ローカルリソース」-「NaviButtonStyle」を選択します。
![615.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b45636d5-4d1c-23d1-a73f-f9ab422321b8.png)
「レイアウト」-「すべてリセット」したあとコピペしてボタンを3つにします。
![620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0bf4ef15-8297-b030-b566-375f821b91ed.png)
「Button」の「Content」プロパティを左（XAMLビューだと上）から順に`◀`, `▶`, `🔄`にします。

「Grid」を選択し、1行目を「Auto」にします。
![625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/08511bbc-0af6-a18e-91ce-c8f65a915d35.png)
1列目を「Auto」にします。
![630.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c97480c2-6e38-f1c5-560b-5d62670d3a53.png)
これで行の高さは「Button」や「TextBox」の高さに合わせて自動調整されます。
「Button」を増やせば自動的に「TextBox」の幅がその分狭くなります。
![635.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/456309ba-ad8b-2856-d698-318664077f80.png)

### ◎6-2-4

次は2つ目の「StackPanel」に「Button」をドラッグ＆ドロップします。
![640.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/77f1c00f-857b-fda0-3c80-f6c04ed573b3.png)
「レイアウト」-「すべてリセット」し、「Style」に「BookmarkButtonStyle」を適用します。
「Grid」を選択し、2行目を「Auto」に設定します。
![645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/bf7f37a4-5d7a-40d9-182f-d50f886b526f.png)
「Button」をコピペして5つにし、「Content」プロパティをそれぞれ
`a`
`あいうえお`
`ABCDEFGHIJKLM`
`123`
`かきくけこさしすせそ`
にします。
![650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4c3f03e3-73c8-017d-8e27-173323463c9d.png)
ボタン幅の上限を指定しているので、幅の長すぎるボタンができないようになっています。

### ◎6-2-5

最後のパーツです。
今回はドラッグ＆ドロップ以外のやり方で配置してみましょう。
ツールボックスの「すべてのWPFコントロール」から「ScrollViewr」をクリックし、
「Grid」の3行目で2列を含むように対角線上にドラッグします。
![655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/71cb7bb8-3fb4-3350-cbbf-7d78ab0c7a53.png)

プロパティの「ブラシ」-「Background」に`ivory`を設定します。
![660.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e606e173-3a4d-db9c-d060-1e6bdf2a063d.png)

プロパティの「レイアウト」が以下の通りになっているか確認します。
なっていなかったら修正します。

| プロパティ（レイアウト）  | 値         |
| ----------- | ---------- |
| Row         | 2          |
| RowSpan     | 1          |
| Column      | 0          |
| ColumnSpan  | 2          |

そしてデザインビューで「レイアウト」-「すべてリセット」をします。
ついでに「Window2.xaml」を保存してXAMLを整えておきましょう。
![665.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0c55af30-31d5-86ec-6762-1f605820e496.png)

画面の右下隅に注目します。
スクロールバーの▼ボタンとサイズ変更グリップが重なっています。
この画面ではスクロールバーを画面下端まで表示するため、サイズ変更のグリップは隠すことにします。
![670.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ddc61a2b-a8b8-7866-722e-96078cd1bce1.png)
ドキュメント アウトラインで「Window」を選択し、プロパティ ウィンドウの「共通」-「ResizeMode」の横の「■」をクリックし、「ローカル値に変換」を選択します。
![675.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b3edd2bb-2f7b-bedf-24e5-7348b4ed2cee.png)
プロパティ ウィンドウの「ResizeMode」横の「■」が緑色から、変更されたことを意味する黒色に変わり、
XAMLビューで「ResizeMode="CanResize"」の記述が追加されています。
![680.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ada492b3-17ce-cf62-25b3-ce842185062a.png)

## ◇6-3. 実行してみる

ツールバーの「開始」ボタンを押します。
「サンプル2」ボタンを押します。
![685.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c2f5eaa8-c100-1bcc-9827-4ae575a2d312.png)
確認が終わったら2つの画面を「×」ボタンで閉じましょう。

# 🍗7. サンプル3

## ◇7-1. 概要

エクスプローラー風の一覧画面です。

![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/45c78af1-bfd3-8cb1-0e28-ae1211053161.png)

上にツールバー、下にステータスバー、真ん中に一覧が2つ。
そのため、以下のようにGridを区切ってもよいのですが、
![sample3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f904cbea-e905-a673-76c9-b6a1b451073f.png)
2つの一覧の境界をドラッグでサイズ変更したいので、
![sample3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6082719b-0f68-af15-10b2-8a065337a52d.png)
境界部分に「GridSplitter」というコントロールを入れるために3行、3列に区切ります。
![sample3-3_v2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/73afbde2-81ae-e23d-4121-c6e64103ca3c.png)

## ◇7-2. 作成

### ◎7-2-1

「Window3.xaml」を開き、「Window」に`Style="{StaticResource BaseWindowStyle}"`を入力します。
「Grid」の行を分割します。
![700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/262faf95-4384-3751-607c-56973f0314ff.png)

### ◎7-2-2

「StackPanel」をクリックし、「Grid」の1行目で3列すべて含むようにドラッグします。
![705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cbdcfe74-46a7-193d-54ba-d284180383e6.png)
プロパティを以下のように設定し、デザインビューで「レイアウト」-「すべてリセット」します。

| プロパティ（レイアウト）  | 値         |
| ----------- | ---------- |
| Row         | 0          |
| RowSpan     | 1          |
| Column      | 0          |
| ColumnSpan  | 3          |
| Orientation | Horizontal |

ここに配置するボタン用のスタイルを定義します。

```xml:Window3.xaml
<Window.Resources>
    <Style x:Key="ToolButton" TargetType="Button">
        <Setter Property="Height" Value="30" />
        <Setter Property="Width" Value="30" />
        <Setter Property="Margin" Value="8,8,0,8" />
    </Style>
</Window.Resources>
```

「Button」を1つ「StackPanel」にドラッグ＆ドロップし、「Style」に「ToolButton」を設定します。
（スタイル名は「ToolButtonStyle」の方が適切ですが、スクリーンショットを撮ってしまったのでこのままいきます）
![710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a1cf8238-1feb-bdb2-c7e6-50ccbfcb4a88.png)
「Button」に「レイアウト」-「余白のリセット」と、「レイアウト」-「幅のリセット」を実行し、
XAMLビュー上でコピペしてボタン4つにします。
「Grid」の1行目の高さを「Auto」にします。
![715.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9a027e28-ab3e-a57e-eb31-31a078c64c85.png)

### ◎7-2-3

「ListBox」を「Grid」の2行目、1列目にドラッグ＆ドロップします。
![720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b86d8185-eaf3-1fa7-cd25-041f91e906c9.png)
「レイアウト」-「すべてリセット」し、プロパティを以下のように設定します。

| プロパティ（レイアウト）                 | 値      |
| ---------------------------------------- | ------- |
| Row                                      | 1       |
| RowSpan                                  | 1       |
| Column                                   | 0       |
| ColumnSpan                               | 1       |
| ScrollViewer.VerticalScrollBarVisibility | Visible |

![725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7cd25817-c147-d7fb-5db4-92e75f148cfc.png)

### ◎7-2-4

ツールボックスの「すべてのWPFコントロール」から「GridSplitter」を「Grid」の2行目、2列目の細いエリアにドラッグ＆ドロップします。
![730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e3677145-7c10-9091-5bb0-b37ab987cf12.png)
ドキュメント アウトラインで「レイアウト」-「すべてリセット」した後、プロパティを以下のように設定します。

| プロパティ（レイアウト） | 値      |
| ------------------------ | ------- |
| Width                    | 8       |
| Row                      | 1       |
| RowSpan                  | 1       |
| Column                   | 1       |
| ColumnSpan               | 1       |
| HorizontalAlignment      | Stretch |

![735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6596834e-907d-4643-0e12-594844050338.png)

「Grid」の2列目を「Auto」にします。
![740.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f00a0a6b-52da-f6ee-cba1-4508b4521e87.png)

### ◎7-2-5

ツールボックスの「すべてのWPFコントロール」から「ScrollViewer」を「Grid」の2行目、3列目にドラッグ＆ドロップします。
![745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d50f7e0b-0f02-2ddc-aa65-e00374983390.png)
「レイアウト」-「すべてリセット」し、広がった「ScrollViewr」の上に
「WrapPanel」をドラッグ＆ドロップします。
ドキュメント アウトラインで「WrapPanel」を右クリックし、「レイアウト」-「すべてリセット」します。
![750.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0f4a0a76-e6d1-2c97-253e-88679d627624.png)

### ◎7-2-6

ツールボックスの「TextBlock」をクリックし、「Grid」の3行目で1列目～3列目にかけてドラッグします。
![755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d841a8b2-5fa6-ba51-7682-f162a777b158.png)
「レイアウト」-「すべてリセット」します。

「Grid」の3行目の高さを「Auto」にします。
![760.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0e74399d-df36-0c32-30aa-a08335021551.png)

### ◎7-2-7

「Window.Resources」に「Rectangle」の既定スタイルを追加します。

```xml
<Style TargetType="Rectangle">
    <Setter Property="Fill" Value="SteelBlue" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
    <Setter Property="Margin" Value="24" />
</Style>
```

スタイルを追加したので念のためメニューの「ビルド」-「ソリューションのビルド」を実行しておきます。

デザインビューで「WrapPanel」を選択状態にしてから、ツールボックスから「Rectangle」をドラッグ＆ドロップします。
（ScrollViewrが選択状態になっていると、ScrollViewrの直下に配置されてしまいます）
XAMLビューを見ると余計な「Margin」が付いているので「レイアウト」-「余白のリセット」をします。
![765_v2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0d38dc5e-59d4-e922-a695-72b20a518187.png)

「Rectangle」をコピペして4つにします。
![775_v2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/348a77e8-fd13-ce1e-b5b2-4407fc3398dc.png)

## ◇7-3. 実行してみる

ツールバーの「開始」ボタンを押します。
「サンプル3」ボタンを押します。
![780.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c605933d-98c8-1b33-359b-c838b613a05d.png)
画面サイズを変えたり、一覧の境界を左右にドラッグしてみたりします。
![785.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/07c4c758-4c38-9411-4ee6-45390e64deac.png)

# 🍗8. 作成コード

最後に作成したコードを載せます。

## ◇8-1. Application

```xml:Application.xaml
<Application
    x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Sample4"
    StartupUri="MainWindow.xaml">
    <Application.Resources>

        <!--  ラベルの基本スタイル  -->
        <Style x:Key="BaseLabelStyle" TargetType="Label">
            <Setter Property="Foreground" Value="MediumBlue" />
            <Setter Property="Margin" Value="8" />
        </Style>
        <!--  ラベルの既定スタイル  -->
        <Style BasedOn="{StaticResource BaseLabelStyle}" TargetType="Label" />

        <!--  ボタンの基本スタイル  -->
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Margin" Value="8" />
            <Setter Property="Background" Value="DeepSkyBlue" />
        </Style>
        <!--  ボタンの既定スタイル  -->
        <Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button" />

        <!--  チェックボックスの基本スタイル  -->
        <Style x:Key="BaseCheckBoxStyle" TargetType="CheckBox">
            <Setter Property="Margin" Value="8" />
        </Style>
        <!--  チェックボックスの既定スタイル  -->
        <Style BasedOn="{StaticResource BaseCheckBoxStyle}" TargetType="CheckBox" />

        <!--  テキストボックスの基本スタイル  -->
        <Style x:Key="BaseTextBoxStyle" TargetType="TextBox">
            <Setter Property="Margin" Value="8" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
        </Style>
        <!--  テキストボックスの既定スタイル  -->
        <Style BasedOn="{StaticResource BaseTextBoxStyle}" TargetType="TextBox" />

        <!--  ウィンドウの基本スタイル  -->
        <Style x:Key="BaseWindowStyle" TargetType="Window">
            <Setter Property="ResizeMode" Value="CanResizeWithGrip" />
            <Setter Property="MinWidth" Value="200" />
            <Setter Property="MinHeight" Value="200" />
        </Style>

    </Application.Resources>
</Application>
```

## ◇8-2. MainWindow

```xml:MainWindow.xaml
<Window
    x:Class="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:local="clr-namespace:Sample4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="300"
    Height="250"
    Style="{StaticResource BaseWindowStyle}"
    mc:Ignorable="d">

    <Window.Resources>
        <Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
            <Setter Property="Height" Value="40" />
        </Style>
    </Window.Resources>

    <StackPanel>
        <Button Click="Button1_Click" Content="サンプル1" />
        <Button Click="Button2_Click" Content="サンプル2" />
        <Button Click="Button3_Click" Content="サンプル3" />
    </StackPanel>
</Window>
```

```vb:MainWindow.xaml.vb
Class MainWindow
    Private Sub Button1_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window1
        w.ShowDialog()
    End Sub

    Private Sub Button2_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window2
        w.ShowDialog()
    End Sub

    Private Sub Button3_Click(sender As Object, e As RoutedEventArgs)
        Dim w = New Window3
        w.ShowDialog()
    End Sub
End Class
```

## ◇8-3. Window1

```xml:Window1.xaml
<Window
    x:Class="Window1"
    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:local="clr-namespace:Sample4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Window1"
    Width="500"
    Height="300"
    Style="{StaticResource BaseWindowStyle}"
    mc:Ignorable="d">

    <Window.Resources>
        <Style BasedOn="{StaticResource BaseLabelStyle}" TargetType="Label">
            <Setter Property="Margin" Value="8,8,8,0" />
        </Style>
        <Style BasedOn="{StaticResource BaseTextBoxStyle}" TargetType="TextBox">
            <Setter Property="Margin" Value="8,0,8,8" />
        </Style>
        <Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
            <Setter Property="Margin" Value="16,8" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="150" />
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel>
            <Label Content="Label" />
            <TextBox Text="TextBox" TextWrapping="Wrap" />
            <Label Content="Label" />
            <TextBox Text="TextBox" TextWrapping="Wrap" />
            <CheckBox Content="CheckBox" />
            <CheckBox Content="CheckBox" />
        </StackPanel>
        <StackPanel
            Grid.Row="1"
            HorizontalAlignment="Right"
            Orientation="Horizontal">
            <Button Content="Button" />
            <Button Content="Button" />
        </StackPanel>
    </Grid>
</Window>
```

## ◇8-4. Window2

```xml:Window2.xaml
<Window
    x:Class="Window2"
    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:local="clr-namespace:Sample4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Window2"
    Width="800"
    Height="450"
    ResizeMode="CanResize"
    Style="{StaticResource BaseWindowStyle}"
    mc:Ignorable="d">
    <Window.Resources>
        <Style x:Key="NaviButtonStyle" TargetType="Button">
            <Setter Property="Margin" Value="8,8,0,8" />
            <Setter Property="Padding" Value="8,2" />
        </Style>
        <Style x:Key="BookmarkButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="20" />
            <Setter Property="MaxWidth" Value="60" />
            <Setter Property="Margin" Value="8" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button Content="◀" Style="{DynamicResource NaviButtonStyle}" />
            <Button Content="▶" Style="{DynamicResource NaviButtonStyle}" />
            <Button Content="🔄" Style="{DynamicResource NaviButtonStyle}" />
        </StackPanel>
        <TextBox
            Grid.Column="1"
            Text="TextBox"
            TextWrapping="Wrap" />
        <StackPanel
            Grid.Row="1"
            Grid.ColumnSpan="2"
            Orientation="Horizontal">
            <Button Content="a" Style="{DynamicResource BookmarkButtonStyle}" />
            <Button Content="あいうえお" Style="{DynamicResource BookmarkButtonStyle}" />
            <Button Content="ABCDEFGHIJKLM" Style="{DynamicResource BookmarkButtonStyle}" />
            <Button Content="123" Style="{DynamicResource BookmarkButtonStyle}" />
            <Button Content="かきくけこさしすせそ" Style="{DynamicResource BookmarkButtonStyle}" />
        </StackPanel>
        <ScrollViewer
            Grid.Row="2"
            Grid.ColumnSpan="2"
            Background="Ivory" />

    </Grid>
</Window>
```

## ◇8-5. Window3

```xml:Window3.xaml
<Window
    x:Class="Window3"
    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:local="clr-namespace:Sample4"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Window3"
    Width="800"
    Height="450"
    Style="{StaticResource BaseWindowStyle}"
    mc:Ignorable="d">
    <Window.Resources>
        <Style x:Key="ToolButton" TargetType="Button">
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Margin" Value="8,8,0,8" />
        </Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="SteelBlue" />
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="100" />
            <Setter Property="Margin" Value="24" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="111*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="266*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.ColumnSpan="3" Orientation="Horizontal">
            <Button Content="Button" Style="{DynamicResource ToolButton}" />
            <Button Content="Button" Style="{DynamicResource ToolButton}" />
            <Button Content="Button" Style="{DynamicResource ToolButton}" />
            <Button Content="Button" Style="{DynamicResource ToolButton}" />
        </StackPanel>
        <ListBox Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible" />
        <GridSplitter
            Grid.Row="1"
            Grid.Column="1"
            Width="8"
            HorizontalAlignment="Stretch" />
        <ScrollViewer Grid.Row="1" Grid.Column="2">
            <WrapPanel>
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle />
            </WrapPanel>
        </ScrollViewer>
        <TextBlock
            Grid.Row="2"
            Grid.ColumnSpan="3"
            Text="TextBlock"
            TextWrapping="Wrap" />

    </Grid>
</Window>
```

---

[＜](https://qiita.com/Kosen-amai/items/b451a69617eb0dd6637a)　[　1　](https://qiita.com/Kosen-amai/items/78b09f19f253a257bde0)　[　2　](https://qiita.com/Kosen-amai/items/fce7ad50d8a7ceb03420)　[　3　](https://qiita.com/Kosen-amai/items/b451a69617eb0dd6637a)　[4]