您的位置：首页 > 运维架构 > 网站架构

avalondock 翻译网站文章（一）

2013-12-19 15:11 197 查看

AvalonDock2.0gettingstartedguidePART1

AvalonDock2.0allowstocreateaninterfaceforWPFverysimilartoVisualStudioGUI.It'simportanttounderstandthathasbeendevelopedwiththisinmindsoit'smostsuitedforprojectsthathavedocumentsandtools.

InthistutorialI'llshowyouhowtostartusingwithAvalonDock.Belowinformationarerelativetoversion2.0andconnotbevalidforearlierversions.

AvalonDockiscomposedofalayoutmodel,aseriesofcontrolsrepresentingtheviewsandaDockingManagerclasswhichreppresentsthedockingareawhereusercandraganddropdocumentsandtools.

LookingatthebelowscreenshotwecanidentifytheAvalonDockcomponents.

AvalonDock2.0允许创建一个非常类似于VS的GUI的接口提供给WPF，已经发展到这一点所以它最适合于具有文档和工具的项目。

在这个教程里我要展示给你的是怎么开始使用AVALonDock,以下信息是关于2.0版本的和早点可用版本的。

Avalondock是一个布局模型的组成，一系列的控件来代表视图，并且一个DockingManager类代表停靠的用可以进行拖拉文档和工具的区域。

看下面的截图我们可以区分，鉴别出avalondock组件。



DockingManagerThisisthecorecontrolinAvalonDock.Itarrangescontainedpanes,handlesflyoutpanesandfloatingwindows.IntheaboveimagetheDockingManager
objectcontainseverything(inWPFterms)fromthetoolbarontopandthestatusbaronbottom.DockingManagerclassalsohandlessavingandrestoringlayout.
DockingManager类，是avalonDock的核心控件，它包含了面板，控制浮出面板和浮动窗口，在上图中的DockingManager对象包含从顶部工具栏和底部的状态栏中的一切（WPF中的条款）。DockingManager类也处理保存和恢复布局

LayoutPanelThispanelarrangeschildrenpanesalongadirection(selectedwithpropertyOrientation)addingaresizerbetween
them.AboveaLayoutPanelwithhorizontalorientationarrangesthreepanes:aLayoutAnchorablePaneonleft,aLayoutDocumentPaneinthecentralarea,andaLayoutDockablePaneonright.
LayoutPanel此面板安排孩子沿着方向（与属性Orientation选择）增加它们之间的大小调整窗格
与上述水平方向一LayoutPanel安排三个窗格：在LayoutAnchorablePane离开，在中心区一个LayoutDocumentPane，并在右边的LayoutDockablePane。
LayoutAnchorablePaneThislayoutelementcontainsacollectionofLayoutAnchorableobiects.Usuallyitarrangescontentslikeatabcontrol.IntheabovescreenshotLayoutDockablePanesarethecontainerofcontents'Strumenti'and
'Progetti'(ToolsandProjectsinEnglish)ontheleftandthecontainerof'Classi'and'Proprieta''(ClassesandPropertiesinEnglish)ontheright.ALayoutDockablePanecanbeauto-hidden(likethatcontainingcontents'Errori'(errors),'ListaAzioni'(action
list)and'Uscita'(output))andcanbedraggedovertheDockingManagerasfloatingwindoworanchoredtoaborderoftheparentDockingManager.
LayoutAnchorablePane此布局元素包含LayoutAnchorableobiects的集合。通常它安排像一个tabcontrol的内容。在上面的截图LayoutDockablePanes是内容'Strumenti'和'PROGETTI“（在英语中的工具和工程）左侧的容器和'CLASSI'的容器和'Proprieta''（类和英语的属性）在右侧。一个LayoutDockablePane可以自动隐藏（如含内容“ERRORI”（错误），'利斯塔AZIONI“（动作列表）和”
Uscita'（输出）），可拖过DockingManager那样的浮动窗口或者锚定边界父DockingManager

LayoutDocumentPaneApaneofthistypecontainsusuallydocuments(objectoftypeDocumentContent)butoptionallycanalsocontainDockableContentsobjectliketheabove'Tools'or'Classes'contents.AboveadocumentcontentisplacedinsideaResizingPanel
(horizontallyorienteted)inthecentralareabetweenthetooDockablePaneobjectjustmentioned.Adocumentpanecan'tbemoved.

LayoutDocumentPane这种类型的窗格中通常包含的文件（类型DocumentContent的对象），但选择性也可以包含DockableContents对象像上面的'工具'或'类'的内容。上面的文件内容被放置在一个ResizingPanel（水平orienteted）在刚才提到的太DockablePane对象之间的中心区域。文档窗格中无法移动。
LayoutAnchorableAanchorablecontentisthecontainerofapplicationcontrols.It'salwayscontainedinapane(LayoutAnchorablePaneorLayoutDocumentPane).Intheabovescreenshot,LayoutAnchorableobjectsarethe'classi'(classes)object(whichcontains
aSharpDevelopobject),the'strumenti'(tools)objectbutalsothe'Errori'(errors)(whichisintheAutoHiddenstateandiscontainedinaautohiddenpane).ALayoutAnchorableasnamesuggestscanbedraggedawayfromitscontainerpaneandberepositionedinto
anotheresistingpane,ortoaborderoftheparentDockingManagerorleftinafloatingwindow(LayoutAnchorableFloatingWindow).

LayoutAnchorable一个锚定的内容是应用控制的容器。它总是包含在一个窗格（LayoutAnchorablePane或LayoutDocumentPane）。在上面的屏幕截图，LayoutAnchorable对象是“CLASSI”（类）对象（其中包含了SharpDevelop的对象）中，“strumenti”（工具）对象也有'ERRORI“（错误）（这是在自动隐藏状态，被包含在一个自动隐藏窗格）。一个LayoutAnchorable作为顾名思义可以拖离它的容器窗格和重新定位到另一个esisting窗格中，或者父DockingManager的边界，或留在一个浮动窗口（LayoutAnchorableFloatingWindow
）。
LayoutDocumentisacontentthatcanbehostedonlyinaLayoutDocumentPane.It'saparticularcontentbecausecan'tbeanchoredtoaborderbutcanbepositionedonlyintoaLayoutDocumentPaneorfloatedinaLayoutDocumentFloatingWindow.AboveLayoutDocument
objectsarethe'program.cs'or'MainForm.cs'files.

LayoutDocument是，只能在LayoutDocumentPane托管内容。它是一个特定的内容，因为不能被锚定到一个边界，但可以仅定位成LayoutDocumentPane或漂浮在一LayoutDocumentFloatingWindow。上述LayoutDocument对象是“Program.cs中'或'MainForm.cs中”文件。
LayoutFloatingWindowIt'sawindowthatcontainscontentswhenaredraggedormovedoveraDockingManager.ALayoutFloatingWindow
(anditsspecializationsLayoutAnchorableFloatingWindowandLayoutDocumentFloatingWindow)derivesfromWindow,andalwayscontainsapane(LayoutAnchorablePaneorLayoutDocumentPane)whichinturncontainsoneormorecontents(LayoutAnchorableorLayoutDocument).
TheLayoutFloatingWindowobjectiscreateddirectlyfromtheDockingManagerwhenuserstartadraggingoperationforacontentoraDockablePaneormanuallybycodecallingtheLayoutContent.Float()method.
LayoutFloatingWindow这是一个包含内容或拖移过DockingManager当一个窗口。一个LayoutFloatingWindow（及其专业LayoutAnchorableFloatingWindow和LayoutDocumentFloatingWindow）从窗口派生的，并始终包含一个窗格（LayoutAnchorablePane或LayoutDocumentPane），其中又包含一个或多个内容（LayoutAnchorable或LayoutDocument
）。该LayoutFloatingWindow对象从DockingManager直接创建时用户开始拖动操作用于调用LayoutContent.Float（）方法的内容或DockablePane或手动代码。
LayoutPaneIt'sabaseclassforLayoutDockablePaneandLayoutDocumentPane.Itprovidescommonpropertiesandmethodsforboth.

LayoutPane这对LayoutDockablePane和LayoutDocumentPane的基类。它提供了常见的属性和两个方法。
LayoutContentIt'sabaseclassforLayoutAnchorableandLayoutDocument.Itprovidescommonpropertiesandmethodsforboth.

LayoutContent这对LayoutAnchorable和LayoutDocument的基类。它提供了常见的属性和两个方法

it'simportanttounderstandthatlayoutelementsareclassesbelongingtothelayoutmodelnottotheview.SotheyarenotderivingfromFrameworkElementclass.InsteadAvalonDockcontainsadifferentsectionofclassesthatrepresenttheviewofthecomponent.
Theseclassesareusuallynamedasthecorrespondinglayoutelementplusthe"Control"string.SoforexamplewhenaLayoutAnchorableiscreatedinsidethelayoutAvalonDockcreatesaLayoutAnchorableControl(aFrameworkElementderivedclass)andbindstheLayoutAnchorableControl.Model
totheLayoutAnchorableobject.

EveryviewcontrolthatiscreatedisalwaysboundtothelayoutelementthrutheModelproperty.It'spossibletorestyleAvalonDockcomponentsprovidingaWPFstylefortherelativeviewcontrol.

Tostartcreateanew.NET4/.NET4.5solutionandaddareferencetoAvalonDock.dll(directlyorusingNuGet).ThenaddtheADnamespacetotheMainWindow.xaml.

UndertherootgridplacetheDockingManagerandasamplelayout:

重要的是要明白，布局元素都属于布局模型不给视图类。所以他们不从FrameworkElement类派生。相反AvalonDock包含表示组件的视图类不同的部分。这些类通常命名为相应的布局元素，加上了“控制”的字符串。因此，例如，当一个LayoutAnchorable是布局AvalonDock内部创建创建一个LayoutAnchorableControl（FrameworkElement派生类）和LayoutAnchorableControl.Model绑定到LayoutAnchorable对象。

创建的每个视图控件始终绑定到直通Model属性的布局元素。这是可能的RESTYLEAvalonDock组件的相对视图控件提供了一个WPF的风格。

要开始创建一个新的。NET4/.NET4.5解决方案，并添加一个引用到AvalonDock.dll（或直接使用的NuGet）。然后，命名空间添加到MainWindow.xaml。下面为创建一个布局的例子文件
<Windowx: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:DockingManagerx:Name="dockingManager">

<avalonDock:LayoutRoot>

<avalonDock:LayoutPanelOrientation="Horizontal">

<avalonDock:LayoutDocumentPane/>

<avalonDock:LayoutAnchorablePaneDockWidth="150">

<avalonDock:LayoutAnchorableTitle="SampleToolPane">

<TextBox/>

</avalonDock:LayoutAnchorable>

</avalonDock:LayoutAnchorablePane>

</avalonDock:LayoutPanel>

<avalonDock:LayoutRoot.LeftSide>

<avalonDock:LayoutAnchorSide>

<avalonDock:LayoutAnchorGroup>

<avalonDock:LayoutAnchorableTitle="AutohiddenContent">

<TextBox/>

</avalonDock:LayoutAnchorable>

</avalonDock:LayoutAnchorGroup>

</avalonDock:LayoutAnchorSide>

</avalonDock:LayoutRoot.LeftSide>

</avalonDock:LayoutRoot>

</avalonDock:DockingManager>

</Grid>

</Window>

TheDockingManagerclassisthecoreofAvalonDock.It'sresponsibletocreateandmanagethelayout.ThelayoutisdefinedasatreeofILayoutElementobjects.TherootisrepresentedbytheLayoutRootclasswhich
iscomposedbysomefoundamentalchildren:
1.TherootpanelaccessiblethrutheRootpropertypointstothemainLayoutPanel,whichisalsothecontentpropertyoftheLayoutRootclass.
2.RightSide/LeftSide/TopSide/BottonSideare(roughlyspeaking)collectionpropertiesoftypeLayoutAnchorGroupobjects.Theyrepresentthefoursideofthedockingmanagerhosting
anchorablesthatareautohidden.Whenusermovethemouseoveroneoftheseareasthelinkeanchorableisshowninaautohiddenwindow.
3.FloatingWindowspropertiesisacollectionofFloatingWindow.AFloatingwindowiscreatedeverytimetheuserdragsapane(LayoutAnchorableorLayoutDocument).Thiscollection
isautomaticallyupdatedbyAvalonDockbutonecancreateafloatingwindowcallingtheFloat()methodoftheLayoutContentclass.
4.HiddenisacollectionofAnchorableobject.BydefaultwhenuserclickthexbuttonofaLayoutAnchorableAvalonDockhidesit:thatisitremovestheanchorablefromthelayout
andputitintheHiddencollection.WhenuserwantstoshowitagainADremovesthecontentfromthiscollectionandtriestore-shownthepanewhereitwashidden.
该DockingManager类是AvalonDock的核心。它负责创建和管理布局。布局是指ILayoutElement对象树。根是由是由一些foundamental儿童组成的LayoutRoot的类来表示：

根面板访问直通Root属性点主要LayoutPanel，这也是LayoutRoot的类的内容属性。

RightSide/侧别/上部/BottonSide的类型LayoutAnchorGroup对象（粗略地讲）集合属性。他们所代表的四个侧面对接经理托管anchorables的被自动隐藏。当用户将鼠标移动到这些区域之一的临客锚定会显示在自动隐藏窗口。

FloatingWindows性质是FloatingWindow的集合。浮动窗口被创建的每个用户拖动窗格（LayoutAnchorable或LayoutDocument）的时间。这个系列是由AvalonDock自动更新，但我们可以创建一个浮动窗口调用浮动的LayoutContent类的（）方法。

隐藏的是锚定对象的集合。默认情况下，当用户点击一个LayoutAnchorableAvalonDock的X按钮隐藏它：那就是它消除了锚定的布局，并把它在隐藏集合。当用户想再次显示公元移除此集合中的内容，并试图重新显示它被隐藏的窗格。
Workingwiththelayouttree,onecouldcreateanycomplexinterface.TheLayoutAnchorablePaneDockWidth/HeightcanbeusedtogivetheinitialWidth/Heightofapane.TheLayoutDocumentPaneclassinsteadalwaysoccupiesallthe
availablespace.AvalonDockmanagesthewidthsandheightsofthecontentsinordertooccupiesalltheavailablespaces.SoifanLayoutAnchorablePaneiscontainedinaLayoutPanelwhereispresentaLayoutDocumentPaneitusesafixedsizefortheLayoutAnchorablePane
andastarlengthfortheLayoutDocumentPane.Ifit'scontainedinaLayoutPanelwhereonlyLayoutAnchorablePanesarepresent,itgivesstarlengthstotheLayoutAnchorableobjects.

ALayoutDocumentGroup/LayoutAnchorableGroupclasscanbeusedtoarrangemoreLayoutDocumentPane/LayoutAnchorablePane.Forexamplelet'schangetheaboveexampletoshowamorecomplexscenario.

与树的布局工作，人们可以创建任何复杂的界面。该LayoutAnchorablePaneDockWidth/高度可以用来给一个窗格的初始宽度/高度。该LayoutDocumentPane类，而不是始终占据全部可用空间。AvalonDock管理的内容的宽度和高度，以便占据了所有可用的空间。因此，如果一个LayoutAnchorablePane包含在LayoutPanel其中存在时，它使用一个固定大小的LayoutAnchorablePane和星形长度为LayoutDocumentPane一个LayoutDocumentPane。如果它包含在一个LayoutPanel其中只有LayoutAnchorablePanes都存在，它给明星的长度为LayoutAnchorable对象。

一个LayoutDocumentGroup/LayoutAnchorableGroup类可用于安排更多LayoutDocumentPane/LayoutAnchorablePane。例如，让我们改变上面的例子中展现出更复杂的情况。
<Windowx: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:DockingManagerx:Name="dockingManager">

<avalonDock:LayoutRoot>

<avalonDock:LayoutPanelOrientation="Horizontal">

<avalonDock:LayoutDocumentPaneGroup>

<avalonDock:LayoutDocumentPane>

<avalonDock:LayoutDocumentTitle="Doc1">

<TextBox/>

</avalonDock:LayoutDocument>

<avalonDock:LayoutDocumentTitle="Doc2">

<TextBox/>

</avalonDock:LayoutDocument>

</avalonDock:LayoutDocumentPane>

<avalonDock:LayoutDocumentPane>

<avalonDock:LayoutDocumentTitle="Doc3">

<TextBox/>

</avalonDock:LayoutDocument>

</avalonDock:LayoutDocumentPane>

</avalonDock:LayoutDocumentPaneGroup>

<avalonDock:LayoutAnchorablePaneGroupDockWidth="150"Orientation="Vertical">

<avalonDock:LayoutAnchorablePane>

<avalonDock:LayoutAnchorableTitle="Tool1">

<TextBox/>

</avalonDock:LayoutAnchorable>

<avalonDock:LayoutAnchorableTitle="Tool2">

<TextBox/>

</avalonDock:LayoutAnchorable>

</avalonDock:LayoutAnchorablePane>

<avalonDock:LayoutAnchorablePane>

<avalonDock:LayoutAnchorableTitle="Tool3">

<TextBox/>

</avalonDock:LayoutAnchorable>

<avalonDock:LayoutAnchorableTitle="Tool4">

<TextBox/>

</avalonDock:LayoutAnchorable>

</avalonDock:LayoutAnchorablePane>

</avalonDock:LayoutAnchorablePaneGroup>

</avalonDock:LayoutPanel>

<avalonDock:LayoutRoot.LeftSide>

<avalonDock:LayoutAnchorSide>

<avalonDock:LayoutAnchorGroup>

<avalonDock:LayoutAnchorableTitle="AutohiddenContent">

<TextBox/>

</avalonDock:LayoutAnchorable>

</avalonDock:LayoutAnchorGroup>

</avalonDock:LayoutAnchorSide>

</avalonDock:LayoutRoot.LeftSide>

</avalonDock:LayoutRoot>

</avalonDock:DockingManager>


</Grid>

</Window>


Runningtheprojectyoushouldbeabletorearrangecontents,movethemtofloatingwindow.TogetmoreconfidentwithAvalonDockIsuggestyoutomakesometriesreworkingthesampletoarrangecontentsinevenmore
complexlayout.

InPart2oftheguidewe'llseehowtosavelayouts,attacheventslikeDocumentClose/ClosingorActiveContentchanged.
LasteditedOct13,2012at6:23PMbyadospace,
version8
运行项目，你应该能够重新排列内容，将它们移动到浮动窗口。为了获得更多的自信与AvalonDock我建议你做一些尝试改造的样品，安排内容更为复杂的布局。

在本指南的第2部分中，我们将看到如何保存布局，附加活动，如DocumentClose/关闭或ActiveContent改变。

最后编辑2012年10月13日于下午6:23由adospace，第8版

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航