Windows フォーム デザイナーには、Windows フォーム アプリケーションをビルドするための多くのツールが用意されています。 この記事では、デザイナーによって提供されるさまざまなツールを使用してアプリをビルドする方法について説明します。これには、次のタスクが含まれます。
- スナップ線を使用してコントロールを配置します。
- スマート タグを使用してデザイナー タスクを実行します。
- コントロールの余白とパディングを設定します。
- TableLayoutPanel コントロールを使用してコントロールを配置します。
- SplitContainer コントロールを使用してコントロールのレイアウトをパーティション分割します。
- [ドキュメント アウトライン] ウィンドウでレイアウト内を移動します。
- サイズと位置情報を表示する位置コントロール。
- [プロパティ] ウィンドウを使用してプロパティ値を設定します。
完了すると、Windows フォーム デザイナーで使用できるレイアウト機能の多くを使用して組み立てられたカスタム コントロールが作成されます。 このコントロールは、単純な電卓のユーザー インターフェイス (UI) を実装します。 次の図は、電卓コントロールの一般的なレイアウトを示しています。
ヒント
C++ 開発者で、フォームとコントロールを含む Windows アプリの作成に役立つチュートリアルを探している場合は、「 フォーム ベースの MFC アプリケーションの作成」を参照してください。 一般化された情報については、「 C++ での Windows プログラミングの概要」を参照してください。
[前提条件]
- Visual Studio をお持ちでない場合は、Visual Studio のダウンロード に移動して無料でインストールしてください。
- .NET デスクトップ アプリケーション開発 ワークロード。 Visual Studio でこのワークロードを確認またはインストールするには、[ツール] >[ツールと機能の取得]を選択します。 詳細については、「ワークロードまたは個々のコンポーネント変更する」を参照してください。
カスタム コントロール プロジェクトを作成する
最初の手順では、DemoCalculator コントロール プロジェクトを作成します。
Visual Studio を開き、C# または Visual Basic の .NET Framework テンプレートを使用して、新しい Windows フォーム コントロール ライブラリ プロジェクトを作成します。 プロジェクトに DemoCalculatorLib という名前を付けます。
ファイルの名前を変更するには、 ソリューション エクスプローラーで UserControl1.vb または UserControl1.csを右クリックし、[ 名前の変更] を選択し、ファイル名をDemoCalculator.vbまたはDemoCalculator.csに変更します。 コード要素 "UserControl1" へのすべての参照の名前を変更するかどうかを確認するメッセージが表示されたら、[ はい ] を選択します。
Windows フォーム デザイナーには、DemoCalculator コントロールのデザイナー 画面が表示されます。 このビューでは、ツールボックスからコントロールとコンポーネントを選択し、デザイナー画面に配置することで、コントロールの外観をグラフィカルにデザインできます。 カスタム コントロールの詳細については、「さまざまな カスタム コントロール」を参照してください。
コントロール レイアウトを設計する
DemoCalculator コントロールには、いくつかの Windows フォーム コントロールが含まれています。 この手順では、Windows フォーム デザイナーを使用してコントロールを配置します。
Windows フォーム デザイナーで、右下隅にあるサイズ変更ハンドルを選択し、ドラッグしてサイズを変更することで、DemoCalculator コントロールを大きなサイズに変更します。 Visual Studio の右下隅で、コントロールのサイズと場所の情報を見つけます。 コントロールのサイズを変更するときにサイズ情報を見て、コントロールのサイズを幅 1000 と高さ 800 に設定します。 [ プロパティ ] ウィンドウの下部まで下にスクロールすることもできます。このウィンドウは、通常は右下隅にドッキングされ、 Size プロパティに値を手動で入力します。
ツールボックスで、[コンテナー] ノードを選択して開きます。 SplitContainer コントロールを選択し、デザイナー画面にドラッグします。
SplitContainerは、DemoCalculator コントロールのデザイナー画面に配置されます。ヒント
SplitContainerコントロールは、DemoCalculator コントロールのサイズに合わせてサイズを変更します。 [プロパティ] ウィンドウを見て、SplitContainerコントロールのプロパティ設定を確認します。 Dock プロパティを見つけます。 値は DockStyle.Fill です。つまり、SplitContainerコントロールは常に DemoCalculator コントロールの境界に合わせてサイズを変更します。 DemoCalculator コントロールのサイズを変更して、この動作を確認します。[ プロパティ ] ウィンドウで、 Dock プロパティの値を
Noneに変更します。SplitContainerコントロールは既定のサイズに縮小され、DemoCalculator コントロールのサイズに従いません。
コントロールの右上隅にあるSplitContainerを選択します。 [ 親コンテナーにドッキング] を選択して、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コントロールは、DemoCalculator コントロールの表示とボタンを保持します。 詳細については、「 チュートリアル: TableLayoutPanel を使用してコントロールを配置する」を参照してください。スマート タグ パネルで [行と列の編集] を選択します。
[ 列と行のスタイル ] ダイアログ ボックスが開きます。
5 つの列が表示されるまで [追加] ボタンを選択します。 5 つの列をすべて選択し、[サイズの種類] ボックスで [パーセント] を選択します。 パーセント値を 20 に設定します。 このアクションにより、各列が同じ幅に設定されます。
[表示] で [行] を選択します。
5 行が表示されるまで [追加] を 選択します。 5 行すべてを選択し、[サイズの種類] ボックスで [パーセント] を選択します。 パーセント値を 20 に設定します。 このアクションにより、各行の高さが同じに設定されます。
[ OK] を 選択して変更を受け入れ、スマート タグ グリフを選択してスマート タグ パネルを閉じます。
[ プロパティ ] ウィンドウで、
Dockプロパティの値をFillに変更します。
コントロールにデータを入力する
コントロールのレイアウトが設定されたので、DemoCalculator コントロールにボタンとディスプレイを設定できます。
ツールボックスで、
TextBoxコントロール アイコンを選択します。TextBoxコントロールは、TableLayoutPanelコントロールの最初のセルに配置されます。[ プロパティ ] ウィンドウで、
TextBoxコントロールの ColumnSpan プロパティの値を 5 に変更します。TextBoxコントロールは、その行の中央にある位置に移動します。TextBoxコントロールのAnchorプロパティの値をLeftRightに変更します。TextBoxコントロールは、5 つの列すべてにまたがって水平方向に展開されます。TextBoxコントロールのTextAlignプロパティの値をRightに変更します。[ プロパティ ] ウィンドウで、
Fontプロパティ ノードを展開します。Sizeを14に設定し、Boldをtrueに設定してTextBoxコントロールを操作します。TableLayoutPanelコントロールを選択します。ツールボックスで、
Buttonアイコンを選択します。Buttonコントロールは、TableLayoutPanelコントロールの次の開いているセルに配置されます。ツールボックスで、
Buttonアイコンをもう 4 回選択して、TableLayoutPanelコントロールの 2 番目の行を設定します。Buttonキーを押したまま、 コントロールを 5 つすべて選択します。 Ctrl+キーを押して、Buttonコントロールをクリップボードにコピーします。Ctrl+V キーを 3 回押して、
Buttonコントロールを残りのTableLayoutPanelコントロールの行にコピーして貼り付けます。Buttonコントロールをすべて選択するには、Shift キーを押しながら 20 個のコントロールを選択します。[ プロパティ ] ウィンドウで、
Dockプロパティの値をFillに変更します。すべての
Buttonコントロールは、含まれているセルを埋めるためにドッキングします。[ プロパティ ] ウィンドウで、
Marginプロパティ ノードを展開します。Allの値を 5 に設定します。すべての
Buttonコントロールのサイズが小さくなり、それらの間に余白が大きくなります。button10 と button20 を選択し、Delete キーを押してレイアウトから削除します。
button5 と button15 を選択し、
RowSpanプロパティの値を 2 に変更します。 これらのボタンは、DemoCalculator コントロールの [クリア ] ボタンと [ = ] ボタンを表します。
[ドキュメント アウトライン] ウィンドウを使用する
コントロールまたはフォームに複数のコントロールが設定されている場合は、[ドキュメント アウトライン] ウィンドウを使用してレイアウト内を移動する方が簡単な場合があります。
メニュー バーで、[ 表示>その他のウィンドウ>ドキュメント アウトラインを選択します。 または、キーボードでCtrl+Alt+Tキーを押します。
[ドキュメント アウトライン] ウィンドウには、DemoCalculator コントロールとその構成コントロールのツリー ビューが表示されます。
SplitContainerのようなコンテナー コントロールは、子コントロールをツリー内のサブノードとして表示します。 また、[ドキュメント アウトライン] ウィンドウを使用して、コントロールの名前を変更することもできます。[ ドキュメント アウトライン ] ウィンドウで、 button1 を右クリックし、[ 名前の変更 ] (キーボード: F2) を選択します。 名前を sevenButton に変更します。
[ドキュメント アウトライン] ウィンドウを使用して、次の一覧に従って、
Buttonコントロールの名前をデザイナーによって生成された名前から実稼働名に変更します。button1 から sevenButton
button2 を eightButton に
button3 を nineButton に変更
button4 を divisionButton に変更
button5 を clearButton に
button6 から fourButton
button7 から fiveButton
button8 へ sixButton
button9 から 乗算ボタン
button11 から oneButton
button12 から twoButton
button13 から threeButton
button14 を subtractionButton に
button15をequalsButtonに変更する
button16 から zeroButton
button17 を使用してSignButton を変更する
button18 から decimalButton
ボタン19をadditionButton
[ドキュメント アウトライン] ウィンドウと [プロパティ] ウィンドウを使用して、次の一覧に従って、各
Textコントロール名のButtonプロパティの値を変更します。sevenButton コントロールのテキスト プロパティを 7 に変更する
eightButton コントロールのテキスト プロパティを 8 に変更する
nineButton コントロールのテキスト プロパティを 9 に変更する
divisionButton コントロールのテキスト プロパティを / (フォワードスラッシュ) に変更する
clearButton コントロールのテキスト プロパティを Clear に変更する
fourButton コントロールのテキスト プロパティを 4 に変更する
fiveButton コントロールのテキスト プロパティを 5 に変更する
sixButton コントロールのテキスト プロパティを 6 に変更する
乗算Button コントロールのテキスト プロパティを * (アスタリスク) に変更する
oneButton コントロールのテキスト プロパティを 1 に変更する
twoButton コントロールのテキスト プロパティを 2 に変更する
threeButton コントロールのテキスト プロパティを 3 に変更する
subtractionButton コントロールのテキスト プロパティを - (ハイフン) に変更する
equalsButton コントロールのテキスト プロパティを = に変更する (等号)
zeroButton コントロールのテキスト プロパティを 0 に変更する
changeSignButton コントロールのテキスト プロパティを次の値に変更します。 +/-
decimalButton コントロールのテキスト プロパティを . (ピリオド) に変更します。
additionButton コントロールのテキスト プロパティを + に変更する (プラス記号)
デザイナー画面で、
Buttonキーを押しながらすべての コントロールを選択します。[ プロパティ ] ウィンドウで、
Fontプロパティ ノードを展開します。Sizeを 14 に設定し、Boldをすべてのコントロールに設定します。
この一連の手順により、DemoCalculator コントロールの設計が完了します。 残っているのは、電卓ロジックを提供することです。
イベント ハンドラーを実装する
DemoCalculator コントロールのボタンには、電卓ロジックの多くを実装するために使用できるイベント ハンドラーがあります。 Windows フォーム デザイナーを使用すると、すべてのボタンのすべてのイベント ハンドラーのスタブを 1 つの選択で実装できます。
デザイナー画面で、
Buttonキーを押しながらすべての コントロールを選択します。Buttonコントロールのいずれかを選択します。コード エディターが開き、デザイナーによって生成されたイベント ハンドラーが表示されます。
このチュートリアルはデザイナーに重点を置いているため、電卓機能の実装の詳細は省略します。
コントロールをテストする
DemoCalculator コントロールは UserControl クラスから継承されるため、 UserControl テスト コンテナーでその動作をテストできます。 詳細については、「 方法: UserControl の実行時動作をテストする」を参照してください。
F5 キーを押して、UserControl テスト コンテナーで DemoCalculator コントロールをビルドして実行します。
SplitContainerパネル間の境界線を選択し、左右にドラッグします。TableLayoutPanelとそのすべての子コントロールは、使用可能な領域に収まるように自身のサイズを変更します。コントロールのテストが完了したら、[ 閉じる] を選択します。
フォームでコントロールを使用する
DemoCalculator コントロールは、他の複合コントロールまたはフォームで使用できます。 次の手順では、その使用方法について説明します。
プロジェクトを作成する
最初の手順では、アプリケーション プロジェクトを作成します。 このプロジェクトを使用して、カスタム コントロールを表示するアプリケーションをビルドします。
新しい Windows フォーム アプリ (.NET Framework) プロジェクトを既存のソリューションに追加し、 DemoCalculatorTest という名前を付けます。
ソリューション エクスプローラーで DemoCalculatorTest プロジェクトを右クリックし、追加>Reference を選択して[参照マネージャー] ダイアログ ボックスを開きます。
[ プロジェクト ] タブに移動し、DemoCalculatorLib プロジェクトを選択して、テスト プロジェクトへの参照を追加します。
ソリューション エクスプローラーでDemoCalculatorTest を右クリックし、[スタートアップ プロジェクトとして設定] を選択します。
Windows フォーム デザイナーで、フォームのサイズを約 1400 x 1000 に増やします。
フォームのレイアウトでコントロールを使用する
アプリケーションで DemoCalculator コントロールを使用するには、フォームに配置する必要があります。
ツールボックスで、DemoCalculatorLib コンポーネント ノードを展開します。
DemoCalculator コントロールをツールボックスからフォームにドラッグします。 コントロールをフォームの左上隅に移動します。 コントロールがフォームの境界線に近い場合は、 スナップ線 が表示されます。 スナップ線は、フォームの
PaddingプロパティとコントロールのMarginプロパティの距離を示します。 スナップ線で示される位置にコントロールを配置します。詳細については、「 チュートリアル: スナップ線を使用してコントロールを配置する」を参照してください。
Buttonからをドラッグし、フォームにドロップします。Buttonコントロールを DemoCalculator コントロールの周囲に移動し、スナップ線が表示される場所を確認します。 この機能を使用すると、コントロールを正確かつ簡単に配置できます。 完了したら、Buttonコントロールを削除します。DemoCalculator コントロールを右クリックし、[ プロパティ] を選択します。
Dockプロパティの値をFillに変更します。フォームを選択し、
Paddingプロパティ ノードを展開します。 All の値を 20 に変更します。DemoCalculator コントロールのサイズは、フォームの新しい
Padding値に合わせて縮小されます。さまざまなサイズ変更ハンドルを異なる位置にドラッグして、フォームのサイズを変更します。 DemoCalculator コントロールがフィットするようにサイズ変更される様子を観察します。
次のステップ
この記事では、単純な電卓のユーザー インターフェイスを構築する方法について説明しました。 続行するには、電卓ロジックを実装して機能を拡張し、 ClickOnce を使用してアプリを発行します。 または、 Windows フォームを使用して画像ビューアーを作成する別のチュートリアルに進みます。