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

  • [アーティクル]

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

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

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

  • プロジェクトの作成

  • レイアウト パネルの作成

  • レイアウト グリッドの設定

  • 名前フィールドの作成

  • 住所フィールドの作成

  • 電話番号フィールドの作成

  • メモ フィールドの作成

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

TableLayoutPanel を持つ基本データ エントリ フォーム

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

注意

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

必須コンポーネント

このチュートリアルを完了するための要件は次のとおりです。

  • Visual Studio がインストールされているコンピューターで、Windows フォーム アプリケーション プロジェクトを作成および実行するための十分なアクセス許可が付与されていること。

プロジェクトの作成

最初にアプリケーション プロジェクトを作成します。 このプロジェクトを使用して、データ入力フォームを表示するアプリケーションを構築します。

プロジェクトを作成するには

レイアウト パネルの作成

次に、サイズの変更が可能なレイアウトを含むレイアウト パネルを作成します。

レイアウト パネルを作成するには

  1. フォーム デザイナーでフォームを選択します。

  2. ツールボックスからフォームに、TableLayoutPanel コントロールをドラッグします。

  3. [プロパティ] ウィンドウで、TableLayoutPanel コントロールの Dock プロパティの値を Fill に変更します。

  4. ColumnCount プロパティの値を 4 に変更し、RowCount プロパティの値を 6 に変更します。

レイアウト グリッドの設定

次の手順では、レイアウト グリッドを指定します。 ColumnStyles コレクションと RowStyles コレクションのプロパティを設定して、フォームの寸法が変更されたときに列と行のサイズをどのように変更するかを決めます。

レイアウト グリッドを設定するには

  1. TableLayoutPanel コントロールのスマート タグ グリフ (スマート タグ グリフ) をクリックし、[行および列の編集] をクリックして、[列と行のスタイル] ダイアログ ボックスを開きます。 詳細については、「方法 : TableLayoutPanel コントロールの列と行を編集する」を参照してください。

  2. [表示] ドロップダウン ボックスの [列] を選択します。

  3. 最初の列を選択し、SizeType プロパティの値を Percent に変更します。 Percent NumericUpDown コントロールの値を 25 に設定します。 この列は、Label コントロールを保持します。

  4. 2 番目の列を選択します。 SizeType プロパティの値を Percent に変更します。 Percent NumericUpDown コントロールの値を 50 に設定します。 この列は、データ入力フィールドの TextBox コントロールを保持します。

  5. 3 番目の列を選択します。 SizeType プロパティの値を Percent に変更します。 Percent NumericUpDown コントロールの値を 25 に設定します。 この列は、Label コントロールを保持します。

  6. 4 番目の列を選択します。 SizeType プロパティの値を Percent に変更します。 Percent NumericUpDown コントロールの値を 50 に設定します。 この列は、データ入力フィールドの TextBox コントロールを保持します。

  7. [表示] ドロップダウン ボックスの [行] を選択します。

  8. 最初の 5 つの行について、SizeType プロパティの値を Absolute に設定し、Absolute NumericUpDown コントロールの値を 28 に設定します。 6 番目の行について、SizeType プロパティの値を Percent に設定し、Percent NumericUpDown コントロールの値を 80 に設定します。

  9. [OK] をクリックして、変更を適用します。

レイアウトへのコントロールの配置

これで、レイアウトにコントロールを配置する準備ができました。 このデータ入力フォームは連絡先情報の入力に使用するので、名、姓、住所、電話番号、メモの各フィールドが必要です。 これらのコントロールを作成する順序を次に示します。

  1. 名前フィールド

  2. 住所フィールド

  3. 電話番号フィールド

  4. メモ フィールド

名前フィールドの作成

名前入力フィールドは、TableLayoutPanel コントロールの最初の行に配置します。 これらは、名の Label コントロールと TextBox コントロール、および姓の Label コントロールと TextBox コントロールで構成されます。

名前フィールドを作成するには

  1. ツールボックスの Label コントロールを、TableLayoutPanel コントロールの最初のセルにドラッグします。

  2. [プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。

  3. AutoSize プロパティの値を true に設定します。

  4. Text プロパティの値を First Name に設定します。

  5. ツールボックスの TextBox コントロールを、最初の行の 2 番目のセル (Label コントロールの隣) にドラッグします。

  6. TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。

  7. ツールボックスの Label コントロールを、最初の行の 3 番目のセルにドラッグします。 Label コントロールの Anchor プロパティの値を Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を Last Name に設定します。

  8. ツールボックスの TextBox コントロールを、最初の行の 4 番目のセルにドラッグします。 TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。

住所フィールドの作成

住所フィールドには、2 番目、3 番目、および 4 番目の行を使用します。 住所は長くなる可能性があるので、 Address1 フィールドと Address2 フィールドの長さは 3 列になります。

住所フィールドを作成するには

  1. ツールボックスの Label コントロールを、2 番目の行の最初のセルにドラッグします。

  2. [プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を Address1 に設定します。

  3. ツールボックスの TextBox コントロールを、Label コントロールの横の 2 番目の行の 2 番目のセルにドラッグします。

  4. TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。

  5. ColumnSpan プロパティの値を 3 に設定します。 このプロパティは、TableLayoutPanel コントロールによって提供されます。 提供される各プロパティの詳細については、「拡張プロバイダーの概要」を参照してください。

  6. 3 番目の行で、手順 1. ～ 5. を繰り返します。 Label コントロールの Text プロパティの値を Address2 に設定します。

  7. ツールボックスの Label コントロールを、4 番目の行の最初のセルにドラッグします。

  8. Label コントロールの Anchor プロパティの値を Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を City に設定します。

  9. ツールボックスの TextBox コントロールを、4 番目の行の 2 番目のセル (Label コントロールの隣) にドラッグします。

  10. TextBox コントロールの Anchor プロパティの値を Left、Right に設定します。

  11. ツールボックスの Label コントロールを、4 番目の行の 3 番目のセルにドラッグします。

  12. Label コントロールの Anchor プロパティの値を Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を State に設定します。

  13. ツールボックスの ComboBox コントロールを、4 番目の行の 4 番目のセルにドラッグします。

  14. ComboBox コントロールの Anchor プロパティの値を Left に設定します。 FormattingEnabled プロパティの値を true に設定します。

電話番号フィールドの作成

電話番号フィールドには、5 番目の行を使用します。 ユーザーが有効な電話番号だけを入力できるようにするために、これらのフィールドは、MaskedTextBox コントロールを使用して実装します。

電話番号フィールドを作成するには

  1. ツールボックスの Label コントロールを、5 番目の行の最初のセルにドラッグします。

  2. [プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を Phone (W) に設定します。

  3. ツールボックスの MaskedTextBox コントロールを、5 番目の行の 2 番目のセルにドラッグします。

  4. MaskedTextBox コントロールの Anchor プロパティの値を Left に設定します。

  5. MaskedTextBox コントロールのスマート タグ (スマート タグ グリフ) をクリックして、Mask エディターを開きます。

  6. [定型入力] ダイアログ ボックスで、[電話番号] マスクを選択します。 [OK] をクリックします。

  7. 自宅電話番号フィールドで、手順 1. ～ 5. を繰り返します。 Text プロパティの値を Phone (H) に設定します。

メモ フィールドの作成

最後のフィールドには、6 番目の行を使用します。 これはメモの入力フィールドで、自由にテキストを入力できます。

メモ フィールドを作成するには

  1. ツールボックスの Label コントロールを、6 番目の行の最初のセルにドラッグします。

  2. [プロパティ] ウィンドウで、Label コントロールの Anchor プロパティの値を Top、Right に設定します。 AutoSize プロパティの値を true に設定します。 Text プロパティの値を Notes に設定します。

  3. ツールボックスの RichTextBox コントロールを、6 番目の行の 2 番目のセルにドラッグします。

  4. ColumnSpan プロパティの値を 3 に設定します。

  5. RichTextBox コントロールの Dock プロパティの値を Fill に設定します。

レイアウト グリッド設定の終了

最後の手順は、レイアウト グリッド設定の終了です。 1 番目と 3 番目の列は、AutoSize に設定する必要があります。 これらの列にコントロールを配置したので、列は編集時に表示されます。

レイアウト グリッドを設定するには

  1. TableLayoutPanel コントロールを選択し、そのスマート タグ グリフ (スマート タグ グリフ) をクリックします。 [行および列の編集] を選択して [列と行のスタイル] ダイアログ ボックスを開きます。 詳細については、「方法 : TableLayoutPanel コントロールの列と行を編集する」を参照してください。

  2. [表示] ドロップダウン ボックスの [列] を選択します。

  3. 1 番目と 3 番目の列を選択し、SizeType プロパティの値を AutoSize に変更します。

  4. [OK] をクリックして、変更を適用します。

チェックポイント

この時点でアプリケーションを実行し、フォームの動的なレイアウトを確認できます。

フォームのレイアウトを確認するには

  • プロジェクトをビルドして実行します。 フォームが表示されたら、サイズを大きくしたり小さくしたりします。

注意

使用可能な領域に合わせて、コントロールのサイズが均等に変更されます。

次の手順

これで、動的なレイアウトを実装するフォームを作成できるようになりました。次は、フォームをローカライズ可能にすることを検討してください。 詳細については、「チュートリアル : ローカライズの際に均等に調整されるレイアウトの作成」を参照してください。

参照

処理手順

方法 : データ入力用のサイズ変更可能な Windows フォームを作成する

チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置

チュートリアル : FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置

方法 : TableLayoutPanel コントロールの列と行を編集する

チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト

方法 : AutoSize と TableLayoutPanel コントロールを使用して Windows フォームのローカリゼーションをサポートする

チュートリアル : Windows フォーム コントロールのスマート タグを使用した共通タスクの実行

チュートリアル : ローカライズの際に均等に調整されるレイアウトの作成

関連項目

TableLayoutPanel

FlowLayoutPanel