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

# 🐤1. はじめに

今回はコントロールを乗せる土台となる、レイアウトパネルを色々使ってみます。

# 🐤2. 環境

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

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

Visual Studio 2019を起動し、「新しいプロジェクトの作成」ボタンを押します。

「新しいプロジェクトの作成」画面で「WPF アプリ（.NET Framework）」を選択し、「次へ」ボタンを押します。
![200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e107e7fa-1305-3d0a-c6fa-0a8ebeb40422.png)

「プロジェクト名」に`Sample2`と入力します。
「作成」ボタンを押します。
![205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e224c2a5-ca85-067f-27d7-fcac7e514061.png)

# 🐤4. タブコントロール配置

## ◇4-1. 配置

ツールボックスから「TabControl」をGrid上にドラッグ＆ドロップします。
![210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6a7a7b61-1cb9-8e0d-b8b9-9caa6f12e7f3.png)
![215.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/71e9ba08-4f16-0cd9-49d3-8e45c80f4afc.png)

ドキュメント アウトラインで「TabControl」を右クリック、「レイアウト」-「すべてリセット」を選択します。
（TabControlはTabItemを内包していますが、TabControlの部分で右クリックしたいため、この場合はデザインビューよりドキュメント アウトラインを使った方が選択しやすいです。）
![220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8595604b-ebcc-54f1-e300-b249e4ecefe0.png)
TabControlの位置やサイズがクリアされ、画面いっぱいに表示されます。
![225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5ca27b17-2277-0e1d-b2ce-5110664b3c1a.png)

## ◇4-2. タブの追加

ドキュメント アウトラインで「TabControl」を右クリック、「TabItemの追加」を選択します。
![230.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f391fd12-5d62-c5ab-cbb1-26d4f0aaa823.png)

タブが3つになりました。
![235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/23a6e395-f426-ceb0-d9f4-8aa9e810a5ed.png)

## ◇4-3. プロパティ設定

デザインビューで一番左のTabItemを選択します。
プロパティウィンドウの「共通」-「Header」に`スタックパネル`と入力してください。
![240.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/84202d86-ba8c-6d36-a6de-a0c8eeadc55f.png)
続いて真ん中のTabItemを選択しHeaderに`グリッド`を、一番右のTabItemのHeaderに`ラップパネル`を入力してEnterキーを押してください。
![245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c85bcd3c-385a-1fb7-9c0d-dd2ebd0ed08f.png)

デザインビューで見ると右端タブの「ラップパネル」の文字が見切れています。
いったんMainWindow.xamlを保存してください。XAML Stylerの機能でXAMLが整形されて見やすくなります。
そしてXAMLビューでTabItemの内容を見てみると幅（Width）が決め打ちされていることがわかります。
![246.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4711c381-782e-32c7-eb8e-98eac266c497.png)
他の2つのタブと同じように、サイズ指定をやめればテキストのサイズに合わせて自動的に調整してくれそうです。
デザインビューで「ラップパネル」のタブを右クリックし、「レイアウト」-「すべてリセット」を選択します。
![247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/27b3f73d-f381-2432-7d6e-dbc068006e73.png)
タブのテキストが全部表示されるようになりました。
![248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8a85a494-254c-f0c4-347d-4a936023f616.png)

# 🐤5. StackPanel

## ◇5-1. 概要

![stack-img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d0717514-dddb-f6d1-7d0c-6bab0054ef73.png)

前回使った「StackPanel」は、コントロールを縦並びまたは横並びに配置します。

## ◇5-2. レイアウトパネル準備

デザインビューでTabControlの左端の「スタックパネル」タブを選択します。
タブの下のグレーの部分（Grid）で右クリックし、「レイアウトの種類の変更」-「StackPanel」を選択します。
![250.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ac888c19-dbe2-b079-42f4-ce5b38a8946c.png)

## ◇5-3. コントロール配置

ツールボックスの「Button」を4つ、デザインビューのStckPanelにドラッグ＆ドロップします。
![255.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/37898d97-f222-b53b-0724-fc59da2fae38.png)
デザインビューでボタンが4つ、上部に並びました。
XAMLビューで「StackPanel」の中に「Button」が入っています。
![260.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1069de69-08ae-0070-3237-0fa6e629231d.png)

デザインビューで上から2番目のButtonを選択し、プロパティ ウィンドウの「ブラシ」-「Background」の右端にある`□`をクリックします。
![265.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1ef67f56-d73e-3f4f-fbf6-cce7ea24506b.png)

そして「カスタム式」をクリックし、
![270.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9e096ff3-ae99-81fa-c086-8fff1cc3d7b3.png)
`green`と入力してEnterキーを押します。
![275.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/998f30bd-16fe-d81a-2ee8-cd2b85d6ce47.png)
ボタンが緑色になりました。
![280.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/24d8916b-afdd-5448-e41e-d7f6c656da5f.png)

一番下のButtonを選択し、同じようにBackgroundにカスタム式で`red`と入力してEnterキーを押してください。
![285.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8830ec4c-dd68-bf46-ed75-8bc7278ffc71.png)

## ◇5-4. 整列方向変更

デザインビューでボタンの下の余白部分（StackPanel）を選択し、プロパティ ウィンドウの「レイアウト」-「Orientation」を「Vertical」から「Horizontal」に変更します。
縦並びだったボタンが横並びに変わりました。
![290.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b6edca98-8efa-ecbd-282c-0e1a5a85198a.png)

# 🐤6. Grid

## ◇6-1. 概要

![grid-img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/62473e5d-863f-9b1f-1a44-a4df4a8d0321.png)

「Grid」は、行・列を定義してコントロールを配置します。
HTMLのTableに似ています。

## ◇6-2. レイアウトパネル準備

デザインビューでTabControlの中央の「グリッド」タブを選択します。
TabItemの中身は既定でGridのため、そのまま使います。
![300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/881c5fd1-2ce6-f623-495f-e1e45340f4d0.png)

## ◇6-3. 行・列の分割

行・列の分割はデザインビュー上でできます。
**Gridを選択した状態で**、下図の緑色の部分あたりにマウスカーソルを持っていくと、マウスカーソルに「+」マークが付きます。ここが分割操作できる場所です。
![305.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4911e324-0832-7614-771c-9cb76870fe22.png)

Gridの上端の中央あたりでマウスカーソルに「+」が表示されたらクリックしてください。
![310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f54d7f2a-3bbc-3bd4-1fd1-0bf46e2ff31d.png)

2列になりました。
XAMLビューを見てみると、Gridタグの中に何やら追加されています。
![315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a0866954-53db-20c8-462d-5d8c51e6d79b.png)

「ColumnDefinition」タグが2つあるので、2列という意味です。
「Width」の「*」付きの数字は割合です。
2つの列幅を同じにしてみます。
まず、XAMLビューで1つ目の「ColumnDefinition」タグをクリックします。
![320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/49d07ae5-e2ea-4d25-ed9f-6bafa240222c.png)

プロパティ ウィンドウで「レイアウト」-「Width」の右端の「■」をクリックし、「リセット」を選択します。
（「□」は既定値、「■」は既定値から変更されていることを意味します）
![325.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e17c8e5b-4bb5-6b28-684c-6cb0b444198b.png)

プロパティ ウィンドウの「Width」が`1`, `Star`になり、XAMLビューの「ColumnDefinition」タグから「Width」が消えました。
![330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/465b6f42-cce8-b362-4205-a986935a2eac.png)

もう1つの「ColumnDefinition」も同様にWidthをリセットしてください。
これで2列の幅が同じになります。
![335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1e0bc2da-56b0-d1f3-5370-708e4d77f2b1.png)

次は行を増やします。
Gridの左端の適当な場所でマウスカーソルに「+」が表示されたらクリックしてください。
![340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/21e5005b-f200-cbcd-d4ab-145043cc0a6d.png)
3行になるよう、2箇所区切りましょう。
![345.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d447e394-c5e3-c69a-24ac-eff5acffc356.png)
XAMLビューを見ると「RowDefinition」タグが3つできました。

XAMLビューで1つ目の「RowDefinition」タグをクリックします。
プロパティ ウィンドウで「レイアウト」-「Height」の右端の「■」をクリックし、「リセット」を選択します。
![350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/51cf99da-e593-4891-befc-c282c443326c.png)
残りの2つの「RowDefinition」も同様に「Height」をリセットします。
![355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2823e65a-e33e-1f15-c608-fa4b8f2c5129.png)
デザインビューで各行に「1*」が表示され、3つとも同じ高さになりました。

XAMLビューを使って行をもう1つ増やしてみましょう。
3つのうちどれでもいいので「RowDefinition」の行にテキストカーソルを移動してください。
![360.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2224f44f-2b01-61d4-8a97-ff183fd4ea95.png)
そこで<kbd>Ctrl</kbd> + <kbd>C</kbd>を押し、<kbd>Ctrl</kbd> + <kbd>V</kbd>を押してください。
「RowDefinition」のタグが増えて4行になりました。
![365.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8aee6243-8f03-d472-e8e4-49d0814fd6d1.png)

行の高さを変えてみます。
XAMLビューで一番下の「RowDefinition」を選択し、プロパティ ウィンドウで「レイアウト」-「Height」に`2`を入力してEnterキーを押します。
![370.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/546d3a59-3e6f-21d8-c30a-c9ea9f86fc47.png)
デザインビューの「2*」は「1*」の2倍のサイズという意味です。

## ◇6-4. コントロール配置

Gridにコントロールを配置してみます。
ツールボックスの「すべてのWPFコントロール」から「Ellipse」を3つ、矢印のあたりにドラッグ＆ドロップしてください。
![375.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7f4d7925-2c60-51f8-eaac-bc1292b53ffa.png)

配置したらデザインビューで左上の「Ellipse」を選択し、
![380.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/82bcfa60-fdf1-4cfe-89ff-9a91b8648f7d.png)
プロパティ ウィンドウの「レイアウト」で以下のように編集します。

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

Row（行）、Column（列）のインデックスは0始まりです。
RowSpan, ColumnSpanはセル結合、何マス分領域を使うかを指定します。
![385.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b24a12ad-53a0-780a-684e-4f2e5d25c6f8.png)

デザインビューで左上の「Ellipse」を選択し、右クリックし、「レイアウト」-「すべてリセット」を選択します。
![390.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5c1e39af-d089-ce52-1d75-5f5c0a4630dd.png)

右の「Ellipse」を選択し、以下のようにプロパティ設定します。

| プロパティ          | 値     |
| ------------------- | ------ |
| Width               | 300    |
| Height              | 150    |
| Row                 | 2      |
| RowSpan             | 2      |
| Column              | 1      |
| ColumnSpan          | 1      |
| HorizontalAlignment | Center |
| VerticalAlignment   | Top    |

![395.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/24398375-f8e3-9aec-d091-36824b883265.png)
Ellipseが期待通り上端・中央、に表示されません。
これはEllipseの周囲に設定されている余白（Margin）のせいです。

デザインビューで右の「Ellipse」を右クリックし、「レイアウト」-「余白のリセット」を選択しましょう。
Marginがクリアされ、期待通りの位置に表示されました。
![400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/81c53e4c-a372-7009-c929-94e0b0b20647.png)

左下の「Ellipse」を選択し、以下のようにプロパティ設定します。

| プロパティ          | 値     |
| ------------------- | ------ |
| Row                 | 3      |
| RowSpan             | 1      |
| Column              | 0      |
| ColumnSpan          | 1      |
| HorizontalAlignment | Center |
| VerticalAlignment   | Center |

デザインビューで左下の「Ellipse」を右クリックし、「レイアウト」-「余白のリセット」を選択します。
MainWindow.xamlを保存し、デザインビューとXAMLビューを見比べてみましょう。
![405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1543a50b-a836-060c-fe9a-96d2cec6c870.png)

# 🐤7. WrapPanel

## ◇7-1. 概要

![wrap-img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a5aa0d89-6157-f9df-37c5-3a34bc7e7629.png)

「WrapPanel」は、コントロールを左から右へ並べていき、右端までいっぱいになったら折り返して次の行に配置します。

## ◇7-2. レイアウトパネル準備

デザインビューでTabControlの右端の「ラップパネル」タブを選択します。
タブの下のグレーの部分（Grid）で右クリックし、「レイアウトの種類の変更」-「WrapPanel」を選択します。
![410_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c879d8ea-1762-43bb-aaa5-e8f426f2eb7b.png)

## ◇7-3. コントロール配置

プロパティ ウィンドウで「名前」に`Wrap1`と入力し、Enterキーを押します。
![415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f07dd4e7-f9bd-6736-cdfe-8e0a9b3470db.png)
　↓
![420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b2f19aae-1ced-ac2b-3fdc-e45276e37d05.png)

WrapPanelに「Button」を1つ、ドラッグ＆ドロップします。
![425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f45cd96d-5dec-c160-a97b-c4697095b3cb.png)

Buttonのプロパティ、「レイアウト」カテゴリで「Width」に`120`を、「Height」に`50`を入力し、Enterキーを押します。
![430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0d48a225-4a74-6eb3-5fe5-0cd41a6f7aa6.png)

## ◇7-4. コード記述

デザインビューでButtonをダブルクリックします。
Button_Clickの処理で`for`と入力し、<kbd>TAB</kbd>キーを2回押してください。
![435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4c634668-2e87-3260-6fa2-87936c59bbcb.png)

Forループのひな型が生成されるので、
![436.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/541a3c54-1b29-fa73-640d-8313fbeffa68.png)
ループの中身に以下を入力してください。
ボタンを生成してラップパネルに追加する処理です。

```vb
Dim btn = New Button

btn.Content = index
btn.Width = 100
btn.Height = 40
If index <= 5 Then
    btn.Foreground = Brushes.ForestGreen
Else
    btn.Foreground = Brushes.OrangeRed
End If
btn.FontSize = 26
btn.Margin = New Thickness(3)

Wrap1.Children.Add(btn)
```

# 🐤8. 最後の仕上げ

「MainWindow.xaml」のタブに戻り、ドキュメント アウトラインで「Window」を選択します。
プロパティ ウィンドウで「共通」-「ResizeMode」を
![440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ade8622e-3a4f-c142-aced-18b2efbdb7c1.png)
「CanResizeWithGrip」に変更します。
![445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/12bbd7a7-59a1-c942-0c6d-6e9a4a0ee4dc.png)
ウィンドウサイズの変更がしやすいようにグリップが表示されます。

# 🐤9. 実行してみる

## ◇9-1. 実行

ツールバーの「開始」ボタンを押します。

## ◇9-2. 「スタックパネル」タブ

![450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cbdc52a0-4aff-b424-f8a3-0901d4cd50f5.png)
ウィンドウサイズを縮めてみます。
![460.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f4cb507f-e4b1-6687-7133-624b585f5fa7.png)

## ◇9-3. 「グリッド」タブ

![455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/80bbc6b2-6a25-0bfb-54c0-90f2d5473d00.png)
ウィンドウサイズを縮めてみます。
![465.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6aab6f52-76ad-07eb-137b-2de22ecfd750.png)
サイズ指定してない左上のEllipseはGridのセルサイズに合わせて伸縮します。
サイズ指定のある下と右のEllipseは欠けてしまいました。

## ◇9-4. 「ラップパネル」タブ

「Button」をクリックします。
![470.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/612ffd30-ff53-a888-378b-9c299b6757f8.png)
ボタンが10個追加されました。
![475.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d262f52d-7fd5-e9e3-adbf-e06a16a7ecac.png)
ウィンドウサイズを変えてみます。
![480.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/110006a5-220a-0ae0-4649-a8af95f6ae20.png)

# 🐤10. 作成コード

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

```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:Sample2"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    ResizeMode="CanResizeWithGrip"
    mc:Ignorable="d">
    <Grid>
        <TabControl>
            <TabItem Header="スタックパネル">
                <StackPanel Background="#FFE5E5E5" Orientation="Horizontal">
                    <Button Content="Button" />
                    <Button Background="Green" Content="Button" />
                    <Button Content="Button" />
                    <Button Background="Red" Content="Button" />
                </StackPanel>
            </TabItem>
            <TabItem Header="グリッド">
                <Grid Background="#FFE5E5E5">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition Height="2*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Ellipse Fill="#FFF4F4F5" Stroke="Black" />
                    <Ellipse
                        Grid.Row="2"
                        Grid.RowSpan="2"
                        Grid.Column="1"
                        Width="300"
                        Height="150"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Top"
                        Fill="#FFF4F4F5"
                        Stroke="Black" />
                    <Ellipse
                        Grid.Row="3"
                        Width="100"
                        Height="100"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Fill="#FFF4F4F5"
                        Stroke="Black" />
                </Grid>
            </TabItem>
            <TabItem Header="ラップパネル">
                <WrapPanel x:Name="Wrap1" Background="#FFE5E5E5">
                    <Button
                        Width="120"
                        Height="50"
                        Click="Button_Click"
                        Content="Button" />
                </WrapPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Window>
```

```vb:MainWindow.xaml.vb
Class MainWindow
    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
        For index = 1 To 10
            Dim btn = New Button

            btn.Content = index
            btn.Width = 100
            btn.Height = 40
            If index <= 5 Then
                btn.Foreground = Brushes.ForestGreen
            Else
                btn.Foreground = Brushes.OrangeRed
            End If
            btn.FontSize = 26
            btn.Margin = New Thickness(3)

            Wrap1.Children.Add(btn)
        Next
    End Sub
End Class
```

---

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