VB (Visual Basic)でPictureBoxを使いピクチャビューアーのチュートリアルをしてみるが・・・

こんにちは！

この記事はVB学習、チュートリアル作成のpart2になります。

フォームに写真を表示するアプリを作成してみます。

学習したチュートリアルはこちら↓

https://docs.microsoft.com/ja-jp/visualstudio/get-started/csharp/tutorial-windows-forms-picture-viewer-layout?view=vs-2022

Microsoftの公式チュートリアルさんです。

この記事は、躓いたところや疑問に思ったところを調べながら記載しているので、基本手順は公式さんをご覧いただければ幸いです。

環境
・Windowsフォームアプリ
・visualstudio　2022　無料版
・Windows　OS

1. チュートリアル手順に沿って新規プロジェクト立ち上げ
- 1.1. Windowsフォームアプリを選択
2. 写真やボタンのレイアウトに使うもの
3. レイアウトの作成
4. コードを書く

チュートリアル手順に沿って新規プロジェクト立ち上げ

まず、新規プロジェクトを立ち上げます。

「新しいプロジェクトの作成」をクリックします。

Windowsフォームアプリを選択

アイコンにVBと書かれているWindowsフォームアプリを選択します。

form1という形で開きました。

ここに写真を表示するチュートリアルを試していきます。

写真やボタンのレイアウトに使うもの

次に、写真を表示するために以下のレイアウトを作成していきます。

・写真やボタンを表示する場所の設定をTableLayoutPanelを使って設定する

・PictureBoxを設定する

・ボタン4つ作成

（Clear the picture、Set the background color、Close、Show a picture）

・フォームに OpenFileDialog コンポーネントと ColorDialog コンポーネントを追加する

設置する前に、上記のものがどういうものかさらっと調べてみます。

TableLayoutPanel

TableLayoutPanel
内容を行と列から成るグリッドに動的にレイアウトするパネルを表します。
引用元：https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.tablelayoutpanel?view=windowsdesktop-6.0

文だとわかりにくいのですが、テーブルレイアウトのように列や行を追加・削除できるレイアウトのようです。

こんな形で自由に作成できます。

PictureBox

Windows フォームの PictureBox コントロールは、ビットマップ、GIF、JPEG、メタファイル、またはアイコン形式でグラフィックスを表示するために使用されます。
引用元：https://docs.microsoft.com/ja-jp/dotnet/desktop/winforms/controls/picturebox-control-windows-forms?view=netframeworkdesktop-4.8

PictureBoxのコントロールで画像を表示させるイメージです。

OpenFileDialog コンポーネントと ColorDialog コンポーネント

OpenFileDialog
ユーザーにファイルを開けるように指示するダイアログボックスを表示します。
引用元：https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.openfiledialog?view=windowsdesktop-6.0

よく見る、「ファイルを開く」「ファイルを選択する」のような形です。

こんな形で表示できます。

ここで指定した画像を、 PictureBox で表示します。

ColorDialog
使用できる一連の色と、ユーザーがカスタムカラーを定義するために使用できるコントロールを表示するコモンダイアログボックスを表します。
引用元：https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.colordialog?view=windowsdesktop-6.0

色を選択できます。

これは背景色を変更できる仕様にするために今回使うようです。

レイアウトの作成

チュートリアルに沿ってレイアウトを設定していきます。

（※チュートリアルをしていて個人的に分かりにくいと思ったところ等記載していますので、多少手順が飛んでいます。）

TableLayoutPanel の設定

ツールボックスから、 TableLayoutPanelをドロップして設定します。

列と行の幅を整えます。

フォーム上に先ほどの TableLayoutPanel の右上にある▶をクリックすると、編集項目が出てきます。

「行および列の編集」をクリックします。

表示のところで、列、行をそれぞれチュートリアル通りにパーセントで設定します。

行・・・ Row1 を 90% 、Row2 を 10%で設定。

列・・・Column1を15%、Column2を85％

実は私はボタンやピクチャの配置設定がうまくいかなくて、最終的に少しレイアウト変えました((;’∀’)

PictureBoxの設定

先ほどのテーブルレイアウト上にPictureBoxを設定します。

ツールボックスからPictureBoxをドロップし、フォームの一番左に置きます。

プロパティで、サイズを変更します。

テーブルレイアウトいっぱいにしたいので、PictureBoxを選択したまま、プロパティの中からDockを選び、Fillに設定します。

親コンテナにドッキング、という意味になるようです。

ColumnSpan プロパティを 2 に設定すると、2列分、ピクチャボックスになります。

ボタンの追加

ボタン4つを追加します。

フォームの一番下の行にツールバーのbuttonを4つ追加します。

（ Show a picture、Clear the picture、Set the background color、Closeとボタンを作成し、それぞれテキストとNameプロパティを設定します。）

（NameプロパティはshowButton 、 clearButton、backgroundButton、closeButton）と設定します。

チェックボックスも追加します。

こんな形で作成しました。

OpenFileDialog と ColorDialog を追加

ツールボックスの中にある、 OpenFileDialog と ColorDialogを追加します。

すると、フォームの枠下に表示されます。

コードを書く

次に、ボタンを押したらファイルを開く、ピクチャボックスに表示させる、閉じる、背景色を変える、という動作を記載していきます。

（言語はVBです）

各ボタンをクリックしていくと、イベントハンドラが追加されるので、その中に以下を記載していきます。

※Private Sub～はボタンをフォームでクリックすると自動で入るので、その中のコメント以下の処理を記載します。


    Private Sub showButton_Click(sender As Object, e As EventArgs) Handles showButton.Click
        '[ファイルを開く]ダイアログを表示します。ユーザーが[OK]をクリックした場合は、選択した画像を読み込みます。
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    End Sub

    Private Sub clearButton_Click(sender As Object, e As EventArgs) Handles clearButton.Click
        Dim null As Image = Nothing
        '写真をクリアする
        PictureBox1.Image = null
    End Sub

    Private Sub backgroundButton_Click(sender As Object, e As EventArgs) Handles backgroundButton.Click
        ' 背景色の変更
        If ColorDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.BackColor = ColorDialog1.Color
        End If
    End Sub

    Private Sub closeButton_Click(sender As Object, e As EventArgs) Handles closeButton.Click
        Me.Close()
    End Sub

    Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
        'CheckBox1にチェックがあるなら、 PictureBox1.SizeModeはストレッチ、ないならノーマル
        If CheckBox1.Checked Then
            PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
        Else
            PictureBox1.SizeMode = PictureBoxSizeMode.Normal
        End If
    End Sub