Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Visual BasicAdvent Calendar 2020

Day 16
@Kosen-amai(Qiiwi)

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

Last updated at Posted at 2020-12-15

🐤1. はじめに

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

🐤2. 環境

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

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

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

「新しいプロジェクトの作成」画面で「WPF アプリ（.NET Framework）」を選択し、「次へ」ボタンを押します。
200.png

「プロジェクト名」にSample2と入力します。
「作成」ボタンを押します。
205.png

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

◇4-1. 配置

ツールボックスから「TabControl」をGrid上にドラッグ＆ドロップします。
210.png
215.png

ドキュメント アウトラインで「TabControl」を右クリック、「レイアウト」-「すべてリセット」を選択します。
（TabControlはTabItemを内包していますが、TabControlの部分で右クリックしたいため、この場合はデザインビューよりドキュメント アウトラインを使った方が選択しやすいです。）
220.png
TabControlの位置やサイズがクリアされ、画面いっぱいに表示されます。
225.png

◇4-2. タブの追加

ドキュメント アウトラインで「TabControl」を右クリック、「TabItemの追加」を選択します。
230.png

タブが3つになりました。
235.png

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

デザインビューで一番左のTabItemを選択します。
プロパティウィンドウの「共通」-「Header」にスタックパネルと入力してください。
240.png
続いて真ん中のTabItemを選択しHeaderにグリッドを、一番右のTabItemのHeaderにラップパネルを入力してEnterキーを押してください。
245.png

デザインビューで見ると右端タブの「ラップパネル」の文字が見切れています。
いったんMainWindow.xamlを保存してください。XAML Stylerの機能でXAMLが整形されて見やすくなります。
そしてXAMLビューでTabItemの内容を見てみると幅（Width）が決め打ちされていることがわかります。
246.png
他の2つのタブと同じように、サイズ指定をやめればテキストのサイズに合わせて自動的に調整してくれそうです。
デザインビューで「ラップパネル」のタブを右クリックし、「レイアウト」-「すべてリセット」を選択します。
247.png
タブのテキストが全部表示されるようになりました。
248.png

🐤5. StackPanel

◇5-1. 概要

stack-img.png

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

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

デザインビューでTabControlの左端の「スタックパネル」タブを選択します。
タブの下のグレーの部分（Grid）で右クリックし、「レイアウトの種類の変更」-「StackPanel」を選択します。
250.png

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

ツールボックスの「Button」を4つ、デザインビューのStckPanelにドラッグ＆ドロップします。
255.png
デザインビューでボタンが4つ、上部に並びました。
XAMLビューで「StackPanel」の中に「Button」が入っています。
260.png

デザインビューで上から2番目のButtonを選択し、プロパティ ウィンドウの「ブラシ」-「Background」の右端にある□をクリックします。
265.png

そして「カスタム式」をクリックし、
270.png
greenと入力してEnterキーを押します。
275.png
ボタンが緑色になりました。
280.png

一番下のButtonを選択し、同じようにBackgroundにカスタム式でredと入力してEnterキーを押してください。
285.png

◇5-4. 整列方向変更

デザインビューでボタンの下の余白部分（StackPanel）を選択し、プロパティ ウィンドウの「レイアウト」-「Orientation」を「Vertical」から「Horizontal」に変更します。
縦並びだったボタンが横並びに変わりました。
290.png

🐤6. Grid

◇6-1. 概要

grid-img.png

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

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

デザインビューでTabControlの中央の「グリッド」タブを選択します。
TabItemの中身は既定でGridのため、そのまま使います。
300.png

◇6-3. 行・列の分割

行・列の分割はデザインビュー上でできます。
Gridを選択した状態で、下図の緑色の部分あたりにマウスカーソルを持っていくと、マウスカーソルに「+」マークが付きます。ここが分割操作できる場所です。
305.png

Gridの上端の中央あたりでマウスカーソルに「+」が表示されたらクリックしてください。
310.png

2列になりました。
XAMLビューを見てみると、Gridタグの中に何やら追加されています。
315.png

「ColumnDefinition」タグが2つあるので、2列という意味です。
「Width」の「*」付きの数字は割合です。
2つの列幅を同じにしてみます。
まず、XAMLビューで1つ目の「ColumnDefinition」タグをクリックします。
320.png

プロパティ ウィンドウで「レイアウト」-「Width」の右端の「■」をクリックし、「リセット」を選択します。
（「□」は既定値、「■」は既定値から変更されていることを意味します）
325.png

プロパティ ウィンドウの「Width」が1, Starになり、XAMLビューの「ColumnDefinition」タグから「Width」が消えました。
330.png

もう1つの「ColumnDefinition」も同様にWidthをリセットしてください。
これで2列の幅が同じになります。
335.png

次は行を増やします。
Gridの左端の適当な場所でマウスカーソルに「+」が表示されたらクリックしてください。
340.png
3行になるよう、2箇所区切りましょう。
345.png
XAMLビューを見ると「RowDefinition」タグが3つできました。

XAMLビューで1つ目の「RowDefinition」タグをクリックします。
プロパティ ウィンドウで「レイアウト」-「Height」の右端の「■」をクリックし、「リセット」を選択します。
350.png
残りの2つの「RowDefinition」も同様に「Height」をリセットします。
355.png
デザインビューで各行に「1*」が表示され、3つとも同じ高さになりました。

XAMLビューを使って行をもう1つ増やしてみましょう。
3つのうちどれでもいいので「RowDefinition」の行にテキストカーソルを移動してください。
360.png
そこでCtrl + Cを押し、Ctrl + Vを押してください。
「RowDefinition」のタグが増えて4行になりました。
365.png

行の高さを変えてみます。
XAMLビューで一番下の「RowDefinition」を選択し、プロパティ ウィンドウで「レイアウト」-「Height」に2を入力してEnterキーを押します。
370.png
デザインビューの「2*」は「1*」の2倍のサイズという意味です。

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

Gridにコントロールを配置してみます。
ツールボックスの「すべてのWPFコントロール」から「Ellipse」を3つ、矢印のあたりにドラッグ＆ドロップしてください。
375.png

配置したらデザインビューで左上の「Ellipse」を選択し、
380.png
プロパティ ウィンドウの「レイアウト」で以下のように編集します。

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

Row（行）、Column（列）のインデックスは0始まりです。
RowSpan, ColumnSpanはセル結合、何マス分領域を使うかを指定します。
385.png

デザインビューで左上の「Ellipse」を選択し、右クリックし、「レイアウト」-「すべてリセット」を選択します。
390.png

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

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

395.png
Ellipseが期待通り上端・中央、に表示されません。
これはEllipseの周囲に設定されている余白（Margin）のせいです。

デザインビューで右の「Ellipse」を右クリックし、「レイアウト」-「余白のリセット」を選択しましょう。
Marginがクリアされ、期待通りの位置に表示されました。
400.png

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

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

デザインビューで左下の「Ellipse」を右クリックし、「レイアウト」-「余白のリセット」を選択します。
MainWindow.xamlを保存し、デザインビューとXAMLビューを見比べてみましょう。
405.png

🐤7. WrapPanel

◇7-1. 概要

wrap-img.png

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

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

デザインビューでTabControlの右端の「ラップパネル」タブを選択します。
タブの下のグレーの部分（Grid）で右クリックし、「レイアウトの種類の変更」-「WrapPanel」を選択します。
410_.png

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

プロパティ ウィンドウで「名前」にWrap1と入力し、Enterキーを押します。
415.png
　↓
420.png

WrapPanelに「Button」を1つ、ドラッグ＆ドロップします。
425.png

Buttonのプロパティ、「レイアウト」カテゴリで「Width」に120を、「Height」に50を入力し、Enterキーを押します。
430.png

◇7-4. コード記述

デザインビューでButtonをダブルクリックします。
Button_Clickの処理でforと入力し、TABキーを2回押してください。
435.png

Forループのひな型が生成されるので、
436.png
ループの中身に以下を入力してください。
ボタンを生成してラップパネルに追加する処理です。

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
「CanResizeWithGrip」に変更します。
445.png
ウィンドウサイズの変更がしやすいようにグリップが表示されます。

🐤9. 実行してみる

◇9-1. 実行

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

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

450.png
ウィンドウサイズを縮めてみます。
460.png

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

455.png
ウィンドウサイズを縮めてみます。
465.png
サイズ指定してない左上のEllipseはGridのセルサイズに合わせて伸縮します。
サイズ指定のある下と右のEllipseは欠けてしまいました。

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

「Button」をクリックします。
470.png
ボタンが10個追加されました。
475.png
ウィンドウサイズを変えてみます。
480.png

🐤10. 作成コード

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

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>
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

＜　　1　　[2]　　3　　　4　　＞

6
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?