Starting from 0 WPF MVVM Enterprise Framework Implementation and description----Seventh talk about the use of WPF system UI structure descriptions and Avalondock

When it comes to WPF UI, there is now a ready-made UI everywhere, I think avalondock is more suitable for enterprise-level system point, generally to Modernui and the like can only do small app also make this use.

Here I share a DLL, AvalonDock.dll access password 2f90, you can go to download, in the back of our demo is the use of such a UI structure.

In fact, for a system design, we have to take into account the overall business logic, data structure, business needs and expansion of all aspects, I This is mainly sub-module step by stage introduction down, no specific project, I will sub-module to introduce slowly.

Here is the use of Avalondock:

First of all you have to refer to this DLL and then load it in MainWindow

　　

1. <window x:class= "Wpfdemo.mainwindow"
2. xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x= " Http://schemas.microsoft.com/winfx/2006/xaml "
5.      xmlns:xcad=" http:/ Schemas.xceed.com/wpf/xaml/avalondock ",
6.    <xcad:dockingmanager x:name= "Dockmanager";
8.    </xcad:dockingmanager>
9. </window>

So simple you can start to use Avalondock, of course, this whole interface is still not show anything, now we have to configure the configuration file to do the relevant configuration, for the overall interface, we have a uiloyout config file, the overall structure is as follows

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <layoutroot xmlns:xsd= "Http://www.w3.org/2001/XMLSchema" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance ">
6. <rootpanel orientation= "Vertical" >
8. <layoutpanel >
10. <layoutanchorablepane > This way you can define some tabpane, such as the Solution Explorer in VS
12. </LayoutAnchorablePane>
16. <layoutdocumentpane/> This way, you can define some documentpane, such as the code-editing bar in VS
20. <layoutanchorablepanegroup > This way you can define some independent pane, such as the property bar in VS
22. </LayoutAnchorablePaneGroup>
24. </LayoutPanel>
28. <LayoutAnchorablePaneGroup> this way you can define some independent pane, such as the output column in VS
30. </LayoutAnchorablePaneGroup>
34. </RootPanel>
36. <topside/>
38. <rightside/>
40. <leftside/>
42. <bottomside/>
44. <floatingwindows/>
46. <Hidden>
48. </Hidden>
50. </LayoutRoot>

Now you must be confused, how can this definition be displayed, then you have to go to a well-designed UI template and your ViewModel, now for example, like you want to achieve the same thing as the VS, the Left has a code tree structure, Then double-click to open the currently selected code window in the middle.

First we define a ViewModel classlibrary, which defines two Viewmodel:codepaneviewmodel and Codetreeviewmodel

Then define the two template, which is codepanetemplate and codetreetemplate, and do not forget that the template loads the file as a resource when the app is initialized.

1. <resourcedictionary x:class= "WpfDemo.Templates.CodePaneTemplate"
2. Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
4. Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
5. Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
6. mc:ignorable= "D" >
7. <controltemplate x:key= "Codepanetemplate"/>
8. </ResourceDictionary>

Now we can go to the MainWindow to add the template, the structure is as follows

　

As you can see, there are different template correspondence for the ViewModel, and then you ask, how can something like this not a control show up in the interface? This is going to define the Uilayout.config file.

You'll notice a layoutanchorable, and you'll notice there's a contentid called Codetree, and that 's the key .

Next we go to define ViewModel, Codetreeviewmodel to implement Idockablepane and to make Contentid,codepaneviewmodel to implement Ilayoutpane, the specific code to download, I'm not going to stick too much here.

Download code address http://yunpan.cn/cLbPIYaKck4Nu access password c7a4, there is no specific how to implement the structure, the simple code is so written, the following will be implemented UI can display, today is more busy, all hands knocking, bad place do not spray ah, The next article describes how to avalondock what is defined in the MainWindow, how to control ViewModel and UI interaction, thank you.

Starting from 0 WPF MVVM Enterprise Framework Implementation and description----Seventh talk about the use of WPF system UI structure descriptions and Avalondock