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

# 🐓1. はじめに

今回はレイアウトパネルの組み合わせや、複数のコントロールに同じプロパティ設定を適用したりします。

# 🐓2. 環境

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

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

Visual Studio 2019を起動し、「新しいプロジェクトの作成」ボタンを押します。
「新しいプロジェクトの作成」画面で「WPF アプリ（.NET Framework）」を選択し、「次へ」ボタンを押します。
「プロジェクト名」に`Sample3`と入力し、「作成」ボタンを押します。
![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/33f99e1f-a600-52f9-74ee-8e41781ed8a4.png)

# 🐓4. Grid分割

「Grid」を選択し、下図のように3行に区切ります。
後で調整するのでサイズは大体でよいです。
![300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/728069d9-0cea-a453-7851-e7b2627052fc.png)

ドキュメント アウトラインで「Window」を選択し、プロパティ ウィンドウで「レイアウト」-「Width」に`400`を、「Height」に`300`を入力し、「共通」-「ResizeMode」で`CanResizeWithGrip`を選択します。
![305.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/51c55425-45ff-495f-60f9-0fa8d31ad12c.png)

# 🐓5. Grid, 一番上の行

## ◇5-1. StackPanel配置

「Grid」を選択し、「StackPanel」を一番上の行にドラッグ＆ドロップします。
![310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0e18599f-e47b-6aac-0336-92c51be4afbf.png)
![315.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e61325ac-3f1a-fe1a-38bf-6b7e2822ed25.png)

StackPanelのプロパティを以下のように設定します。

| プロパティ（ブラシ） | 値   |
| ---------- | ---- |
| Background        | SkyBlue    |

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

StackPanelを右クリックし、「レイアウト」-「すべてリセット」を選択します。
![320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a4fcea44-1eb1-ca88-5e37-15fff9129bf8.png)

## ◇5-2. Button配置

「Button」をドキュメント アウトラインの「StackPanel」にドラッグ＆ドロップします。
![325.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b71a2b24-515d-3506-35e5-05cbbe58c51b.png)

デザインビューで「Button」を選択し、<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>を押し、
![330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/75bcf9f3-3d95-b16e-1f7f-9f7c1c90ccd3.png)
<kbd><kbd>Ctrl</kbd> + <kbd>V</kbd></kbd>を2回押します。
![335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9e75d917-db9a-77e9-c736-bcf7d356eace.png)

## ◇5-3. Margin設定

ボタンが左端から隙間なく並んでいます。ボタン間に余白をとるようにしましょう。

ドキュメント アウトラインで一番上の「Button」をクリックし、一番下の「Button」をShiftを押しながらクリックします。
これで3つのボタンが選択状態になります。
![340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a38d71e8-66ea-e757-84ed-02f4a36d7bab.png)

この状態でプロパティ ウィンドウの「レイアウト」-「Margin」の左矢印に`16`を入力してEnterキーを押します。
デザインビューを見るとボタンの左に余白ができました。
XAMLビューを見ると「Margin」の値が`16,0,0,0`になりました。
これは左、上、右、下の余白設定値です。
![345.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/09464d9e-0bf5-9814-208c-1fd85a1f0db0.png)

次は「Margin」の右矢印に`16`を入力してEnterキーを押します。
デザインビューを見るとボタンの右に余白ができました。
XAMLビューを見ると「Margin」の値が`16,0`になりました。
これは左右、上下の余白設定値です。Marginの設定方法その2です。
![350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8a009728-1624-f97c-0546-789d89fc8084.png)

「Margin」の上矢印に`16`を入力してEnterキーを押します。
XAMLビューを見ると「Margin」の値が`16,16,16,0`になりました。
![355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7ba31297-39e5-48c5-cd79-9e850cbd779a.png)

「Margin」の下矢印に`16`を入力してEnterキーを押します。
XAMLビューを見ると「Margin」の値が`16`になりました。
上下左右すべて同じ値にするときに使う、Marginの設定方法その3です。

参考：[Marginプロパティ](https://qiita.com/Kosen-amai/items/75136edba4f8ef90d26f)
![360.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a9b42c40-fb6d-06e6-1ee3-2a8537b1040f.png)

ドキュメント アウトラインで選択状態の「Button」を右クリックし、「レイアウト」-「余白のリセット」を選択します。
![365.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7d99a7d0-2adf-48d8-f512-edc0b4f6cc00.png)

余白がなくなりました。
![370.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f82400f4-e93a-d06a-47c2-91104ca7871f.png)

## ◇5-4. Grid行高さ変更

行の高さを割合指定から中の要素に合わせて自動調整するように変更します。
XAMLビューで一番上の「RowDefinition」を選択します。
![375.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/09bbeb25-75ec-c853-a72c-c7f9e3a38c07.png)

プロパティ ウィンドウで「レイアウト」-「Height」の「Star」を「Auto」に変更します。
行の高さに合わせて中のコントロール（Button）の高さが調整されていた状態から、
中のコントロールに合わせて行の高さが決まるようになりました。
![380.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2eff89d2-4dd3-089e-7b25-b9e627983907.png)

# 🐓6. Grid, 真ん中の行

## ◇6-1. StackPanel配置

「Grid」を選択し、「StackPanel」を真ん中の行にドラッグ＆ドロップします。
![385.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fce23b30-cf40-e10d-7e5d-46035527952e.png)

StackPanelのプロパティを以下のように設定します。

| プロパティ（ブラシ） | 値   |
| ---------- | ---- |
| Background        | Pink    |

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

StackPanelを右クリックし、「レイアウト」-「すべてリセット」を選択します。
![390.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8d24da70-8d06-9623-0710-c0a39ac3867d.png)

## ◇6-2. Button配置

「Button」をデザインビューのピンクの「StackPanel」にドラッグ＆ドロップします。
![395.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1c4cf1a5-7e05-4616-8ca7-7b6f2c7213e3.png)

デザインビューで「Button」を選択し、Ctrl + Cを押し、Ctrl + Vを2回押します。
![400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9e6d4781-0c21-5b72-c7af-89a5921ce823.png)

ドキュメント アウトラインで一番上のボタンをクリックし、Shiftを押しながら一番下のボタンをクリックし、3つのボタンを選択状態にします。
![405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9aaf7099-f87c-54ca-c42f-4327cb35b8c4.png)

Ctrl + Cを押し、Ctrl + Vを4回押します。
![410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7557d62d-4709-ca35-f2be-d98b564e44ce.png)

## ◇6-3. スクロール対応

ボタンがたくさんあるのでスクロールバーを付けます。
ドキュメント アウトラインで「StackPanel」を右クリックし、「グループに含める」-「ScrollViewer」を選択します。
（「グループに含める」はコントロールを配置した後に親のレイアウトパネルを追加したくなったときに使えます）
![415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1a8bf624-4f08-3bef-496a-d7e6d7e17efe.png)

「StackPanel」が「ScrollViewr」の中に入ります。
![420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/965187c5-1464-4c1f-90d9-9978ea4f7d87.png)

「ScrollViewr」の中に入れたタイミングで「StackPanel」にサイズ指定が付いてしまい、ボタンの右側が見切れています。
ドキュメント アウトラインで「StackPanel」を右クリックし、「レイアウト」-「すべてリセット」を選択しましょう。
![425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6eae9bc3-f48a-47ef-e5f8-9df779a86808.png)
![430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b6af9e4f-d52f-5d06-384f-1a1fa5e1f07b.png)

一番上のボタンを押したら一番下までスクロールする処理を書きます。
まず「ScrollViewr」を選択し、プロパティ ウィンドウで「名前」に`Scroll1`と入力してEnterキーを押します。
![435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c7799cef-a780-27d5-6398-2526208ab64c.png)

一番上の「Button」を選択し、Clickの処理を作成します。
![440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/21679b0d-035d-5673-720b-9c565cfef025.png)

Button_Clickの処理に以下を入力します。

`Scroll1.ScrollToEnd()`

## ◇6-4. スタイル設定

先ほどとは違う方法でボタンに一括でプロパティ設定します。
XAMLビューで「Window」開始タグの終わりと「Grid」開始タグの間に行を空け、
![445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5560466e-b986-3442-d37c-b62dd93875e7.png)

`<w`を入力します。
「Window.Resources」が選択状態になったら（なっていなかったら↑↓で選択し）、
![450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/19c4bd13-a0fa-43d7-e8d2-6e3fd9586f09.png)
`>`を入力します。
そうすると、閉じタグまで入力してくれて真ん中にテキストカーソルが位置付けられるため、
![455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/38f706da-774f-2641-19f1-23cf1b36b9f7.png)
Enterキーで改行します。
`<st`を入力し、「Style」が選択状態になったら
![460.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b36f11ad-ec16-75f3-5f82-f1d5423f2abd.png)
`>`を入力します。
![465.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/50a550bd-fe54-934f-f072-fd68216bd3f2.png)
改行し、「Style」の開始タグの中に` tar`と入力します。
「TargetType」が選択状態になったら
![470.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3f39bbb6-2ebb-7ee5-edc9-08eb78a314d8.png)
`=`を入力します。
![475.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/60fb3ccd-f2d5-8845-8e90-d93cb6eaee56.png)
「""」の中に`but`を入力します。
「Button」が選択状態になったら
![480.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/40c22c7b-3012-e642-d412-9abc6197f981.png)
TABキーかEnterキーを押します。
![485.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/43a8c6fa-bc7a-1bbc-7cfc-f50bd9278a3b.png)
「TargetType="Button"」は、このスタイルは「Button」に適用します、という意味です。

適用するプロパティを書きましょう。
「Style」タグの中に`<set`を入力し、「set」が選択状態になったら
![490.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/739b7ce3-7583-e7af-6104-24110dc75d27.png)
TABキーを2回押します。
「Background」を「Red」にする「Setter」が追加され、全部のボタンが真っ赤になりました。
![495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c1a1c45b-a570-c45c-c3d4-dad8751d1629.png)
「Property」の「Background」部分が選択状態になっているので、そのまま`Margin`と入力し、TABキーを押してください。
そうすると「Value」の「Red」部分に選択状態が移るので、そのまま`8`と入力してEnterキーを押してください。
![500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2e8cd238-5494-1f6a-2092-3e10cc6a977b.png)
すべてのボタンに一括で「Margin」を設定できました。

引き続き、もう1つプロパティを追加します。
![505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fc96fbba-77fa-ffd4-abff-86d89042108e.png)
`<set`でTABキー2回、`wi`で「Width」が選択状態になるのでTABキーで確定、
さらにTABキーで「Value」の値「Red」が選択状態になるので、`200`を入力してEnterキーを押します。
![510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/57bf0fb4-9da2-1cf2-ed10-8858f079ecf6.png)
上の横並びボタン幅は直接サイズ指定したものが採用されていて、
下の縦並びボタン幅はサイズ指定していないのでスタイルの設定が採用されています。

次はスタイルに名前を付けて利用してみます。
スタイルの定義をコピペします。
![520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f4ffeace-58af-1e6b-ed6e-9b7f04987c6c.png)
　↓
![525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4d06bbde-464d-899a-c2bb-99a54d16b048.png)

2つ目のStyle定義に`x:k`を入力し、「Key」が選択されたら確定します。
![530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cd72b163-1f47-ecb8-5a3d-24ce95f14e7a.png)
「""」の中に`PikaPikaButton`と入力します。
![535.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8d66dc6c-b5b1-3c27-2e4d-4349cfad461a.png)
　↓
![540.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3909bb47-4925-bd52-2c18-9d943f290121.png)

新たな「Setter」を追加し、
![545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d2706aee-9c61-2274-a4bb-563a1f1d8ec5.png)
「Background」プロパティに`Gold`を設定します。
![550.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/691f96fe-daf9-ac94-a9ec-353eb25bef64.png)

ドキュメント アウトラインで1つ目の「Button」をクリックし、3つ目の「Button」をCtrlを押しながらクリックします。
これで2つのボタンが選択状態になります。
![555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/aba6f9eb-1407-7a19-0030-ef32c93570c5.png)
プロパティ ウィンドウで「その他の指定」-「Style」の右端の「■」をクリックし、「ローカル リソース」-「PikaPikaButton」を選択します。
![560.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4ff800d2-bcfc-ae1e-b3ae-2890da0c1896.png)
デザインビューで2つの「Button」の色が変わり、XAMLビューでも「Button」に「Style」指定が追加されています。
![565.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/35cfda3f-e1dd-9980-4322-f596611e268a.png)

今回は画面の「Window.Resources」にスタイルの定義を入れましたが、
複数の画面で共通して使いたいスタイルの場合は「Application.xaml」の
「Application.Resources」の中に入れます。
![600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/553a30f1-8571-535b-e001-b0fd709195cb.png)

# 🐓7. Grid, 残りの行高さ調整

XAMLビューで一番下の「RowDefinition」を選択し、プロパティ ウィンドウの「レイアウト」-「Height」で
![605_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ac275a0e-b12d-bb81-c073-bf07091703af.png)
`16`, `Pixel`を設定します。
![610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0991e130-4572-7334-5209-9d4f896802de.png)

XAMLビューで真ん中の「RowDefinition」を選択し、プロパティ ウィンドウの「レイアウト」-「Height」の右端の「■」をクリックし、
![615.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/56e637df-f5df-18bc-c4bf-856b54b7dc9b.png)
「リセット」を選択します。
![620.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fec990cc-883b-eb6e-904d-89c5e608a149.png)
完成です。
![625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6c2186d5-53a4-8d9b-d60b-80d3a0ea870a.png)

# 🐓8. 実行してみる

ツールバーの「開始」ボタンを押します。
画面が表示されました。
1番上の金色ボタンを押してみます。
![700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/217b2bd3-45de-4313-664c-81509ce71519.png)
下までスクロールしました。
![705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7598848f-adc3-1c80-6187-db1b756037b8.png)
ウィンドウサイズを変えてみます。
![710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/57ab70e9-fb3d-3524-906f-d6e38e709f04.png)

# 🐓9. 作成コード

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

```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:Sample3"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="400"
    Height="300"
    ResizeMode="CanResizeWithGrip"
    mc:Ignorable="d">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="8" />
            <Setter Property="Width" Value="200" />
        </Style>
        <Style x:Key="PikaPikaButton" TargetType="Button">
            <Setter Property="Margin" Value="8" />
            <Setter Property="Width" Value="200" />
            <Setter Property="Background" Value="Gold" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="16" />
        </Grid.RowDefinitions>
        <StackPanel Background="SkyBlue" Orientation="Horizontal">
            <Button Width="75" Content="Button" />
            <Button Width="75" Content="Button" />
            <Button Width="75" Content="Button" />
        </StackPanel>
        <ScrollViewer x:Name="Scroll1" Grid.Row="1">
            <StackPanel Background="Pink">
                <Button
                    Click="Button_Click"
                    Content="Button"
                    Style="{DynamicResource PikaPikaButton}" />
                <Button Content="Button" />
                <Button Content="Button" Style="{DynamicResource PikaPikaButton}" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
                <Button Content="Button" />
            </StackPanel>

        </ScrollViewer>

    </Grid>
</Window>
```

```vb:MainWindow.xaml.vb
Class MainWindow
    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
        Scroll1.ScrollToEnd()
    End Sub
End Class
```

---

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