方法 : デザイナを使用して Windows フォームでマルチペイン ユーザー インターフェイスを作成する
更新 : 2007 年 11 月
次の手順では、Microsoft Outlook で使用されているユーザー インターフェイスに似たフォルダ一覧、メッセージ ペイン、および プレビュー ペインを備えたマルチペイン ユーザー インターフェイスを作成します。これは、主にコントロールをフォームにドッキングして作成します。
コントロールをドッキングするときは、どちらの親コンテナの端にコントロールを固定するかを決定します。Dock プロパティを Right に設定した場合、コントロールの右端が親コントロールの右端にドッキングされます。さらに、コントロールがドッキングされた端は、そのコンテナ コントロールに合うようにサイズ変更されます。Dock プロパティの機能の詳細については、「方法 : Windows フォーム上のコントロールをドッキングする」を参照してください。
この手順は、機能を追加してアプリケーションを Microsoft Outlook のようにするのではなく、フォーム上に SplitContainer などのコントロールを配置します。
このユーザー インターフェイスを作成するには、左側のパネルに TreeView コントロールを含む SplitContainer コントロール内に、すべてのコントロールを配置します。SplitContainer コントロールの右側のパネルには、第 2 の SplitContainer コントロールが含まれます。第 2 のコントロールでは、上部に ListView コントロール、その下部に RichTextBox コントロールが配置されます。これらの SplitContainer コントロールを使用すると、フォーム上の他のコントロールを個別にサイズ変更できます。この手順に示される手法を応用して、独自のカスタム ユーザー インターフェイスを作成できます。
![]() |
---|
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。 |
デザイン時に Outlook スタイルのユーザー インターフェイスを作成するには
新しい Windows アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。
[ツールボックス] から SplitContainer コントロールをフォームにドラッグします。[プロパティ] ウィンドウで、Dock プロパティを Fill に設定します。
[ツールボックス] から TreeView コントロールを SplitContainer コントロールの左側のパネルにドラッグします。[プロパティ] ウィンドウで Dock プロパティを Left に設定します。これを行うには、値エディタ (下向きの矢印をクリックすると表示されるエディタ) で左側のパネルをクリックします。
[ツールボックス] から別の SplitContainer コントロールをドラッグします。このコントロールは、既にフォームに追加している SplitContainer コントロールの右側のパネルに配置します。[プロパティ] ウィンドウで、Dock プロパティを Fill に、Orientation プロパティを Horizontal に設定します。
[ツールボックス] から ListView コントロールを、フォームに追加した第 2 の SplitContainer コントロールの上部パネルにドラッグします。ListView コントロールの Dock プロパティを Fill に設定します。
[ツールボックス] から RichTextBox コントロールを、第 2 の SplitContainer コントロールの下部パネルにドラッグします。RichTextBox コントロールの Dock プロパティを Fill に設定します。
この時点で F5 キーを押してアプリケーションを実行すると、フォームには、Microsoft Outlook で使用されるような 3 つの部分に分かれたユーザー インターフェイスが表示されます。
メモ :
SplitContainer コントロール内のいずれかの境界線上にマウス ポインタを移動すると、内部寸法のサイズを変更できます。
アプリケーション開発のこの時点で、非常に洗練されたユーザー インターフェイスが作成されました。次の手順では、TreeView コントロールと ListView コントロールをデータ ソースに連結して、アプリケーション自体のプログラミングに進みます。コントロールのデータへの連結の詳細については、「データ連結と Windows フォーム」を参照してください。