フォームでのアンカーによるレイアウト調整

 フォーム上の各コントロールの表示位置や大きさはフォームのサイズを変更しても通常は変わりません。しかしアンカーを利用することにより、コントロールの表示位置や大きさをフォームの拡大縮小に応じて適宜変化させることができます。以下ではその設定方法と効果を見てみます。

f:id:accs2014:20180722113334p:plain:right:w400

 フォームのデザインビューでラベルと2つのボタンを置いた様子です。
 基本的にこれらのコントロールの位置は、左上の角との位置関係として記録(「上位置」プロパティと「左位置」プロパティ)されています。


f:id:accs2014:20180722113328p:plain:right:w500

 よって、フォーム全体を右下に拡大しても、フォームビューでの各コントロール間の位置関係に変化はありません。


f:id:accs2014:20180722113324p:plain:right:w600

 そこで、デザインビューに戻って右下のボタンを選択します。そして上部の「配置」タブにある「アンカー設定」を選択し、さらにその中の「右下」を選択します。


f:id:accs2014:20180722113321p:plain:right:w500

 一見何も変わりませんが、これによりボタンの表示位置は「右下の角との位置関係により決まる」こととなります。
 この場合、右下の角からボタンの右下端まで、2cm四方のスペースが確保されるようになります。


f:id:accs2014:20180722113318p:plain:right:w500

 この設定でフォーム全体を右下に拡大してみると、ボタンが右下側に動きました。ボタンの表示位置が右下の角からの距離により決定されているからです。
 フォームフッターにコントロールを置くことによりフォームの下端寄りにコントロールを常時表示するという例がありますが、このアンカー設定を利用することで、左右方向を含めたフォームの拡大縮小に柔軟に対応した表示位置の設定を行うことができます。


f:id:accs2014:20180722113427p:plain:right:w400

 なお、フォームを極端に縮めると左上のボタンと位置が逆転するんじゃないかと思われますが、実際は「上位置」「左位置」プロパティで定められた位置よりも左上に動くことはありません。


f:id:accs2014:20180722113424p:plain:right:w600

 さて、デザインビューに戻り、今度は「上下右に引き伸ばし」を選択してみます。


f:id:accs2014:20180722113421p:plain:right:w500

 意味が分かりにくいですが、ボタンの表示位置は「右上の角との位置関係と右下の角との位置関係により決まる」こととなります。
 それではフォームを上下に長く伸ばした場合に一体どう表示されるのか気になりますが、ボタンが上下に拡大されて、足りない長さを補うこととなります。


f:id:accs2014:20180722113418p:plain:right:w500

 実際に見てみた方がわかりやすいかと思います。
 フォームビューではこのようになります。


f:id:accs2014:20180722113415p:plain:right:w500

 なお、フォームを極端に縮めてもボタンがつぶれることはありません。念のため。


f:id:accs2014:20180722113631p:plain:right:w600

 さて、実はこれらの設定は、コントロールの「水平アンカー」プロパティと「垂直アンカー」プロパティに記録されており、こちらから設定することもできます。
 例として、それぞれ「右」「下」にすれば上記の「右下」の設定と同じになりますし、それぞれ「右」「両方」とすれば上記の「上下右に引き伸ばし」と同じになります。設定の組み合わせは9種類(3×3)あり、上記の3つ目の画像に記されている9種のメニューに対応しています(デフォルトは「左」「上」)。1つ1つの結果は省略しますが、上記の結果から類推できるものと思います。