*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*

VB.NET にて、コントロールをフォームサイズに合わせてスケーリング
方法１ ＜Anchorプロパティでスケーリング＞

*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*

「VB.NETで フォームやコントロールのスケーリング」における一連の説明（知恵ノート）において、ここでは、「VB.NET にて、コントロールをフォームサイズに合わせてスケーリング 方法１ ＜Anchorプロパティでスケーリング＞」について説明します。

 

 

総合の目次

本ページを含めた関連事項の総合目次です。

http://note.chiebukuro.yahoo.co.jp/detail/n28516

関連サンプル

 

はじめに

ユーザーがフォームのサイズを変更した時に、そのフォームサイズに合わせて、コントロールのサイズを変更する方法について解説します。
幾つかの方法を用意しましたが、本サンプルでは、コントロールのAnchorプロパティを使ってスケーリングを行ないます。

関連サンプルと比べた特徴

フォームのサイズに合わせて、各コントロールのサイズを変更するには、コントロールの配置位置やサイズを比率計算で定めます。
しかし、条件によっては、比率計算をしなくても、コントロールのAnchorプロパティを使えば、フォームにコントロールサイズを合わせられます。
Anchorプロパティとは、フォームのサイズが変更された時に、コントロールのサイズがどのように変化するかを決定するプロパティです。
もう少し具体的に説明しますと、フォームサイズ変更時に、コントロールの配置位置を左端に合わせるのか、右端にあわせるのか、上端に合わせるのか、下端に合わせるのかを指定するプロパティです。
（Anchorプロパティの意味が、わかり辛い場合は、本サンプルでのAnchorプロパティの値を実際に変えてみて、どのようなものなのかを確認してみて下さい）

ここでのサンプルでは、そのAnchorプロパティを使って、フォームサイズ変更に伴うコントロールサイズの調整を行ないます。

なお、比率計算による調整する方法（本サンプルとは別の方法）については、別にサンプルを用意しましたので、そちらを参照して下さい。
その比率計算による方法のほうは、上記「関連サンプル」の方法２です（２段階での説明なので、ステップ１とステップ２の両方を参照）。

サンプルコード

ここで取り上げるサンプルは、なるべく複雑にならない範囲で、実際にサイズ変更を確かめられるものとします。

本サンプルの仕様概要

ユーザーがフォームの大きさを大きくすると、それに合わせてピクチャボックスやボタンも大きくなります。
同じく、ユーザーがフォームを小さくすると、それに合わせてピクチャボックスやボタンも小さくなります。

なお、ピクチャボックスに何も表示していないと、実行時にピクチャボックス自体が見えません。
それでは、実行時に、フォームサイズの変化に伴い、ピクチャボックスのサイズが調整されているのか確認することは無理です。
よって、本サンプルでは、ピクチャボックスに画像ファイルの画像を貼り付けるものとします。
よって、適当な画像ファイルを用意して下さい。
ここでは、その画像は、
C:\背景.bmp
とするものとします。

フォームデザイン等の前準備

コードを記述する前に、フォームのデザイン作成などの、以下の前準備を行なって下さい。


<プロジェクトの作成>

本サンプルの確認用に、新規にプロジェクトを作成して下さい。
プロジェクトの種類は、「Windowsフォームアプリケーション」です。


<フォームのデザイン>

デザイン画面で、ピクチャボックス（pictureBox）を１個と、ボタン（button）を１個貼り付けて下さい。
なお、ボタン（button）は、フォームの右下の隅に配置して下さい。

 

<イベントプロシージャの作成>

また、デザイン画面のフォーム（ボタンやピクチャボックスが貼り付いていない無地の部分）をダブルクリックすることにより、Form1_Load() メソッドを作って下さい。

ソースコード

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        '------------
        ' ボタン等のコントロールに対する通常の処理内容
        '------------

        ' ボタンへの表示内容を指定
        Button1.Text = "OK"

        ' ピクチャボックスに表示する画像ファイルを指定
        PictureBox1.Image = New Bitmap("C:\背景.bmp") ' 画像

        ' ピクチャボックスの範囲内に画像が収まる表示にするように指定
        PictureBox1.SizeMode = PictureBoxSizeMode.Zoom

 

        '------------
        ' スケーリングに対する処理内容
        '------------

        ' ピクチャボックスの上下左右をフォームの上下左右に合わせるように指定
        PictureBox1.Anchor = (AnchorStyles.Bottom Or AnchorStyles.Right Or AnchorStyles.Top Or AnchorStyles.Left)

        ' ボタンの下と右を、フォームの下と右に合わせるように指定
        Button1.Anchor = (AnchorStyles.Bottom Or AnchorStyles.Right)

    End Sub

End Class

実行結果

マウスでフォームのサイズを変更すると、それに合わせてコントロールのサイズも調整されます。

 

Anchorプロパティへの設定値

ここで取り上げましたサンプルプログラムの通り、コントロールのAnchorプロパティへの設定値を変えれば、フォームのサイズが変更された時の、コントロールの配置位置の基準を決められます。
すなわち、フォームサイズが変更された時に、コントロールの配置位置は、フォームの右端を基準に移動するのか。
それとも左端か、上端か、下端かをAnchorプロパティで決められます。
その具体的設定値は以下の通りです。

AnchorStyles 列挙体のメンバー

Anchorプロパティへの設定値は、AnchorStyles 列挙体です。
そのAnchorStyles 列挙体は、以下のメンバーを持ちます。
実際にサンプルでのAnchorプロパティの値を変えてみて、どのようになるのか確認してみて下さい。


Top

コントロールがそのフォームの上端に固定されています。
すなわち、フォームサイズが変更された時に、フォームの上端から、コントロールの上端までの距離が固定で維持されます。


Bottom

コントロールがそのフォームの下端に固定されています。
すなわち、フォームサイズが変更された時に、フォームの下端から、コントロールの下端までの距離が固定で維持されます。


Left
コントロールがそのフォームの左端に固定されています。
すなわち、フォームサイズが変更された時に、フォームの左端から、コントロールの左端までの距離が固定で維持されます。


Right
コントロールがそのフォームの右端に固定されています。
すなわち、フォームサイズが変更された時に、フォームの右端から、コントロールの右端までの距離が固定で維持されます。


None
コントロールがそのフォームの端に固定されていません。
すなわち、フォームサイズが変更された時に、フォームのどの端からも、コントロールまでの距離が維持されない。
（わかり辛いと思いますので、例えばフォームサイズを大きくした場合を説明しますと、各コントロールがフォームの中央に集まっている状態になります）

左下に固定する場合

本サンプルでは、ボタンをフォームの右下の隅に、ボタンを固定する場合のサンプルでした。
ここでは、<< 左下 >> に固定させたい場合の設定方法を記します。


        ' ボタンの下と左を、フォームの下と左に合わせるように指定
        Button1.Anchor = (AnchorStyles.Bottom Or AnchorStyles.Left)

 

右下に固定する場合

ここでは、ボタンを<< 右下 >> に固定させたい場合の設定方法を以下に記します。
（すなわち、本サンプルと同じ場合です）


        ' ボタンの下と右を、フォームの下と右に合わせるように指定
        Button1.Anchor = (AnchorStyles.Bottom Or AnchorStyles.Right)

 

左上に固定する場合

ボタンを<< 左上 >> に固定させたい場合の設定方法を以下に記します。

        ' ボタンの上と左を、フォームの上と左に合わせるように指定
        Button1.Anchor = (AnchorStyles.Top Or AnchorStyles.Left)

 

右上に固定する場合

ボタンを<< 右上 >> に固定させたい場合の設定方法を以下に記します。


        ' ボタンの上と右を、フォームの上と右に合わせるように指定
        Button1.Anchor = (AnchorStyles.Top Or AnchorStyles.Right)

 

さいごに

ここで紹介しました「Anchorプロパティでスケーリングを行なう方法」は、手軽に行なえると言う長所があります。
しかし、各種コントロールが複雑に配置されている場合は、その配置位置や大きさを比率計算でスケーリングを行なう必要があります。
その比率計算による方法は、次回のサンプルで記します。