How to: Use the AvalonDock.dll control.
Avalondock has the following main elements:
1.dockingmanager:dockingmanager is the most central control label in Avalondock, accommodating all avalondock tags.
2.ResizingPanel: For the overall interface layout, orientation is horizontal and vertical.
3.DocumentPane: Typically used for labels that contain text edits or dockablecontents tags, documentpane cannot be dragged
4.DocumentContent: Included in Documentpane, commonly used for text editing functions, similar to the VS2010 Code edit box section.
4.DockablePane: Can be similar to the VS2010 Toolbox panel, can be adsorbed on the effect of the border.
5.DockableContent: Included in Dockablepane, below shows Dockablecontent's title
Below to implement a similar VS2010 interface, first paste the effect diagram:
<Grid>
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "*"/>
<rowdefinition height= "/>"
</Grid.RowDefinitions>
<Menu>
<menuitem header= "File" >
<menuitem header= "New Document" click= "Newdocument_click" name= "NewDocument"/>
<menuitem header= "Exit"/>
</MenuItem>
</Menu>
<my:dockingmanager x:name= "Dockmanager" grid.row= "1" >
<my:resizingpanel orientation= "Vertical" >
<my:resizingpanel orientation= "Horizontal" >
<my:documentpane name= "DocumentPane1" >
<my:documentcontent title= "MyDocument1" name= "MyDoc1" >
<textbox name= "tbcontents" verticalscrollbarvisibility= "Auto" acceptsreturn= "True" textwrapping= "Wrap" ></ Textbox>
</my:DocumentContent>
</my:DocumentPane>
<my:dockablepane my:resizingpanel.resizewidth= ">"
<my:dockablecontent x:name= "classescontent" title= "Classes" >
<TreeView>
<treeviewitem header= "Class1"/>
<treeviewitem header= "Class2"/>
</TreeView>
</my:DockableContent>
<my:dockablecontent x:name= "toolscontent" title= "Tools" >
<ListBox>
<listboxitem content= "Tool1" ></ListBoxItem>
<listboxitem content= "Tool2" ></ListBoxItem>
<listboxitem content= "Tool3" ></ListBoxItem>
</ListBox>
</my:DockableContent>
</my:DockablePane>
</my:ResizingPanel>
<my:dockablepane my:resizingpanel.resizeheight= ">"
<my:dockablecontent title= "Errors" x:name= "Errorscontent" >
<ListView>
<ListView.View>
<GridView>
<GridView.Columns>
<gridviewcolumn header= "Error"/>
<gridviewcolumn header= "page"/>
<gridviewcolumn header= "File"/>
<gridviewcolumn header= "Row"/>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</my:DockableContent>
<my:dockablecontent title= "Output" x:name= "Output" >
<textbox isreadonly= "true" acceptsreturn= "true"/>
</my:DockableContent>
</my:DockablePane>
</my:ResizingPanel>
</my:DockingManager>
<statusbar grid.row= "2" >
<statusbaritem content= "Avalondock 1.3 Sample Project"/>
</StatusBar>
</Grid>