チュートリアル : Windows フォーム デザイナーの概要

更新 : 2010 年 9 月

Windows フォーム デザイナーは、Windows フォーム アプリケーションの構築用ツールを数多く搭載しています。 このチュートリアルでは、デザイナーのさまざまなツールを使用してアプリケーションを構築する方法について説明します。 このチュートリアルでは、以下のタスクを行います。

• Windows フォーム プロジェクトの作成

• スナップ線を使用した、コントロールの整列

• スマート タグを使用した、デザイナー タスクの実行

• コントロールの余白と埋め込みの設定

• TableLayoutPanel コントロールを使用した、コントロールの整列

• SplitContainer コントロールを使用した、コントロールのレイアウトの分割

• [ドキュメント アウトライン] ウィンドウを使用した、レイアウトの移動

• サイズと位置の情報表示に基づくコントロールの配置

• プロパティ ウィンドウを使用したプロパティ値の設定

ここでは、Windows フォーム デザイナーのさまざまなレイアウト機能を使用して、カスタム コントロールを作成します。 このコントロールは、簡単な電卓のユーザー インターフェイス (UI) を実装します。 次のスクリーン ショットは、電卓コントロールの全般的なレイアウトを示しています。

電卓 UI

必須コンポーネント

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

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

カスタム コントロール プロジェクトの作成

最初に DemoCalculator コントロール プロジェクトを作成します。

カスタム コントロール プロジェクトを作成するには

1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックして [新しいプロジェクト] ダイアログ ボックスを開きます。

2. [Windows] カテゴリの Visual Basic プロジェクトまたは Visual C# プロジェクトの一覧で、[Windows フォーム コントロール ライブラリ] プロジェクト テンプレートを選択します。

3. [名前] ボックスに「DemoCalculatorLib」と入力し、[OK] をクリックします。

4. ソリューション エクスプローラーで、[UserControl1.vb] または [UserControl1.cs] を右クリックし、[名前の変更] をクリックします。

5. ファイル名を「DemoCalculator.vb」または「DemoCalculator.cs」に変更します。 コード要素 "UserControl1" へのすべての参照の名前を変更するかどうかを確認するダイアログ ボックスが表示されたら、[はい] をクリックします。

   Windows フォーム デザイナーに、DemoCalculator コントロールのデザイナー画面が表示されます。 このビューで、ツールボックスのコントロールとコンポーネントを選択してデザイナー画面に配置することにより、コントロールの外観をグラフィカルに設計できます。 カスタム コントロールの詳細については、「さまざまなカスタム コントロール」を参照してください。

コントロールのレイアウトのデザイン

DemoCalculator コントロールには、Windows フォーム コントロールがいくつか含まれます。 この手順では、Windows フォーム デザイナーの RAD (Rapid Application Development) 機能を使用してコントロールを配置します。

コントロールのレイアウトをデザインするには

1. Windows フォーム デザイナーで、DemoCalculator コントロールの右下隅のサイズ変更ハンドルをクリックし、右下に向かってドラッグしてサイズを拡大します。 Visual Studio の右下隅で、コントロールのサイズと位置の情報を確認します。 サイズ情報を確認しながらコントロールのサイズを変更し、コントロールの幅を 500、高さを 400 に設定します。

2. ツールボックスの [コンテナー] ノードをクリックして開きます。 SplitContainer コントロールを選択してデザイナー画面にドラッグします。

   SplitContainer が、DemoCalculator コントロールのデザイナー画面に配置されます。

   注意

   SplitContainer コントロールのサイズは、DemoCalculator コントロールのサイズに合わせて自動的に変更されます。 [プロパティ] ウィンドウで、SplitContainer コントロールのプロパティ設定を確認します。 Dock プロパティを見つけます。 この値が Fill の場合、SplitContainer コントロールのサイズは、常に DemoCalculator コントロールの境界に合わせて自動的に変更されます。 DemoCalculator コントロールのサイズを変更して、この動作を確認します。

3. [プロパティ] ウィンドウで、Dock プロパティの値を None に変更します。

   SplitContainer コントロールが既定のサイズに縮小します。 このコントロールのサイズは、DemoCalculator コントロールのサイズに従わなくなります。

4. SplitContainer コントロールの右上隅のスマート タグ グリフ () をクリックします。 [親コンテナーにドッキングする] をクリックして、Dock プロパティを Fill に設定します。

   SplitContainer コントロールが、DemoCalculator コントロールの境界にドッキングします。

   注意

   コントロールには、スマート タグを使用してデザインを簡略化できるものがあります。 詳細については、「チュートリアル : Windows フォーム コントロールのスマート タグを使用した共通タスクの実行」を参照してください。

5. パネル間の縦の境界線をクリックして右方向にドラッグし、左側パネルがほとんどの領域を占めるようにします。

   SplitContainer により、DemoCalculator コントロールが 2 つのパネルに分割され、移動可能な境界線でパネルが区切られます。 左側のパネルには電卓のボタンとディスプレイが表示され、右側のパネルにはユーザーによって実行された算術演算の記録が表示されます。

6. [プロパティ] ウィンドウで、BorderStyle プロパティの値を Fixed3D に変更します。

7. ツールボックスの [コモン コントロール] ノードをクリックして開きます。 ListView コントロールを選択して、SplitContainer コントロールの右側パネルにドラッグします。

8. ListView コントロールのスマート タグ グリフをクリックします。 スマート タグ パネルで、View 設定を Details に変更します。

9. スマート タグ パネルで、[列の編集] をクリックします。

   [ColumnHeader コレクション エディター] ダイアログ ボックスが開きます。

10. [ColumnHeader コレクション エディター] ダイアログ ボックスの [追加] をクリックして、ListView コントロールに列を追加します。 列の Text プロパティの値を History に変更します。 [OK] をクリックして、列を作成します。

11. スマート タグ パネルで、[親コンテナーにドッキングする] をクリックし、スマート タグ グリフをクリックして、スマート タグ パネルを閉じます。

12. ツールボックスの [コンテナー] ノードから TableLayoutPanel コントロールを SplitContainer コントロールの左側パネルにドラッグします。

    TableLayoutPanel コントロールがデザイナー画面に表示され、スマート タグ パネルが開きます。 TableLayoutPanel コントロールの子コントロールがグリッドに配置されます。 詳細については、「チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。 TableLayoutPanel コントロールには、DemoCalculator コントロールのディスプレイとボタンが表示されます。

13. スマート タグ パネルで、[行および列の編集] をクリックします。

    [列と行のスタイル] ダイアログ ボックスが開きます。

14. 5 つの列が表示されるまで、[追加] をクリックします。 5 つの列をすべて選択し、[サイズの型] ボックスの [パーセント] をクリックします。 [パーセント] の値を 20 に設定します。 これで、各列に同じ幅が設定されます。

15. [表示] ボックスで、[行] をクリックします。

16. 5 つの行が表示されるまで、[追加] をクリックします。 5 つの行をすべて選択し、[サイズの型] ボックスの [パーセント] をクリックします。 [パーセント] の値を 20 に設定します。 これで、各行に同じ高さが設定されます。

17. [OK] をクリックして変更を適用します。次に、スマート タグ グリフをクリックして、スマート タグ パネルを閉じます。

18. [プロパティ] ウィンドウで、Dock プロパティの値を Fill に変更します。

コントロールの設定

コントロールのレイアウトを設定した後は、DemoCalculator コントロールにボタンとディスプレイを設定できます。

コントロールを設定するには

1. ツールボックスの TextBox コントロール アイコンをダブルクリックします。

   TextBox コントロールが、TableLayoutPanel コントロールの最初のセルに配置されます。

2. [プロパティ] ウィンドウで、TextBox コントロールの ColumnSpan プロパティの値を 5 に変更します。

   TextBox コントロールが、行の中央の位置に移動します。

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

   TextBox コントロールが水平方向に拡大し、5 つの列の端から端まで広がります。

4. TextBox コントロールの TextAlign プロパティの値を Right に変更します。

5. [プロパティ] ウィンドウで、Font プロパティ ノードを展開します。 TextBox コントロールの Size を 14 に設定し、Bold を true に設定します。

6. TableLayoutPanel コントロールを選択します。

7. ツールボックスの Button アイコンをダブルクリックします。

   Button コントロールが、TableLayoutPanel コントロールの次の開いているセルに配置されます。

8. ツールボックスの Button アイコンをさらに 4 回ダブルクリックして、TableLayoutPanel コントロールの 2 番目の行に設定します。

9. Shift キーを押しながら 5 つの Button コントロールをすべてクリックして選択します。 Ctrl キーを押しながら C キーを押して、Button コントロールをクリップボードにコピーします。

10. Ctrl キーを押しながら V キーを押す操作を 3 回行って、TableLayoutPanel コントロールの残りの行に Button コントロールのコピーを貼り付けます。

11. Shift キーを押しながら 20 個の Button コントロールをすべてクリックして選択します。

12. [プロパティ] ウィンドウで、Dock プロパティの値を Fill に変更します。

    すべての Button コントロールがドッキングして、それらを含んでいるセルを満たします。

13. [プロパティ] ウィンドウで、Margin プロパティ ノードを展開します。 All の値を 5 に設定します。

    すべての Button コントロールのサイズが縮小し、それぞれの間の余白が拡大します。

14. [button10] と [button20] を選択し、Del キーを押してレイアウトから削除します。

15. [button5] と [button15] を選択し、それぞれの RowSpan プロパティの値を 2 に変更します。 これらは、DemoCalculator コントロールの [Clear] ボタンと [=] ボタンになります。

[ドキュメント アウトライン] ウィンドウを使用した、コントロールの移動

コントロールやフォームに複数のコントロールを設定するときは、[ドキュメント アウトライン] ウィンドウを使用すると、より簡単にレイアウト内を移動できます。

[ドキュメント アウトライン] ウィンドウを使用して移動するには

1. [表示] メニューの [その他のウィンドウ] をポイントし、[ドキュメント アウトライン] をクリックします。

   [ドキュメント アウトライン] ウィンドウには、DemoCalculator コントロールとその内在コントロールのツリー ビューが表示されます。 SplitContainer などのコンテナー コントロールでは、その子コントロールがサブノードとしてツリーに表示されます。 [ドキュメント アウトライン] ウィンドウを使用して、その場でコントロールの名前を変更することもできます。

2. [ドキュメント アウトライン] ウィンドウで、[button1] を右クリックし、[名前の変更] をクリックします。 名前を sevenButton に変更します。

3. [ドキュメント アウトライン] ウィンドウを使用し、次の一覧に従って、Button コントロールの名前を、デザイナーで生成された名前から製品名に変更します。

   • button1 を sevenButton に変更します。

   • button2 を eightButton に変更します。

   • button3 を nineButton に変更します。

   • button4 を divisionButton に変更します。

   • button5 を clearButton に変更します。

   • button6 を fourButton に変更します。

   • button7 を fiveButton に変更します。

   • button8 を sixButton に変更します。

   • button9 を multiplicationButton に変更します。

   • button11 を oneButton に変更します。

   • button12 を twoButton に変更します。

   • button13 を threeButton に変更します。

   • button14 を subtractionButton に変更します。

   • button15 を equalsButton に変更します。

   • button16 を zeroButton に変更します。

   • button17 を changeSignButton に変更します。

   • button18 を decimalButton に変更します。

   • button19 を additionButton に変更します。

4. [ドキュメント アウトライン] ウィンドウと [プロパティ] ウィンドウを使用して、各 Button コントロール名の Text プロパティ値を、次の表に従って変更します。

   • sevenButton コントロールのテキスト プロパティを 7 に変更します。

   • eightButton コントロールのテキスト プロパティを 8 に変更します。

   • nineButton コントロールのテキスト プロパティを 9 に変更します。

   • divisionButton コントロールのテキスト プロパティを / に変更します。

   • clearButton コントロールのテキスト プロパティを Clear に変更します。

   • fourButton コントロールのテキスト プロパティを 4 に変更します。

   • fiveButton コントロールのテキスト プロパティを 5 に変更します。

   • sixButton コントロールのテキスト プロパティを 6 に変更します。

   • multiplicationButton コントロールのテキスト プロパティを * に変更します。

   • oneButton コントロールのテキスト プロパティを 1 に変更します。

   • twoButton コントロールのテキスト プロパティを 2 に変更します。

   • threeButton コントロールのテキスト プロパティを 3 に変更します。

   • subtractionButton コントロールのテキスト プロパティを - に変更します。

   • equalsButton コントロールのテキスト プロパティを = に変更します。

   • zeroButton コントロールのテキスト プロパティを 0 に変更します。

   • changeSignButton コントロールのテキスト プロパティを +/- に変更します。

   • decimalButton コントロールのテキスト プロパティを . に変更します。

   • additionButton コントロールのテキスト プロパティを + に変更します。

5. デザイナー画面で、Shift キーを押しながらすべての Button コントロールをクリックして選択します。

6. [プロパティ] ウィンドウで、Font プロパティ ノードを展開します。 すべての Button コントロールについて、Size を 14 に設定し、Bold を true に設定します。

   DemoCalculator コントロールのデザインはこれで完了です。 残すところ、電卓ロジックを実装する作業だけです。

イベント ハンドラーの実装

DemoCalculator コントロールのボタンでは、イベント ハンドラーを使用して多くの電卓ロジックを実装できます。 Windows フォーム デザイナーでは、ダブルクリックするだけで、すべてボタンに対してすべてのイベント ハンドラーのスタブを実装できます

イベント ハンドラーを実装するには

1. デザイナー画面で、Shift キーを押しながらすべての Button コントロールをクリックして選択します。

2. Button コントロールのいずれかをダブルクリックします。

   デザイナーによって生成されたイベント ハンドラーに対して、コード エディターが開きます。

コントロールのテスト

DemoCalculator コントロールは UserControl クラスを継承するため、ユーザー コントロール テスト コンテナーを使用してその動作をテストできます。 詳細については、「方法 : UserControl の実行時の動作をテストする」を参照してください。

コントロールをテストするには

1. F5 キーを押すことにより、ユーザー コントロール テスト コンテナーで DemoCalculator コントロールを作成して実行します。

2. SplitContainer パネル間の境界線をクリックして、左右にドラッグします。 TableLayoutPanel とそのすべての子コントロールのサイズが、空き領域に合わせて自動的に変更されます。

3. コントロールのテストが終了したら、[閉じる] をクリックします。

フォームでのコントロールの使用

DemoCalculator コントロールは、他の複合コントロールやフォームで使用できます。 その使用手順を以下に示します。

プロジェクトの作成

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

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

1. [ファイル] メニューの [追加] をポイントし、[新しいプロジェクト] をクリックして [新しいプロジェクト] ダイアログ ボックスを開きます。

2. Visual Basic プロジェクトまたは Visual C# プロジェクトの一覧で、[Windows フォーム アプリケーション] プロジェクト テンプレートを選択します。

3. [名前] ボックスに「DemoCalculatorTest」と入力し、[OK] をクリックします。

4. ソリューション エクスプローラーで、[DemoCalculatorTest] プロジェクトを右クリックし、[参照の追加] をクリックして [参照の追加] ダイアログ ボックスを開きます。

5. [プロジェクト] タブをクリックし、DemoCalculatorLib プロジェクトをダブルクリックして、テスト プロジェクトへの参照を追加します。

6. ソリューション エクスプローラーで、[DemoCalculatorTest] を右クリックし、[スタートアップ プロジェクトに設定] をクリックします。

7. Windows フォーム デザイナーで、フォームのサイズを約 700 × 500 に拡大します。

フォームのレイアウトでのコントロールの使用

DemoCalculator コントロールをアプリケーションで使用するには、これをフォームに配置する必要があります。

フォームのレイアウトでコントロールを使用するには

1. ツールボックスで、[DemoCalculatorLib コンポーネント] ノードを展開します。

2. ツールボックスの [DemoCalculator] コントロールをフォームにドラッグします。 コントロールをフォームの左上隅に移動します。 コントロールがフォームの境界線に近づくと、スナップ線が表示されます。 スナップ線は、フォームの Padding プロパティからコントロールの Margin プロパティまでの距離を示します。 スナップ線で示された位置にコントロールを配置します。

   詳細については、「チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置」を参照してください。

3. ツールボックスの Button コントロールをドラッグし、フォームにドロップします。

4. DemoCalculator コントロールの周りで Button コントロールを移動し、スナップ線がどこで表示されるかを確認します。 この機能を使用すると、コントロールを正確かつ簡単に配置できます。 終了したら Button コントロールを削除します。

5. DemoCalculator コントロールを右クリックし、[プロパティ] をクリックします。

6. Dock プロパティの値を Fill に変更します。

7. フォームを選択し、Padding プロパティ ノードを展開します。 [All] の値を「20」に変更します。

   フォームの新しい Padding 値に合わせて、DemoCalculator コントロールのサイズが縮小します。

8. さまざまなサイズ変更ハンドルをいろいろな位置にドラッグして、フォームのサイズを変更します。 フォームのサイズに合わせて、DemoCalculator コントロールのサイズがどのように変化するかを確認します。

次の手順

このチュートリアルでは、簡単な電卓のユーザー インターフェイスを構築する方法を説明しました。 このコントロールの機能は次の方法で拡張できます。

• 電卓ロジックを実装します。 これは簡単なように思えますが、電卓の状態遷移は興味深く、複雑です。

• 配置用に電卓アプリケーションをパッケージ化します。 詳細については、「方法: 発行ウィザードを使用して ClickOnce アプリケーションを発行する」を参照してください。

参照

処理手順

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

チュートリアル : Windows フォーム コンポーネントへのスマート タグの追加

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

チュートリアル : ツールボックスへのカスタム コンポーネントの自動設定

方法 : UserControl の実行時の動作をテストする

コントロールとコンポーネントの作成時のトラブルシューティング

デザイン時開発のトラブルシューティング

概念

さまざまなカスタム コントロール

その他の技術情報

新しい Windows フォームの作成

履歴の変更