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

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

こんにちは!

プログラム学習中の@dynaです!

 

この記事は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

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

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

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

 

プロジェクトを作成

 

Windowsフォームアプリを選択

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

 

Windowsフォームアプリを選択

 

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

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

フォームアプリが開く

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

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

 

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

PictureBoxを設定する

・ボタン4つ作成

Clear the pictureSet the background colorCloseShow 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

色を選択できます。

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

ColorDialog

レイアウトの作成

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

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

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 pictureClear the pictureSet the background colorCloseとボタンを作成し、それぞれテキストとNameプロパティを設定します。)

(NameプロパティはshowButton 、 clearButton、backgroundButtoncloseButton)と設定します。

Nameプロパティ

 

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

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

レイアウト

OpenFileDialog と ColorDialog を追加

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

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


コードを書く

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

(言語はVBです)

 

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

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

 

基本的にチュートリアル通りに記載してあり、コメントアウトで内容を記載してあります。

 

ここまで書いて、実行(デバック)をすると、ピクチャボックスの位置の設定ミスでこんな感じになりました(-_-;)

下段が画像ですが、ボタンも切れてるし変な配置になりました(-_-;)

失敗

 

その後修正してこちらに。

修正後
修正後2

こんな感じでできました!!

 

ここまで読んで下さりありがとうございます。

 

<あわせて読みたい>