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

AvalonDock(ドッキング・ウィンドウ・コントロール)

原文

AvalonDock (docking window control)(外部サイト)

訳文

AvalonDock(ドッキング・ウィンドウ・コントロール)

AvalonDock (docking window control)

サンプルプログラム(LiveExplorer)は、こちらからインストールします。

AvalonDockは、システムを提供します。開発者は、多くの人気がある統合された開発環境(IDE)によく似た、 ウィンドウ・ドッキング・システムを使用して、カスタマイズ可能なレイアウトを作成することができます。

AvalonDockは、MVVM設計を厳守します。Modelは、Xceed.Wpf.AvalonDock.Layout名前空間に含まれるクラスによって表示されます。 この名前空間のクラスは、配置モデル内のレイアウト要素です (たとえばLayoutAnchorable/LayoutDocument、LayoutAnchorablePane/LayoutDocumentPane、LayoutAnchorablePaneGroup/LayoutDocumentPaneGroupなど) それは、直接、どのようにレイアウトが構成されるかを説明するために、DockingManager内のXAMLで使用されます。

レイアウト例

次の例は、DockingManagerのさまざまなレイアウト要素を、どのように設定するかを示します。


<local:DemoView x:Class="LiveExplorer.Samples.AvalonDock.Views.AvalonDockView"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:LiveExplorer"
                 xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                 xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
                 xmlns:s="clr-namespace:System;assembly=mscorlib">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
         <TextBlock Text="Theme:" Margin="0,0,10,0" VerticalAlignment="Center"/>
         <ComboBox x:Name="_themeCombo" SelectedIndex="0" Width="200">
            <ComboBoxItem Content="Generic" />
            <ComboBoxItem Content="Aero">
               <ComboBoxItem.Tag>
                  <xcad:AeroTheme />
               </ComboBoxItem.Tag>
            </ComboBoxItem>
            <ComboBoxItem Content="VS2010">
               <ComboBoxItem.Tag>
                  <xcad:VS2010Theme />
               </ComboBoxItem.Tag>
            </ComboBoxItem>
            <ComboBoxItem Content="Metro">
               <ComboBoxItem.Tag>
                  <xcad:MetroTheme />
               </ComboBoxItem.Tag>
            </ComboBoxItem>
         </ComboBox>
      </StackPanel>

      <xcad:DockingManager Grid.Row="1" MaxHeight="425"
                           AllowMixedOrientation="True"
                           BorderBrush="Black"
                           BorderThickness="1"
                           Theme="{Binding ElementName=_themeCombo, Path=SelectedItem.Tag}">
         <xcad:DockingManager.DocumentHeaderTemplate>
            <DataTemplate>
               <StackPanel Orientation="Horizontal">
                  <Image Source="{Binding IconSource}" Margin="0,0,4,0"/>
                  <TextBlock Text="{Binding Title}" />
               </StackPanel>
            </DataTemplate>
         </xcad:DockingManager.DocumentHeaderTemplate>
         <xcad:LayoutRoot x:Name="_layoutRoot">
            <xcad:LayoutPanel Orientation="Horizontal">
               <xcad:LayoutAnchorablePane DockWidth="200">
                  <xcad:LayoutAnchorable ContentId="properties" Title="Properties" CanHide="False" CanClose="False"
                                            AutoHideWidth="240"
                                         IconSource="../Images/property-blue.png">
                     <xctk:PropertyGrid NameColumnWidth="110"
                        SelectedObject="{Binding ElementName=_layoutRoot, Path=LastFocusedDocument.Content}"/>
                  </xcad:LayoutAnchorable>
               </xcad:LayoutAnchorablePane>
               <xcad:LayoutDocumentPaneGroup >
                  <xcad:LayoutDocumentPane>
                     <xcad:LayoutDocument ContentId="document1" Title="Document 1" 
				IconSource="../Images/document.png" >
                           <Button Content="Document 1 Content" HorizontalAlignment="Center" 
				VerticalAlignment="Center"/>
                     </xcad:LayoutDocument>
                     <xcad:LayoutDocument ContentId="document2" Title="Document 2"
				IconSource="../Images/document.png">
                        <TextBox Text="Document 2 Content" AcceptsReturn="True"/>
                     </xcad:LayoutDocument>
                  </xcad:LayoutDocumentPane>
               </xcad:LayoutDocumentPaneGroup >
               <xcad:LayoutAnchorablePaneGroup DockWidth="125">
                  <xcad:LayoutAnchorablePane>
                     <xcad:LayoutAnchorable ContentId="alarms" Title="Alarms" IconSource="../Images/alarm-clock-blue.png" >
                        <ListBox>
                           <s:String>Alarm 1</s:String>
                           <s:String>Alarm 2</s:String>
                           <s:String>Alarm 3</s:String>
                        </ListBox>
                     </xcad:LayoutAnchorable>
                     <xcad:LayoutAnchorable ContentId="journal" Title="Journal" >
                        <RichTextBox>
                           <FlowDocument>
                              <Paragraph FontSize="14" FontFamily="Segoe">
                                 This is the content of the Journal Pane.
                                 <LineBreak/>
                                 A
                                 <Bold>RichTextBox</Bold> has been added here
                              </Paragraph>
                           </FlowDocument>
                        </RichTextBox>
                     </xcad:LayoutAnchorable>
                  </xcad:LayoutAnchorablePane>
               </xcad:LayoutAnchorablePaneGroup>
            </xcad:LayoutPanel>

            <xcad:LayoutRoot.LeftSide>
               <xcad:LayoutAnchorSide>
                  <xcad:LayoutAnchorGroup>
                     <xcad:LayoutAnchorable Title="Agenda" ContentId="agenda" 
				IconSource="../Images/address-book-open.png">
                        <TextBlock Text="Agenda Content" Margin="10" FontSize="18" FontWeight="Black" 					TextWrapping="Wrap"/>
                     </xcad:LayoutAnchorable>
                     <xcad:LayoutAnchorable Title="Contacts" ContentId="contacts" 
				IconSource="../Images/address-book--pencil.png" >
                        <TextBlock Text="Contacts Content" Margin="10" FontSize="18" FontWeight="Black" 					TextWrapping="Wrap"/>
                     </xcad:LayoutAnchorable>
                  </xcad:LayoutAnchorGroup>
               </xcad:LayoutAnchorSide>
            </xcad:LayoutRoot.LeftSide>
         </xcad:LayoutRoot>
      </xcad:DockingManager>
   </Grid>
</local:DemoView>

ビューは、Xceed.Wpf.AvalonDock.Controls名前空間に含まれるクラスによって表示されます。 ;これらのクラスは、ユーザー・コントロールを表示する、各種のスタイル設定可能なコントロールです。 ビュー・コントロールの名前は、一般的に「Control」で終わり、配置モデル・クラスに対応します (例えば、LayoutAnchorableControlは、モデル要素のLayoutAnchorableに対応するビュー・コントロールです)。

DockingManagerは、Xceed.Wpf.AvalonDock名前空間が含まれています。 ビューによって消費されるモデルを作成する、ViewModelの役割を実行するために、 (LayoutItemとその派生クラスのような)さまざまなクラスを使用します。

ルートとしてDockingManagerを持つ、ただ1つの論理ツリーがあります。 たとえ、コントロールが異なるウィンドウで配置されたとしても、(すなわち、自動的に隠れるウィンドウや浮動ウィンドウ)、 それは、常に、DockingManagerの下の同じ論理ツリーに属します。

DockingManagerクラス

The DockingManager class

DockingManagerクラスは、AvalonDockの中核となるコントロールです。 そのレイアウト・プロパティは、レイアウトの構成が含まれています。 それは、Xceed.Wpf.AvalonDock.Layout名前空間のクラスによって表示されています。 そのクラスは、それが含まれる枠を配置します。 そのうえ、自動非表示のウィンドウと浮動ウィンドウを処理します。 (枠は、直接または間接的に、「内容」の要素の2つの形式が順番に含まれています。 すなわち、LayoutAnchorableなおよびLayoutDocument要素)。 DockingManagerクラスは、さらに、レイアウトの保存と復元を処理します。

他のプロパティの中で、クラスは、いくつかの「テンプレート」プロパティを提供します。 (例えば、AnchorableTitleTemplate/DocumentTitleTemplate、AnchorableHeaderTemplate/DocumentHeaderTemplateなど )設計者と開発者は、レイアウト内に含まれる要素のテンプレートを指定できます。

レイアウトモデルクラス

Layout model classes

レイアウトモデルの内で使用されるレイアウト要素クラスは、DockingManagerのレイアウト・プロパティに格納されます。 AvalonDockの基本的な内容を含むクラスは、LayoutAnchorableとLayoutDocumentです。 ;これらのクラスは、どちらも、要素が閉じたり、浮動することができるかどうか決定する、 LayoutContentクラスから派生します。(浮動ウィンドウに、ドラッグして変換します)など

anchorableは、一般的に、アプリケーション・コントロールのコンテナです。 そして、そのコンテナ枠から離れて、ドラッグすることができます。(LayoutAnchorablePane)、 そして、別のペインに再配置する。Anchorablesは、常に、枠に含れています。 それは、LayoutAnchorablePaneやLayoutDocumentPaneであることができます。 ところが、ドキュメント(LayoutDocumentクラス)は、LayoutDocumentPaneの中で、一つだけ含まれることができます。 anchorableは、同様に、上に、下に、左に、あるいは、すべての他のanchorableまたはドキュメントの右に表示するために、 それらを引き起す、親のDockingManagerの境界線に、ドラッグすることができます。 (自動で隠れるウィンドウを除いて;詳細については、以下のLayoutAnchorSide/LayoutAnchorGroupのセクションを参考にしてください)。 anchorableは、同様に、浮動した状態ままにすることができます。(LayoutAnchorableFloatingWindow )。 ドキュメントとは異なり、anchorableは、自動で隠れることができます。 それらの内容は、ドッキング・マネージャーの1つの側面に折りたたまれ、タブのみで表示されます。 (LayoutAnchorSideとLayoutAnchorGroupを参照してください)。

ドキュメント(LayoutDocumentクラス)は、LayoutDocumentPaneで一つだけ受け入れることができます。 このLayoutAnchorableの動作との対比は、それは、LayoutDocumentPaneとLayoutAnchorablePaneで受け入れることができます。 同様に、anchorableとは異なり、ドキュメントは、DockingManager境界線に固定することができません。 そして、自動で隠れることができません。: それらは、LayoutDocumentPaneにのみ配置、あるいは、LayoutDocumentFloatingWindowで浮遊させることができます。

エンドユーザーが、DockingManagerの上にanchorableをドラッグするとき、 LayoutAnchorableFloatingWindowやLayoutDocumentFloatingWindowは、自動的に作成されます。 浮動ウィンドウは、同様に、Floatメソッドを使用して、プログラム上で作成することができます)。

LayoutContentから派生した要素(LayoutAnchorableとLayoutDocument)は、 一般的に、タブ・コントロールに、配置されます。LayoutAnchorablePaneは、autohideに設定することができます。 そして、浮動ウィンドウのように、DockingManagerの上にドラッグすることができます。 LayoutAnchorablePaneは、同様に、親のDockingManagerの境界線に、固定することができます。 (詳細は、LayoutAnchorSideを参照してください)。

LayoutAnchorablePaneとは異なり、LayoutDocumentPaneは、autohideに設定することができない、 あるいは、浮動ウィンドウのようにDockingManagerの上にドラッグすることができません。 (それぞれのLayoutDocument要素は、浮遊させることができますが、)。 LayoutAnchorablePaneは、同様に、親のDockingManagerの境界線に、固定することができません。

LayoutPanelは、同様に、「枠グループ」要素を含むことができます。(すなわち、LayoutAnchorablePaneGroupやLayoutDocumentPaneGroup)、 それは、グループの子の枠を一緒に、そして、決定するために、さまざまな特性を提供します。 ドッキンググループが使用する初期のwidth/heightのような、浮動ウィンドウの初期のwidth/heightは、 それらからドラッグされる内容から作成します。そして、グループの枠の方向(それは、LayoutPanelの方向に関係がありません)。 LayoutAnchorablePaneGroupは、配置モデルで要素を表示します。 それは、複数のLayoutAnchorablePane要素を含み、配置することができます。 それは、LayoutAnchorable要素が順番に含まれています。LayoutDocumentPaneGroupは、配置モデルで要素を表示します。 それは、複数のLayoutDocumentPane要素が含まれ、構成することができます。 それは、LayoutDocument要素が順番に含まれています。「枠グループ」クラスは、 まず、それらが含まれる枠の向きを決定するために使用されます。

LayoutRootは、配置モデルのルートを表示します。DockingManagerのレイアウト・プロパティを、このクラスのインスタンスに設定します。

LayoutRootクラスのRootPanelプロパティを、LayoutPanelクラスのインスタンスに設定します。

LayoutPanelは、直接、子の枠を含むことができます。 (すなわち、LayoutAnchorablePaneとLayoutDocumentPane)。 枠は、実際の内容が順番に含まれます。(すなわち、LayoutAnchorableやLayoutDocument要素、LayoutContentから派生する両方とも)。 LayoutPanelは、同様に、「枠グループ」インスタンスを含むことができます。(すなわち、LayoutAnchorablePaneGroupやLayoutDocumentPaneGroup)、 それは、グループの子の枠を一緒に、そして、決定するために、さまざまな特性を提供します。ドッキンググループが使用する初期のwidth/heightのような、 浮動ウィンドウの初期のwidth/heightは、それらからドラッグされる内容とグループの枠の方向から作成されます。 (それは、LayoutPanelの方向に関係がありません)。

LayoutRootクラスは、4つの「Side」プロパティ(例えば、LeftSide)、を提供します。 それは、DockingManagerが含まれる境界線に沿って、自動で隠れるLayoutAnchorable要素を設定するために、 LayoutAnchorSideとLayoutAnchorGroupクラスと連携して使用されます。 これらの要素は、最初は、それらが固定される側に、折りたたまれています。タブのみを表示します。 そして、「ピン」シンボルは、左側を指しています。自動で隠れるanchorableのピンのシンボルが、 ピンが下を向くように、クリックされた場合、anchorableは、もはや表示されたままではありません。 LayoutAnchorable要素だけは、自動で隠れることができます。

LayoutAnchorGroupは、1つ以上のLayoutAnchorable要素の自動で隠れるグループを表示します。 それは、DockingManagerの4辺の1つに固定することができます。 LayoutAnchorGroupを使用するために、それにLayoutAnchorable要素を追加し、 そして、LayoutAnchorSideのインスタンスに、結果として得られるLayoutAnchorGroupを追加します。 結果として得られるLayoutAnchorSideは、 続いて、DockingManagerのLayoutプロパティに格納される、LayoutRootオブジェクトの「Side」プロパティ (例えば、LeftSide、TopSide)に割り当てられます。

LayoutAnchorSideは、DockingManagerで「側面」を表示します。LayoutAnchorSideを使用するために、 LayoutAnchorGroupにLayoutAnchorable要素を追加します。そして、LayoutAnchorSideのインスタンスに、 結果として得られるLayoutAnchorGroupを追加します。結果として得られるLayoutAnchorSideは、 続いて、DockingManagerのLayoutプロパティに格納される、 LayoutRootオブジェクトの「Side」プロパティ(例えば、LeftSide、TopSide)に割り当てられます。

参考:

あなたは、ここでAPIの完全なドキュメンテーションを見つけることができます。 ソースコードで'Live Explorer'アプリケーションを見ます。 それは、ここで、このクラスの機能とその他を説明します。

このプロジェクトをサポートし、プラス版を確認します。

午前3時33分の6月18日にdlafontaineにより、最後に編集された、version 7です。

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

Home PC C# Illustration

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