更新 : 2007 年 11 月
適切にサイズ変更されるフォームは、ユーザー インターフェイスの操作性を向上できます。
このチュートリアルでは、ユーザーがフォームのサイズを変更したときに均等に調整されるレイアウトを作成する方法について説明します。ここでは、TableLayoutPanel コントロールを使用して、連絡先情報のデータ入力フォームを実装します。
このチュートリアルでは、以下のタスクを行います。
プロジェクトの作成
レイアウト パネルの作成
レイアウト グリッドの設定
名前フィールドの作成
住所フィールドの作成
電話番号フィールドの作成
メモ フィールドの作成
完成したフォームは次のようになります。
このトピックのコードを単一のリストとしてコピーするには、「方法 : データ入力用のサイズ変更可能な Windows フォームを作成する」を参照してください。
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。
このチュートリアルを実行するための要件は次のとおりです。
Visual Studio がインストールされているコンピュータで、Windows フォーム アプリケーション プロジェクトを作成および実行するための十分なアクセス許可が付与されていること。
最初にアプリケーション プロジェクトを作成します。このプロジェクトを使用して、データ入力フォームを表示するアプリケーションを構築します。
DemoDataEntryLayout という名前の Windows アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。
次に、サイズの変更が可能なレイアウトを含むレイアウト パネルを作成します。
フォーム デザイナでフォームを選択します。
ツールボックスの TableLayoutPanel コントロールをフォームにドラッグします。
[プロパティ] ウィンドウで、TableLayoutPanel コントロールの Dock プロパティの値を Fill に変更します。
ColumnCount プロパティの値を 4 に変更し、RowCount プロパティの値を 6 に変更します。
次の手順では、レイアウト グリッドを指定します。ColumnStyles コレクションと RowStyles コレクションのプロパティを設定して、フォームの寸法が変更されたときに列と行のサイズをどのように変更するかを決めます。
TableLayoutPanel コントロールのスマート タグ グリフ () をクリックし、[行および列の編集] をクリックして、[列と行のスタイル] ダイアログ ボックスを開きます。詳細については、「方法 : TableLayoutPanel コントロールの列と行を編集する」を参照してください。
[表示] ドロップダウン ボックスの [列] を選択します。
最初の列を選択し、SizeType プロパティの値を Percent に変更します。PercentNumericUpDown コントロールの値を 25 に設定します。この列は、Label コントロールを保持します。
2 番目の列を選択します。SizeType プロパティの値を Percent に変更します。PercentNumericUpDown コントロールの値を 50 に設定します。この列は、データ入力フィールドの TextBox コントロールを保持します。
3 番目の列を選択します。SizeType プロパティの値を Percent に変更します。PercentNumericUpDown コントロールの値を 25 に設定します。この列は、Label コントロールを保持します。
4 番目の列を選択します。SizeType プロパティの値を Percent に変更します。PercentNumericUpDown コントロールの値を 50 に設定します。この列は、データ入力フィールドの TextBox コントロールを保持します。
[表示] ドロップダウン ボックスの [行] を選択します。
最初の 5 つの行について、SizeType プロパティの値を Absolute に設定し、AbsoluteNumericUpDown コントロールの値を 28 に設定します。6 番目の行について、SizeType プロパティの値を Percent に設定し、PercentNumericUpDown コントロールの値を 80 に設定します。
[OK] をクリックして、変更を適用します。
これで、レイアウトにコントロールを配置する準備ができました。このデータ入力フォームは連絡先情報の入力に使用するので、名、姓、住所、電話番号、メモの各フィールドが必要です。これらのコントロールを作成する順序を次に示します。
名前フィールド
住所フィールド
電話番号フィールド
メモ フィールド
名前入力フィールドは、TableLayoutPanel コントロールの最初の行に配置します。これらは、名の Label コントロールと TextBox コントロール、および姓の Label コントロールと TextBox コントロールで構成されます。
ツールボックスの Label コントロールを、TableLayoutPanel コントロールの最初のセルにドラッグします。
[プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。
AutoSize プロパティの値を true に設定します。
Text プロパティの値を First Name に設定します。
ツールボックスの TextBox コントロールを、最初の行の 2 番目のセル (Label コントロールの隣) にドラッグします。
TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。
ツールボックスの Label コントロールを、最初の行の 3 番目のセルにドラッグします。Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を Last Name に設定します。
ツールボックスの TextBox コントロールを、最初の行の 4 番目のセルにドラッグします。TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。
住所フィールドには、2 番目、3 番目、および 4 番目の行を使用します。住所は長くなる可能性があるので、 Address1 フィールドと Address2 フィールドの長さは 3 列になります。
ツールボックスの Label コントロールを、2 番目の行の最初のセルにドラッグします。
[プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を Address1 に設定します。
ツールボックスの TextBox コントロールを、Label コントロールの横の 2 番目の行の 2 番目のセルにドラッグします。
ColumnSpan プロパティの値を 3 に設定します。このプロパティは、TableLayoutPanel コントロールによって提供されます。提供される各プロパティの詳細については、「拡張プロバイダの概要」を参照してください。
3 番目の行で、手順 1. ～ 5. を繰り返します。Label コントロールの Text プロパティの値を Address2 に設定します。
ツールボックスの Label コントロールを、4 番目の行の最初のセルにドラッグします。
Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を City に設定します。
ツールボックスの TextBox コントロールを、4 番目の行の 2 番目のセル (Label コントロールの隣) にドラッグします。
ツールボックスの Label コントロールを、4 番目の行の 3 番目のセルにドラッグします。
Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を State に設定します。
ツールボックスの ComboBox コントロールを、4 番目の行の 4 番目のセルにドラッグします。
ComboBox コントロールの Anchor プロパティの値を Left に設定します。FormattingEnabled プロパティの値を true に設定します。
電話番号フィールドには、5 番目の行を使用します。ユーザーが有効な電話番号だけを入力できるようにするために、これらのフィールドは、MaskedTextBox コントロールを使用して実装します。
ツールボックスの Label コントロールを、5 番目の行の最初のセルにドラッグします。
[プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を Phone (W) に設定します。
ツールボックスの MaskedTextBox コントロールを、5 番目の行の 2 番目のセルにドラッグします。
MaskedTextBox コントロールの Anchor プロパティの値を Left に設定します。
MaskedTextBox コントロールのスマート タグ () をクリックして、Mask エディタを開きます。
[定型入力] ダイアログ ボックスで、[電話番号] マスクを選択します。[OK] をクリックします。
自宅電話番号フィールドで、手順 1. ～ 5. を繰り返します。Text プロパティの値を Phone (H) に設定します。
最後のフィールドには、6 番目の行を使用します。これはメモの入力フィールドで、自由にテキストを入力できます。
ツールボックスの Label コントロールを、6 番目の行の最初のセルにドラッグします。
[プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Top、Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を Notes に設定します。
ツールボックスの RichTextBox コントロールを、6 番目の行の 2 番目のセルにドラッグします。
ColumnSpan プロパティの値を 3 に設定します。
RichTextBox コントロールの Dock プロパティの値を Fill に設定します。
最後の手順は、レイアウト グリッド設定の終了です。1 番目と 3 番目の列は、AutoSize に設定する必要があります。これらの列にコントロールを配置したので、列は編集時に表示されます。
TableLayoutPanel コントロールを選択し、そのスマート タグ グリフ () をクリックします。[行および列の編集] を選択して [列と行のスタイル] ダイアログ ボックスを開きます。詳細については、「方法 : TableLayoutPanel コントロールの列と行を編集する」を参照してください。
1 番目と 3 番目の列を選択し、SizeType プロパティの値を AutoSize に変更します。
この時点でアプリケーションを実行し、フォームの動的なレイアウトを確認できます。
プロジェクトをビルドして実行します。フォームが表示されたら、サイズを大きくしたり小さくしたりします。
使用可能な領域に合わせて、コントロールのサイズが均等に変更されます。
これで、動的なレイアウトを実装するフォームを作成できるようになりました。次は、フォームをローカライズ可能にすることを検討してください。詳細については、「チュートリアル : ローカライズの際に均等に調整されるレイアウトの作成」を参照してください。