チュートリアル : データ入力用のサイズ変更可能な Windows フォームの作成

Windows フォーム : ユーザーインターフェイスリファレンス

更新 : 2007 年 11 月

適切にサイズ変更されるフォームは、ユーザーインターフェイスの操作性を向上できます。

このチュートリアルでは、ユーザーがフォームのサイズを変更したときに均等に調整されるレイアウトを作成する方法について説明します。ここでは、TableLayoutPanel コントロールを使用して、連絡先情報のデータ入力フォームを実装します。

このチュートリアルでは、以下のタスクを行います。

プロジェクトの作成
レイアウトパネルの作成
レイアウトグリッドの設定
名前フィールドの作成
住所フィールドの作成
電話番号フィールドの作成
メモフィールドの作成

完成したフォームは次のようになります。

このトピックのコードを単一のリストとしてコピーするには、「方法 : データ入力用のサイズ変更可能な Windows フォームを作成する」を参照してください。

メモ :
使用している設定またはエディションによっては、表示されるダイアログボックスやメニューコマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

メモ :

使用している設定またはエディションによっては、表示されるダイアログボックスやメニューコマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「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 番目のセルにドラッグします。
TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。
ColumnSpan プロパティの値を 3 に設定します。このプロパティは、TableLayoutPanel コントロールによって提供されます。提供される各プロパティの詳細については、「拡張プロバイダの概要」を参照してください。
3 番目の行で、手順 1. ～ 5. を繰り返します。Label コントロールの Text プロパティの値を Address2 に設定します。
ツールボックスの Label コントロールを、4 番目の行の最初のセルにドラッグします。
Label コントロールの Anchor プロパティの値を Right に設定します。AutoSize プロパティの値を true に設定します。Text プロパティの値を City に設定します。
ツールボックスの TextBox コントロールを、4 番目の行の 2 番目のセル (Label コントロールの隣) にドラッグします。
TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。
ツールボックスの 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 に変更します。
[OK] をクリックして、変更を適用します。