バージョン

WinDockManager をフォームに追加

このトピックでは、ユーザーができるだけ早く操作に慣れることができるよう、WinDockManager コントロールを Visual Studio.NET. のフォームに追加するために最低限必要な基本手順について説明します。この演習では、WinDockManager を Visual Basic.NET プロジェクトに追加して、デザインタイムに 1 組の小さなドッキング ペインを作成する方法を示します。また、ランタイムにユーザーが使用できるコントロールの機能についてもいくつか示します。

  1. Visual Studio.NET を開きます。

  2. Visual Basic または C# Windows Application プロジェクトを新しく作成します。

  3. ツールボックスの UltraDockManager コントロールを選択して、フォームにコントロールをドラッグします。

DockManager は非表示エレメントであるため、フォーム上に描画する必要はありません。このエレメントは、フォームのすぐ下にあるコンポーネント トレイに表示されます。また、この時点で、ソリューション エクスプローラ ウィンドウの [参照設定] セクションに Infragistics.Shared、Infragistics.Win および Infragistics.Win.UltraWinDock への参照が追加されていることを確認してください。

  1. Visual Studio ツールボックスの Windows Forms グループを選択します。TreeView コントロールを選択して、フォームにコントロールを描画します。高さはフォーム全体、幅はフォームの約 3 分の 1 を占めるように、コントロールを作成します。

次に、ListView コントロールを選択して、フォームに ListView を描画します。フォーム上部の、フォームの幅の残り 3 分の 2 を占める位置にコントロールを描画します。

RichTextBox コントロールを選択して、フォームの ListView コントロールのすぐ下に描画します。フォームの下端近くにまで拡大しますが、ボタンコントロールのための場所を残してきます。

最後に、ボタンコントロールを選択して、フォームの右下、つまり RichTextBox コントロールのすぐ下に配置します。

ここまで作業を終えると、フォームは次のようになります。

  1. TreeView コントロールを右クリックして、コンテキスト メニューから [コントロールのドック] を選択します。[新しいドック領域] ダイアログが表示されます。このダイアログを使用して、ひとつまたは複数のコントロール用のドッキング ペインを作成し、ペインの初期位置を設定します。ダイアログの上部にあるリストには、TreeView がドッキング用に選択されたコントロールとして表示されます。[ドック領域位置] コンボ ボックスが

DockedLeft
に、[子ペイン スタイル] コンボ ボックスが
VerticalSplit
に、それぞれ設定されていることを確認します。[OK] をクリックすると、TreeView コントロールに代わって、TreeView コントロールを格納しているドッキング ペインが表示されます。

  1. ListView コントロールをクリックしてから、Ctrl キーを押したまま RichTextBox コントロールをクリックして、両方のコントロールを選択します。いずれかのコントロールを右クリックして、コンテキスト メニューから [コントロールのドック] を選択します。[新しいドック領域] ダイアログが表示され、両方のコントロールがリスト表示されます。ListView1 がリストの先頭にくるように設定します。位置を移動するには、リストの右側にある矢印ボタンを使用します。

[ドック領域位置] を DockedTop に変更します。[子ペイン スタイル] を HorizontalSplit に変更します。[OK] をクリックします。両方のコントロールがそれぞれ専用のペインに表示されますが、これらのペインはコントロールが最初に作成された順序でグループ化されています（必要であれば、コントロールのすぐ下にマウス ポインタを置いてサイズ変更ポインタを表示し、RichTextBox ペインの下端のサイズを変更します。ペインのサイズを変更すると、両方のコントロールのサイズが調整されることがわかります。作成したボタンの上に来るまでペインのサイズを変更してください）。

この時点で、アプリケーションは次のようになります。

WinDockManager Adding WinDockManager to a Form 01.png

  1. Button1 をダブルクリックして次のコードを入力します。

Visual Basic の場合：

Private Sub Button1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles Button1.Click
	Me.UltraDockManager1.ShowAll(True)
End Sub

C# の場合：

private void button1_Click(object sender, System.EventArgs e)
{
	this.ultraDockManager1.ShowAll(true);
}

このコードにより、アプリケーションの実行中に非表示にされていた（閉じられていた）ペインがすべて表示されます。

  1. プロジェクトを実行します。フォームがデザインタイムとほとんど同じように表示されることがわかります。

  2. TreeView ペインのタイトル バーにあるピン アイコンをクリックします。すると、TreeView ペインが左のドッキング領域にピンで固定されます。ペインのピンが固定されているときは、そのペインを表すタブがドッキング領域に表示され、ペインが使用されていないときはフォームの端に縮小されます。ペインを初めてピンで固定したとき、ペインはアクセスした端からすぐに「フライアウト」しますが、ListView と RichTextBox の各コントロール ペインの幅が変更されていることがわかります。

  3. ListView コントロールをクリックします。すると、TreeView ペインが左のドッキング領域に縮小して戻り、他の 2 つのペインがフォームの上部全体を占めることがわかります。

  4. マウス ポインタを、左のドッキング領域にある TreeView1 タブ上に移動します。すると、TreeView ペインがフライアウトして表示されますが、アクティブにはなりません。タブをクリックすると、ペインのタイトル バーの色が変わり、ペインがアクティブになったことを示します。再び、タイトル バーにあるピン アイコンをクリックします。すると、TreeView ペインが元の位置に戻れるように、他の 2 つのコントロール ペインのサイズが自動的に変更されます。表示されているドッキング領域とタブは不要になるため、画面上から消えます。

  5. ListView ペインのタイトル バーをクリックし、ドラッグしてフォームから切り離します。ペインをドロップしたときの表示位置を示す輪郭線が表示されます。マウス ボタンを離すと、ペインが固有のフローティング ウィンドウに表示されます。

  6. ListView ペインのタイトル バーにある X アイコンをクリックしてペインを閉じます。次に、RichTextBox コントロールのペインで X アイコンをクリックしてペインを閉じます。ペインを閉じると、ペインとそのコントロールが非表示になります。これで、フォーム上に表示されているのは TreeView ペインだけになります。Button1 をクリックして、非表示のペインを元に戻します。これで、すべてのペインが前の位置に表示されます。

  7. ListView ペインをフォームにドラッグして戻しますが、ドロップする前にマウス ポインタを動かして、他のドッキング領域を確認してみます。ペインをドロップしたときの表示位置を示すプレビュー四角形が表示されます。マウス ポインタを RichTextBox ペインのタイトル バー領域に移動します。すると、プレビュー四角形が不規則な四角形に変わるか、または下にタブの付いた四角形に変わります。マウス ボタンを離すと、2 つのペインによってタブ グループが形成されます。

  8. ペインの下にあるタブをクリックして、コントロールを切り替えます。次に、ListView のタブをクリックし、ペインのタイトル バーにドラッグします。すると、ペインの配置が元の設定に戻ります。

これ以外にもさまざまなマウス操作の組み合わせを実行して、ペインの配置がどのように変わるかを試してみることができます。ペインのタイトル バーをダブルクリックまたは右クリックしてみてください。タブ グループを作成し、そのタイトル バーをドラッグしてフォームから切り離してみてください。あるいは、タブ グループのピンを固定または解除してみてください。DockManager コントロールはアプリケーションの外観をカスタマイズするための柔軟な機能を豊富に備えていることがわかります。