次の方法で共有

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

  • [アーティクル]

次の手順では、フォルダーの リスト、メッセージ ウィンドウ、プレビュー ウィンドウを使用して、Microsoft Outlook で使用されているのと同様のマルチペイン ユーザー インターフェイスを作成します。 フォームでコントロールをドッキングすることにより、この配置が主に実現されます。

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

この手順では、アプリケーションが Microsoft Outlook を模倣する機能を追加することではなく、フォーム上の SplitContainer とその他のコントロールを配置することに重点を置いています。

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

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

  1. 新しい Windows アプリケーション プロジェクトを作成します (ファイル新しいプロジェクトVisual C# または Visual Basicクラシック デスクトップWindows フォーム アプリケーションを )。

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

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

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

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

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

    この時点で、F5 キーを押してアプリケーションを実行すると、フォームに Microsoft Outlook と同様の 3 部構成のユーザー インターフェイスが表示されます。

    手記

    SplitContainer コントロール内のいずれかのスプリッターの上にマウス ポインターを置くと、内部寸法のサイズを変更できます。

アプリケーション開発のこの時点で、高度なユーザー インターフェイスを作成しました。 次の手順では、TreeView コントロールと ListView コントロールを何らかの種類のデータ ソースに接続することによって、アプリケーション自体のプログラミングを進めます。 コントロールをデータに接続する方法の詳細については、「データ バインディングと Windows フォームの」を参照してください。

関連項目