Anchor プロパティと Dock プロパティを使用して WinForm コントロールを管理する - TechRepublic

この記事は、TechRepublic のダウンロードとしても提供されており、Anchor プロパティと Dock プロパティの動作例を含む Visual Studio プロジェクトファイルが含まれています。

WinFormsプログラミングを初めて学ぶ開発者の多くは、ユーザーが親フォームのサイズを変更した際に
、フォーム上の様々なコントロールを互いに同期させ
、親フォームの比率を維持するのに苦労します。これは
、特に
Webプログラミングの経験からWinFormsに移行した開発者にとっては非常にフラストレーションの溜まる状況です。この問題を軽減するために、.NET
Frameworkでは、子コントロールにプロパティを設定し、
親フォームのサイズが変更された際の子コントロールの動作を制御できます。コントロールのサイズ変更動作を制御できる2つのプロパティは、
「Dock」と
「Anchor」です。

ドック
とアンカーは、コントロールを親フォーム上の特定の場所に結び付けることで、アプリケーションのインターフェースが予測不能になることを防ぎます
。何より素晴らしいのは、これらのプロパティを設定するために手書きのコードを書く必要がないことです。すべて Visual Studio IDE内でポイントアンドクリックだけで
設定できます。

アンカープロパティ

名前が示す通り
、このプロパティは、コントロールを
親フォームまたはコントロール内の相対位置または絶対位置に強制的に固定します。このプロパティには、
オン/オフを切り替えることができる4つの値があります。

上 -コントロールの上端が親フォーム (またはコントロール) の上端
に対して固定されていることを示します。
下 -コントロールの下端が親フォーム (またはコントロール) の下端
に対して固定されていることを示します。
左 -コントロールの左端が親フォーム (またはコントロール) の左端
に対して固定されていることを示します。
右 -コントロールの右端が親フォーム (またはコントロール) の右端
に対して固定されていることを示します。

コントロールのアンカープロパティを設定するには
、Visual Studioデザイナーでコントロールを選択し
、プロパティウィンドウに移動します。
「アンカー」というプロパティが表示されます。このプロパティの値セクションをクリックすると、コントロールに割り当てる
アンカーポイントを選択できる小さなウィンドウが表示されます。図Aは、「上、左」を選択したアンカー設定ウィンドウです。図Bは、「下、右」を選択したアンカー設定ウィンドウです。

図A

アンカーツール左上

図B

アンカーツール右下

Visual Studio でフォーム上にコントロールを配置する場合、デフォルトのアンカー設定は「上、左」です。
これは、コントロールが
フォームの上端と左端に対して固定されたままになるように指示します。

アンカー設定の違いがコントロールにどのような影響を与えるかを実際に確認しないと、アンカー設定の
意味が理解しにくいでしょう
。以下の画像が参考になると思います。

図C

小さな窓

図Cは10個の子コントロールを持つフォームを示しています
。各子コントロールのAnchorプロパティの値はそれぞれ異なり、
アンカー設定がラベルに表示されています。灰色のコントロールの背後にある濃い赤色のボックス
は別の子コントロールで、AnchorプロパティはTop、Bottom、Left、
Rightに設定されています。図Dは、同じ
フォームをより大きな領域にサイズ変更した後の状態を示しています。

図D

大きな窓

ご覧のとおり
、各コントロールは親フォーム内での位置を自動的に維持しています。
これを実現するためのコードは記述されておらず、コントロールのAnchorプロパティを設定するだけです
。

ここでいくつか重要な点について触れておきます
。まず、
コントロールに左または右のアンカーを指定していない場合、
親フォーム内での相対的な左右の位置が保持されます。コントロールに上または下のアンカーを指定していない場合も同様です
。良い例として、
「アンカーなし」というラベルの付いたコントロールが挙げられます。このコントロールにはアンカー
値が設定されていないため、フォームの中央にフローティング表示されます。

もう一方の極端な例は
、すべてのアンカー値（上、下、左、右）が選択されたコントロールです。図Cと図D の他のコントロールの
背後に表示されている濃い赤色の四角形がその例です。すべてのアンカー値が選択されている場合、親フォームのサイズが変更されてもコントロールは単純に拡大または縮小され、フォームの端と比較してコントロールのすべての端は固定されたままになります。

ドックプロパティ

Dock
プロパティは、コントロールを親フォーム
（またはコントロール）の特定の端に接着剤のように固定します。これはAnchorプロパティでも実現できますが、Dockプロパティを使用すると、親フォーム内で子コントロールを互いに
重ねて（または横に）配置できます。子コントロールの1つのサイズが変更されると、そのコントロールの隣にドッキングされている他のコントロールも一緒に移動します。

Anchorプロパティとは異なり、Dockプロパティには単一の値しか設定できません。
有効な値は以下の通りです。

上 —コントロールを
親フォーム（またはコントロール）の最上部に強制的に配置します。
同じ親フォーム（またはコントロール）に他の子コントロールがドッキングトップに設定されている場合は、それらのコントロールは
互いに重なり合って配置されます。
下 —コントロールを
親フォーム（またはコントロール）の一番下に配置します。
同じ親フォーム（またはコントロール）に他の子コントロールがドッキング下部に設定されている場合は、それらのコントロールは
互いに重なり合って配置されます。
左 —コントロールを
親フォーム（またはコントロール）の左に配置します。
同じ親フォーム（またはコントロール）に他の子コントロールが左にドッキングするように設定されている場合、それらのコントロールは
隣り合って配置されます。
右 —コントロールを親フォーム（またはコントロール）の右側に配置します。同じ親フォーム（またはコントロール）に
他の子コントロールがドッキングトップに設定されている場合、それらのコントロールは隣り合って配置されます。
塗りつぶし —コントロールを
親フォーム（またはコントロール）の最上部に強制的に配置します。
同じ親フォーム（またはコントロール）に他の子コントロールがドッキングトップに設定されている場合、それらのコントロールは
互いに重なり合って配置されます。
なし -コントロールが
正常に動作することを示します。

コントロールのDock値を設定するには、Visual Studioでコントロールを選択し、
プロパティウィンドウを開きます。「Dock」というプロパティが表示されます。このプロパティの値セクションをクリックすると、コントロールのドッキング方法を指定できる
小さなウィンドウが表示されます。このフォームは、以下の画像（図 E、F、G）に示されており、様々な値が設定されています。

図E

ドック左が選択されています

図F

ドックフィルが選択されています

図G

ドックトップが選択されています

Anchorプロパティと同様に
、実際に動作してみるまではあまり意味をなさないかもしれません
。図Hは
、それぞれ異なるドック値が設定された5つの子コントロールを持つフォームを示しています。

図H

ドック値が異なる5つの子コントロール

図 I は図 Hと同じウィンドウを示していますが、ウィンドウの
サイズが変更され、フットプリントが大きくなっています。

図I

より大きなフットプリント

図Jは図Hと同じウィンドウを示していますが、今回は
フォームの上下左右のコントロールが小さくなっています。
中央の「ドッキングフィル」に設定されているコントロールの
サイズが自動的に拡大されていることに注意してください。

図J

より小さなフットプリント

Dockプロパティを使用する際に留意すべき点は、コントロール
をフォームに追加する順序が、ドッキング方法に影響を与える可能性があることです。例えば、
ControlAをフォームに追加し、Fillをドッキングするように指示した後、
ControlBをフォームに追加し、
Topをドッキングするように指示すると、ControlBはControlAの上部を覆い隠すように表示されます
。これは、ControlBがControlAの後に追加されているため、ControlAの「前面」にあるとみなされるためです。この状況を修正するには、Visual Studioで
ControlAを右クリックし、コンテキストメニューから「最前面へ移動」を選択してください。これにより、ControlAが ControlBの最前面に移動し、コントロールは期待どおりに動作するようになります。

サンプルアプリケーション

DockプロパティとAnchorプロパティの使い方を完全に理解するには、
この記事のダウンロード版に含まれているサンプルアプリケーションをダウンロードしてください。
アプリケーションには、
DockとAnchorのさまざまな使い方を示すフォームがいくつか用意されています。こうした機能について学ぶ最良の方法は、実際に
コードに触れて、実際に手を動かしてみることです。