Home > C# > Toolkit > DockingWindow > AvalonDock > ドキュメント

AvalonDock 2.0 を使用するにあたって PART 1

原文

AvalonDock 2.0 getting started guide PART 1(外部サイト)

AvalonDock 2.0 を使用するにあたって PART 1

訳文

AvalonDock 2.0入門ガイドPART 1

AvalonDock 2.0は、Visual Studio GUIに非常によく似たWPFのためのインターフェースを作成することができます。 文書とツールを持つプロジェクトに最適になるように考慮して、開発されたことを理解することが重要です。 このチュートリアルでは、私は、AvalonDockの使用を開始する方法を説明します。

下の情報はバージョン2.0と関連しており、より以前のバージョンには有効ではありません。AvalonDockは配置モデルで構成され、 一連のコントロールはビューにより表示されます。そして、DockingManagerクラスは、ユーザーが文書とツールをドラッグ&ドロップすることができる、 ドッキング領域を表示します。下記のスクリーン・ショットを見ることで、私たちは、AvalonDockコンポーネントを確認することができます。

AvalonDocコンポーネント

DockingManage

これは、AvalonDockの中心的なコントロールです。それは、収容さた枠を配置し、飛び出した枠とフローティング・ウィンドウを処理します。 上記の画像のDockingManagerオブジェクトは、上部のツールバーから底のステータス・バーまで、( WPF用語の)すべてが含まれています。 DockingManagerクラスは、さらに、レイアウトの保存と復元を処理します。

LayoutPanel

このパネルは、それらの間で(Orientationのプロパティで選択する)方向に沿って、寸法変更機能を追加し、枠の子を配置します。 上のLayoutPanelでは、水平方向に3つの枠(LayoutAnchorablePaneは左側に、LayoutDocumentPaneは中央部に、LayoutDockablePaneは右側に)を配置されています。

LayoutAnchorablePane

このレイアウト要素は、LayoutAnchorableオブジェクトのコレクションが含まれています。 通常、それは、tabcontrolのような内容を配置します。上記のスクリーン・ショットのLayoutDockablePanesは、 左側のコンテナの内容『Strumenti』と『Progetti』(英語のToolとProject)と、右側のコンテナ『Classi』と『Proprieta』(英語のClassとProperty)です。 LayoutDockablePaneは自動で隠すことができます(含まれている内容『Errori』(エラー)、『Lista Azioni』(動作リスト)と『Uscita』(出力)のように)。 そして、フローティング・ウィンドウのDockingManagerの上にドラッグすることができ、親のDockingManagerの境界線に固定することができます。

LayoutDocumentPane

この形式の枠は、通常の文書(DocumentContent型のオブジェクト)を収容していますが、 しかし、オプションとして、上記の『ツール』や『クラス』の内容のように、さらに、DockableContentsオブジェクトを収容することができます。 上記の文書内容は、中央部にある、先ほど述べたDockablePaneオブジェクトの間のResizingPanelの中で(水平方向に)配置されます。 文書枠は、移動することができません。

LayoutAnchorable

anchorableコンテンツは、アプリケーション・コントロールのコンテナです。 それは、常に、枠の中に収容されています(LayoutAnchorablePaneまたはLayoutDocumentPane)。 上のスクリーン・ショットでは、LayoutAnchorableオブジェクトは、『classi』(クラス)オブジェクトです(それが、SharpDevelopオブジェクトを収容しています)、 『strumenti』(ツール)オブジェクトだけでなく、さらに『Errori』(エラー)も(それが自動で隠れる状態で、 自動で隠れる枠で収容されています)。名前で示唆されるようにLayoutAnchorableは、そのコンテナの枠から離れてドラッグすることができ、 他に存在する枠に、あるいは、親のDockingManagerの境界線に再配置、 あるいは、フローティング・ウィンドウに残る(LayoutAnchorableFloatingWindow)ことができます。

LayoutDocument

LayoutDocumentは、LayoutDocumentPaneだけでホストできる内容です。 それは、境界線に固定できない、しかし、LayoutDocumentPaneだけに配置されることができ、 またはLayoutDocumentFloatingWindowで浮いた状態にできる特殊な内容です。 上記のLayoutDocumentオブジェクトは『program.cs』または『MainForm.cs』ファイルです。

LayoutFloatingWindow

それは、DockingManagerの上にドラッグされるか、移動されるときの内容を含むウィンドウです。 LayoutFloatingWindow(そして、その専門化したLayoutAnchorableFloatingWindowとLayoutDocumentFloatingWindow)は、 ウィンドウから派生し、常に、枠(LayoutAnchorablePaneまたはLayoutDocumentPane)を収容し、 順番に一つ以上の内容(LayoutAnchorableまたはLayoutDocument)を収容します。 ユーザーが、内容またはDockablePaneに対して、ドラッグ操作を始める、 または、コードから手動でLayoutContent.Float()メソッドを呼び出すとき、 LayoutFloatingWindowオブジェクトはDockingManagerから直接作成されます。

LayoutPane

それは、LayoutDockablePaneとLayoutDocumentPaneの基底クラスです。 それは、両方のために一般的なプロパティとメソッドを提供します。

LayoutContent

それは、LayoutAnchorableとLayoutDocumentの基底クラスです。それは、両方のために一般的なプロパティとメソッドを提供します。

レイアウト要素は、クラスで配置モデルに属しておりビューではないことを理解することが重要です。 それで、それらは、FrameworkElementクラスからは派生していません。 その代わりに、AvalonDockは、コンポーネントのビューを表示するクラスの異なる項目を収容しています。 これらのクラスは、通常、対応するレイアウト要素に、「Control」文字列を加えて命名されます。 したがって、たとえば、LayoutAnchorableがAvalonDockレイアウトの中に作成されるときには、 LayoutAnchorableControl( FrameworkElement派生クラス)を作成して、 LayoutAnchorableControl.ModelとLayoutAnchorableオブジェクトを結合します。

作成されるすべてのビュー・コントロールは、常にModelプロパティによってレイアウト要素に密接に結びついています。 AvalonDockコンポーネントのスタイルを変更することにより、関連したWPFスタイルのビュー・コントロールを提供することが可能になります。

新しい.NET 4/.NET 4.5ソリューションの作成を開始するには、AvalonDock.dllを参照に追加します(直接、あるいは、NuGetを使用して)。 続いて、MainWindow.xamlにAD名前空間を追加します。ルート・グリッドの下で、DockingManagerとサンプル・レイアウトを配置します。:


<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:avalonDock="http://avalondock.codeplex.com"
        Title="MainWindow" Height="434" Width="684">
    <Grid>
        <avalonDock:DockingManager x:Name="dockingManager">
            <avalonDock:LayoutRoot>
                <avalonDock:LayoutPanel Orientation="Horizontal">
                    <avalonDock:LayoutDocumentPane/>
                    <avalonDock:LayoutAnchorablePane DockWidth="150">
                        <avalonDock:LayoutAnchorable Title="Sample Tool Pane">
                            <TextBox/>
                        </avalonDock:LayoutAnchorable>
                    </avalonDock:LayoutAnchorablePane>
                </avalonDock:LayoutPanel>
                <avalonDock:LayoutRoot.LeftSide>
                    <avalonDock:LayoutAnchorSide>
                        <avalonDock:LayoutAnchorGroup>
                            <avalonDock:LayoutAnchorable Title="Autohidden Content">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                        </avalonDock:LayoutAnchorGroup>
                    </avalonDock:LayoutAnchorSide>
                </avalonDock:LayoutRoot.LeftSide>
            </avalonDock:LayoutRoot>
        </avalonDock:DockingManager>
    </Grid>
</Window>
レイアウト要素

DockingManagerクラスは、AvalonDockの中核です。レイアウトを作成して、管理する役割を果たします。 レイアウトは、ILayoutElementオブジェクトのツリーと同じように定義されます。いくつかの基本的となる子により構成されるLayoutRootクラスでルートは表示されます。:

ルート・プロパティを通してアクセス可能なルート・パネルは、メインLayoutPanelを示し、同様にLayoutRootクラスの内容プロパティです。 RightSide/LeftSide/TopSide/BottonSideは、(大雑把に言って)LayoutAnchorGroup型オブジェクトのコレクション・プロパティです。 それらは、自動で隠れるanchorablesをホストするドッキング・マネージャーの4つの側面を表示します。 ユーザーが、これらの範囲の上の1つにマウスを移動すると、anchorableのリンクは自動に隠れるウィンドウで示されます。 FloatingWindowsプロパティは、FloatingWindowのコレクションです。 フローティングウィンドウは、ユーザーが枠(LayoutAnchorableまたはLayoutDocument)をドラッグするたびに、作成されます。 このコレクションは、AvalonDockによって自動的に更新されます。 しかし、それは、LayoutContentクラスのfloat()メソッドを呼び出して、フロートフローティング・ウィンドウを作成することができます。 Anchorableオブジェクトのコレクションは、隠されます。 既定では、ユーザーがLayoutAnchorable AvalonDockの[X]ボタンをクリックしたときに、それを非表示にします。:

つまり、それはレイアウトから固定可能なものを削除して、隠れたコレクションに配置します。 ユーザーが再びそれを表示したいときに、ADは、このコレクションからコンテンツを削除し、それが隠されていた枠を再表示しようと試みます。 レイアウト・ツリーの動作は、どんな複雑なインターフェースでも作成できました。LayoutAnchorablePaneのDockWidth/Heightは、 枠の最初のWidth/Heightを与えるために使用することができます。 LayoutDocumentPaneクラスは、常に、その代わりに、全ての利用できる余白を使用します。 AvalonDockは、利用可能なすべてのスペースを占有しているので、内容の幅と高さを管理しています。 それで、LayoutAnchorablePaneが、LayoutPanelを収容している場合、そこには、LayoutDocumentPaneが存在し、 それは、LayoutAnchorablePaneとLayoutDocumentPaneの文字列のために固定された大きさを使用します。 LayoutAnchorablePanesだけが存在するLayoutPanelに収容されている場合、それはLayoutAnchorableオブジェクトに文字列を提供します。 より多くのLayoutDocumentPane/LayoutAnchorablePaneを配置するために、 LayoutDocumentGroup/LayoutAnchorableGroupクラスは使用することができます。 たとえば、先程の例を、より複雑なシナリオを表示するように変更してみましょう。


<Window x:Class="AvalonDock2Tutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:avalonDock="http://avalondock.codeplex.com"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <avalonDock:DockingManager x:Name="dockingManager">
            <avalonDock:LayoutRoot>
                <avalonDock:LayoutPanel Orientation="Horizontal">
                    <avalonDock:LayoutDocumentPaneGroup>
                        <avalonDock:LayoutDocumentPane>
                            <avalonDock:LayoutDocument Title="Doc1">
                                <TextBox/>
                            </avalonDock:LayoutDocument>
                            <avalonDock:LayoutDocument Title="Doc2">
                                <TextBox/>
                            </avalonDock:LayoutDocument>
                        </avalonDock:LayoutDocumentPane>
                        <avalonDock:LayoutDocumentPane>
                            <avalonDock:LayoutDocument Title="Doc3">
                                <TextBox/>
                            </avalonDock:LayoutDocument>
                        </avalonDock:LayoutDocumentPane>                        
                    </avalonDock:LayoutDocumentPaneGroup>
                    <avalonDock:LayoutAnchorablePaneGroup DockWidth="150" Orientation="Vertical">
                        <avalonDock:LayoutAnchorablePane>
                            <avalonDock:LayoutAnchorable Title="Tool 1">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                            <avalonDock:LayoutAnchorable Title="Tool 2">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                        </avalonDock:LayoutAnchorablePane>
                        <avalonDock:LayoutAnchorablePane>
                            <avalonDock:LayoutAnchorable Title="Tool 3">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                            <avalonDock:LayoutAnchorable Title="Tool 4">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                        </avalonDock:LayoutAnchorablePane>
                    </avalonDock:LayoutAnchorablePaneGroup>
                </avalonDock:LayoutPanel>
                <avalonDock:LayoutRoot.LeftSide>
                    <avalonDock:LayoutAnchorSide>
                        <avalonDock:LayoutAnchorGroup>
                            <avalonDock:LayoutAnchorable Title="Autohidden Content">
                                <TextBox/>
                            </avalonDock:LayoutAnchorable>
                        </avalonDock:LayoutAnchorGroup>
                    </avalonDock:LayoutAnchorSide>
                </avalonDock:LayoutRoot.LeftSide>
            </avalonDock:LayoutRoot>
        </avalonDock:DockingManager>

    </Grid>
</Window>
DockingManagerクラス

プロジェクトを実行し、あなたは、内容を再配置し、それらをフローティング・ウィンドウへ移動します。 AvalonDockでより自信を得るには、私は、さらにより複雑なレイアウトに内容を配置するために、サンプルをいくつか手直ししてみることを、あなたに提案します。

ガイドの第2部では、DocumentClose/ClosingまたはActiveContent changedのような添付イベントのレイアウトを保存する方法を説明します。

最後に編集されたのは、Oct 13, 2012 at 7:23 PM by adospace, version 8です。

このエントリーをはてなブックマークに追加

Home PC C# Illustration

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」