次の方法で共有


方法 : デザイナを使用して Windows フォームでマルチペイン ユーザー インターフェイスを作成する

更新 : 2007 年 11 月

次の手順では、Microsoft Outlook で使用されているユーザー インターフェイスに似たフォルダ一覧、メッセージ ペイン、および プレビュー ペインを備えたマルチペイン ユーザー インターフェイスを作成します。これは、主にコントロールをフォームにドッキングして作成します。

コントロールをドッキングするときは、どちらの親コンテナの端にコントロールを固定するかを決定します。Dock プロパティを Right に設定した場合、コントロールの右端が親コントロールの右端にドッキングされます。さらに、コントロールがドッキングされた端は、そのコンテナ コントロールに合うようにサイズ変更されます。Dock プロパティの機能の詳細については、「方法 : Windows フォーム上のコントロールをドッキングする」を参照してください。

この手順は、機能を追加してアプリケーションを Microsoft Outlook のようにするのではなく、フォーム上に SplitContainer などのコントロールを配置します。

このユーザー インターフェイスを作成するには、左側のパネルに TreeView コントロールを含む SplitContainer コントロール内に、すべてのコントロールを配置します。SplitContainer コントロールの右側のパネルには、第 2 の SplitContainer コントロールが含まれます。第 2 のコントロールでは、上部に ListView コントロール、その下部に RichTextBox コントロールが配置されます。これらの SplitContainer コントロールを使用すると、フォーム上の他のコントロールを個別にサイズ変更できます。この手順に示される手法を応用して、独自のカスタム ユーザー インターフェイスを作成できます。

ms233661.alert_note(ja-jp,VS.90).gifメモ :

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

デザイン時に Outlook スタイルのユーザー インターフェイスを作成するには

  1. 新しい Windows アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。

  2. [ツールボックス] から SplitContainer コントロールをフォームにドラッグします。[プロパティ] ウィンドウで、Dock プロパティを Fill に設定します。

  3. [ツールボックス] から TreeView コントロールを SplitContainer コントロールの左側のパネルにドラッグします。[プロパティ] ウィンドウで Dock プロパティを Left に設定します。これを行うには、値エディタ (下向きの矢印をクリックすると表示されるエディタ) で左側のパネルをクリックします。

  4. [ツールボックス] から別の SplitContainer コントロールをドラッグします。このコントロールは、既にフォームに追加している SplitContainer コントロールの右側のパネルに配置します。[プロパティ] ウィンドウで、Dock プロパティを Fill に、Orientation プロパティを Horizontal に設定します。

  5. [ツールボックス] から ListView コントロールを、フォームに追加した第 2 の SplitContainer コントロールの上部パネルにドラッグします。ListView コントロールの Dock プロパティを Fill に設定します。

  6. [ツールボックス] から RichTextBox コントロールを、第 2 の SplitContainer コントロールの下部パネルにドラッグします。RichTextBox コントロールの Dock プロパティを Fill に設定します。

    この時点で F5 キーを押してアプリケーションを実行すると、フォームには、Microsoft Outlook で使用されるような 3 つの部分に分かれたユーザー インターフェイスが表示されます。

    ms233661.alert_note(ja-jp,VS.90).gifメモ :

    SplitContainer コントロール内のいずれかの境界線上にマウス ポインタを移動すると、内部寸法のサイズを変更できます。

    アプリケーション開発のこの時点で、非常に洗練されたユーザー インターフェイスが作成されました。次の手順では、TreeView コントロールと ListView コントロールをデータ ソースに連結して、アプリケーション自体のプログラミングに進みます。コントロールのデータへの連結の詳細については、「データ連結と Windows フォーム」を参照してください。

参照

処理手順

SplitContainer コントロールのサンプル

参照

SplitContainer

その他の技術情報

SplitContainer コントロール (Windows フォーム)