チュートリアル : Windows フォーム デザイナの概要
更新 : 2007 年 11 月
Windows フォーム デザイナは、Windows フォーム アプリケーションの構築用ツールを数多く搭載しています。このチュートリアルでは、デザイナのさまざまなツールを使用してアプリケーションを構築する方法について説明します。このチュートリアルでは、以下のタスクを行います。
Windows フォーム プロジェクトの作成
スナップ線を使用した、コントロールの整列
スマート タグを使用した、デザイナ タスクの実行
コントロールの余白と埋め込みの設定
TableLayoutPanel コントロールを使用した、コントロールの整列
SplitContainer コントロールを使用した、コントロールのレイアウトの分割
[ドキュメント アウトライン] ウィンドウを使用した、レイアウトの移動
サイズと位置の情報表示に基づくコントロールの配置
[プロパティ] ウィンドウを使用した、プロパティ値の設定
ここでは、Windows フォーム デザイナのさまざまなレイアウト機能を使用して、カスタム コントロールを作成します。このコントロールは、簡単な電卓のユーザー インターフェイス (UI) を実装します。次のスクリーン ショットは、電卓コントロールの全般的なレイアウトを示しています。
電卓 UI
.gif "ガイド ツアー電卓 UI")
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Studio がインストールされているコンピュータで、Windows フォーム アプリケーション プロジェクトを作成および実行するための十分なアクセス許可が付与されていること。
.gif "メモ") メモ : |
|---|
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。 |
カスタム コントロール プロジェクトの作成
最初に DemoCalculator コントロール プロジェクトを作成します。
カスタム コントロール プロジェクトを作成するには
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックして [新しいプロジェクト] ダイアログ ボックスを開きます。
Visual C# プロジェクトの一覧の [Windows コントロール ライブラリ] プロジェクト テンプレートをクリックし、[プロジェクト名] ボックスに「DemoCalculatorLib」と入力します。次に、[OK] をクリックします。
ソリューション エクスプローラで、[UserControl1.cs] を右クリックし、[名前の変更] をクリックします。ファイル名を「DemoCalculator.cs」に変更します。コード要素 "UserControl1" へのすべての参照の名前を変更するかどうかを確認するダイアログ ボックスが表示されたら、[はい] をクリックします。
Windows フォーム デザイナに、DemoCalculator コントロールのデザイナ画面が表示されます。このビューで、ツールボックスのコントロールとコンポーネントを選択してデザイナ画面に配置することにより、コントロールの外観をグラフィカルに設計できます。カスタム コントロールの詳細については、「さまざまなカスタム コントロール」を参照してください。
コントロールのレイアウトのデザイン
DemoCalculator コントロールには、Windows フォーム コントロールがいくつか含まれます。この手順では、Windows フォーム デザイナの RAD (Rapid Application Development) 機能を使用してコントロールを配置します。
コントロールのレイアウトをデザインするには
Windows フォーム デザイナで、DemoCalculator コントロールの右下隅のサイズ変更ハンドルをクリックし、右下に向かってドラッグしてサイズを拡大します。Visual Studio の右下隅で、コントロールのサイズと位置の情報を確認します。サイズ情報を確認しながらコントロールのサイズを変更し、コントロールの幅を 500、高さを 400 に設定します。
ツールボックスの [コンテナ] ノードをクリックして開きます。SplitContainer コントロールを選択してデザイナ画面にドラッグします。
SplitContainer が、DemoCalculator コントロールのデザイナ画面に配置されます。
メモ :SplitContainer コントロールのサイズは、DemoCalculator コントロールのサイズに合わせて自動的に変更されます。[プロパティ] ウィンドウで、SplitContainer コントロールのプロパティ設定を確認します。Dock プロパティを見つけます。この値が Fill の場合、SplitContainer コントロールのサイズは、常に DemoCalculator コントロールの境界に合わせて自動的に変更されます。DemoCalculator コントロールのサイズを変更して、この動作を確認します。
[プロパティ] ウィンドウで、Dock プロパティの値を None に変更します。
SplitContainer コントロールが既定のサイズに縮小します。このコントロールのサイズは、DemoCalculator コントロールのサイズに従わなくなります。
SplitContainer コントロールの右上隅のスマート タグ グリフ (
.gif "スマート タグ グリフ")
) をクリックします。[親コンテナにドッキングする] をクリックし、Dock プロパティを Fill に設定します。SplitContainer コントロールが、DemoCalculator コントロールの境界にドッキングします。
メモ :コントロールには、スマート タグを使用してデザインを簡略化できるものがあります。詳細については、「チュートリアル : Windows フォーム コントロールのスマート タグを使用した共通タスクの実行」を参照してください。
パネル間の縦の境界線をクリックして右方向にドラッグし、左側パネルがほとんどの領域を占めるようにします。
SplitContainer により、DemoCalculator コントロールが 2 つのパネルに分割され、移動可能な境界線でパネルが区切られます。左側のパネルには電卓のボタンとディスプレイが表示され、右側のパネルにはユーザーによって実行された算術演算の記録が表示されます。
[プロパティ] ウィンドウで、BorderStyle プロパティの値を Fixed3D に変更します。
ツールボックスの [コモン コントロール] ノードをクリックして開きます。ListView コントロールを選択して、SplitContainer コントロールの右側パネルにドラッグします。
ListView コントロールのスマート タグ グリフをクリックします。スマート タグ パネルで、View 設定を Details に変更します。
スマート タグ パネルで、[列の編集] をクリックします。
[ColumnHeader コレクション エディタ] ダイアログ ボックスが開きます。
[ColumnHeader コレクション エディタ] ダイアログ ボックスの [追加] をクリックして、ListView コントロールに列を追加します。列の Text プロパティの値を History に変更します。[OK] をクリックして、列を作成します。
スマート タグ パネルで、[親コンテナにドッキングする] をクリックします。次に、スマート タグ グリフをクリックして、スマート タグ パネルを閉じます。
ツールボックスの [コンテナ] ノードから TableLayoutPanel コントロールを SplitContainer コントロールの左側パネルにドラッグします。
TableLayoutPanel コントロールがデザイナ画面に表示され、スマート タグ パネルが開きます。TableLayoutPanel コントロールの子コントロールがグリッドに配置されます。詳細については、「チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。TableLayoutPanel コントロールには、DemoCalculator コントロールのディスプレイとボタンが表示されます。
スマート タグ パネルで、[行および列の編集] をクリックします。
[列と行のスタイル] ダイアログ ボックスが開きます。
5 つの列が表示されるまで、[追加] をクリックします。5 つの列をすべて選択し、[サイズの型] ボックスの [パーセント] をクリックします。[パーセント] の値を 20 に設定します。これで、各列に同じ幅が設定されます。
[表示] ボックスで、[行] をクリックします。
5 つの行が表示されるまで、[追加] をクリックします。5 つの行をすべて選択し、[サイズの型] ボックスの [パーセント] をクリックします。[パーセント] の値を 20 に設定します。これで、各行に同じ高さが設定されます。
[OK] をクリックして変更を適用します。次に、スマート タグ グリフをクリックして、スマート タグ パネルを閉じます。
コントロールの設定
コントロールのレイアウトを設定した後は、DemoCalculator コントロールにボタンとディスプレイを設定できます。
コントロールを設定するには
ツールボックスの TextBox コントロール アイコンをダブルクリックします。
TextBox コントロールが、TableLayoutPanel コントロールの最初のセルに配置されます。
[プロパティ] ウィンドウで、TextBox コントロールの ColumnSpan プロパティの値を 5 に変更します。
TextBox コントロールが、行の中央の位置に移動します。
TextBox コントロールの Anchor プロパティの値を Left、Right に変更します。
TextBox コントロールが水平方向に拡大し、5 つの列の端から端まで広がります。
[プロパティ] ウィンドウで、Font プロパティ ノードを展開します。TextBox コントロールの Size を 14 に設定し、Bold を true に設定します。
TableLayoutPanel コントロールを選択します。
ツールボックスの Button アイコンをダブルクリックします。
Button コントロールが、TableLayoutPanel コントロールの次の開いているセルに配置されます。
ツールボックスの Button アイコンをさらに 4 回ダブルクリックして、TableLayoutPanel コントロールの 2 番目の行に設定します。
Shift キーを押しながら 5 つの Button コントロールをすべてクリックして選択します。Ctrl キーを押しながら C キーを押して、Button コントロールをクリップボードにコピーします。
Ctrl キーを押しながら V キーを押す操作を 3 回行って、TableLayoutPanel コントロールの残りの行に Button コントロールのコピーを貼り付けます。
Shift キーを押しながら 20 個の Button コントロールをすべてクリックして選択します。
[プロパティ] ウィンドウで、Dock プロパティの値を Fill に変更します。
すべての Button コントロールがドッキングして、それらを含んでいるセルを満たします。
[プロパティ] ウィンドウで、Margin プロパティ ノードを展開します。All の値を 5 に設定します。
すべての Button コントロールのサイズが縮小し、それぞれの間の余白が拡大します。
[button10] と [button20] を選択し、Del キーを押してレイアウトから削除します。
[button5] と [button15] を選択し、それぞれの RowSpan プロパティの値を 2 に変更します。これらは、DemoCalculator コントロールの [Clear] ボタンと [=] ボタンになります。
[ドキュメント アウトライン] ウィンドウを使用した、コントロールの移動
コントロールやフォームに複数のコントロールを設定するときは、[ドキュメント アウトライン] ウィンドウを使用すると、より簡単にレイアウト内を移動できます。
[ドキュメント アウトライン] ウィンドウを使用して移動するには
[表示] メニューの [その他のウィンドウ] をポイントし、[ドキュメント アウトライン] をクリックします。
[ドキュメント アウトライン] ウィンドウには、DemoCalculator コントロールとその内在コントロールのツリー ビューが表示されます。SplitContainer などのコンテナ コントロールでは、その子コントロールがサブノードとしてツリーに表示されます。[ドキュメント アウトライン] ウィンドウを使用して、その場でコントロールの名前を変更することもできます。
[ドキュメント アウトライン] ウィンドウで、[button1] を右クリックし、[名前の変更] をクリックします。名前を sevenButton に変更します。
[ドキュメント アウトライン] ウィンドウを使用し、次の一覧に従って、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 に設定します。
[ドキュメント アウトライン] ウィンドウと [プロパティ] ウィンドウを使用して、各 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 コントロールのテキスト プロパティを + に変更します。
デザイナ画面で、Shift キーを押しながらすべての Button コントロールをクリックして選択します。
[プロパティ] ウィンドウで、Font プロパティ ノードを展開します。すべての Button コントロールについて、Size を 14 に設定し、Bold を true に設定します。
DemoCalculator コントロールのデザインはこれで完了です。残すところ、電卓ロジックを実装する作業だけです。
イベント ハンドラの実装
DemoCalculator コントロールのボタンでは、イベント ハンドラを使用して多くの電卓ロジックを実装できます。Windows フォーム デザイナでは、ダブルクリックするだけで、すべてボタンに対してすべてのイベント ハンドラのスタブを実装できます
イベント ハンドラを実装するには
デザイナ画面で、Shift キーを押しながらすべての Button コントロールをクリックして選択します。
Button コントロールのいずれかをダブルクリックします。
デザイナによって生成されたイベント ハンドラに対して、コード エディタが開きます。
コントロールのテスト
DemoCalculator コントロールは UserControl クラスを継承するため、ユーザー コントロール テスト コンテナを使用してその動作をテストできます。詳細については、「方法 : UserControl の実行時の動作をテストする」を参照してください。
コントロールをテストするには
F5 キーを押すことにより、ユーザー コントロール テスト コンテナで DemoCalculator コントロールを作成して実行します。
SplitContainer パネル間の境界線をクリックして、左右にドラッグします。TableLayoutPanel とそのすべての子コントロールのサイズが、空き領域に合わせて自動的に変更されます。
フォームでのコントロールの使用
DemoCalculator コントロールは、他の複合コントロールやフォームで使用できます。その使用手順を以下に示します。
プロジェクトの作成
最初にアプリケーション プロジェクトを作成します。このプロジェクトを使用して、カスタム コントロールを表示するアプリケーションを構築します。
プロジェクトを作成するには
[ファイル] メニューの [追加] をポイントし、[新しいプロジェクト] をクリックして [新しいプロジェクト] ダイアログ ボックスを開きます。
Visual C# プロジェクトの一覧の [Windows アプリケーション] プロジェクト テンプレートをクリックし、[プロジェクト名] ボックスに「DemoCalculatorTest」と入力します。次に、[OK] をクリックします。
ソリューション エクスプローラで、[参照設定] フォルダを右クリックし、[参照の追加] をクリックして [参照の追加] ダイアログ ボックスを開きます。
[プロジェクト] タブをクリックし、DemoCalculatorLib プロジェクトをダブルクリックして、テスト プロジェクトへの参照を追加します。
ソリューション エクスプローラで、[DemoCalculatorTest] を右クリックし、[スタートアップ プロジェクトに設定] をクリックします。
Windows フォーム デザイナで、フォームのサイズを約 700 × 500 に拡大します。
フォームのレイアウトでのコントロールの使用
DemoCalculator コントロールをアプリケーションで使用するには、これをフォームに配置する必要があります。
フォームのレイアウトでコントロールを使用するには
ツールボックスで、[DemoCalculatorLib コンポーネント] ノードを展開します。
ツールボックスの [DemoCalculator] コントロールをフォームにドラッグします。マウス ボタンを押しながら、ツールボックスが閉じるようにして、コントロールを表すグリフをフォームの左上隅に移動します。グリフがフォームの境界線に近づくと、スナップ線が表示されます。スナップ線は、フォームの Padding プロパティからコントロールの Margin プロパティまでの距離を示します。スナップ線で示された位置にコントロールをドロップします。
詳細については、「チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置」を参照してください。
ツールボックスの Button コントロールをドラッグし、フォームにドロップします。
DemoCalculator コントロールの周りで Button コントロールを移動し、スナップ線がどこで表示されるかを確認します。この機能を使用すると、コントロールを正確かつ簡単に配置できます。終了したら Button コントロールを削除します。
DemoCalculator コントロールを右クリックし、[プロパティ] をクリックします。
フォームを選択し、Padding プロパティ ノードを展開します。[All] の値を「20」に変更します。
フォームの新しい Padding 値に合わせて、DemoCalculator コントロールのサイズが縮小します。
さまざまなサイズ変更ハンドルをいろいろな位置にドラッグして、フォームのサイズを変更します。フォームのサイズに合わせて、DemoCalculator コントロールのサイズがどのように変化するかを確認します。
次の手順
このチュートリアルでは、簡単な電卓のユーザー インターフェイスを構築する方法を説明しました。このコントロールの機能は次の方法で拡張できます。
電卓ロジックを実装します。これは簡単なように思えますが、電卓の状態遷移は興味深く、複雑です。
配置用に電卓アプリケーションをパッケージ化します。詳細については、「方法 : ClickOnce アプリケーションを発行する」を参照してください。
参照
処理手順
チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置
チュートリアル : Windows フォーム コンポーネントへのスマート タグの追加
チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置
チュートリアル : ツールボックスへのカスタム コンポーネントの自動設定
方法 : UserControl の実行時の動作をテストする
コントロールとコンポーネントの作成時のトラブルシューティング