Share a beautiful WPF interface framework authoring process and its source code

This article, as a series, is divided into the following sections to describe:

(1) Look at this interface framework;

(2) How to develop the interface framework;

(3) Auxiliary Development Support: Demo, template, VSPackage production.

The framework source code is shown below.

This article describes section (1).

1 installation

Now let's look at this interface framework. First, you can download the VS plug-in installation package to this framework via the following link:. After downloading the extract, the file is as follows:

Double-click the file to install it (currently only supports VS2012 and VS2013, discarding the vs2010,i am sorry).

Click Install to complete.

2 Creating the main program

Then open Visual Studio 2013, create a new project, and select default Iopenworksextension.

There are two templates, one is the main program, and the other is a plugin. Here, we first create a main program, you can find that the main program already contains some common functionality plug-ins, such as interface framework, configuration services, database services, permissions management. Before compiling the main program, you need to make sure that IOPENWORKSSDK and NuGet are installed.

This compiles with Osgi.net framework support and uses NuGet to download some third-party libraries. After the compilation is passed, the main program can be run directly.

The first is a splashwindow.

Next is a login form, entered by default Administrator admin/admin.

After successful login, the following main interface is displayed, the left side is the extensible navigation bar, the right side is the expandable display area, the bottom is the status bar, the upper right corner has an extensible system menu.

3 Creating Plugins

Next, we add a new plugin to the project. Note that the plug-in directory must be in the Bin/plugins directory of the main program.

After the plug-in is created, its project structure is as follows.

This is a typical application developed using the MVVM architecture. Model represents the database model, Dataaccessor represents the database access class, and ViewModel represents the view model. Then we'll run the project. You can see that the interface has a more functional module.

The plugin defines a Coursemanagementusercontrol.xaml page, which is displayed dynamically on the right display area when you click on the "Course Management" menu. When you click "Add/Edit", an input box pops up on the right and the Addoreditcourseusercontrol.xaml control is loaded. In the plugin's manifest.xml file, you can see that the plugin is registered to the interface framework through the following configuration of the menu and the real content.

In addition, the following services are defined in the plugin's bundleactivator to be called directly by the plug-in.

Service is the general function, there are:

(1) Permissionservice Permission Detection Service: Encoding method to determine whether the current user has a certain permission;

(2) Configurationservice Configuration service: Persist the location, size, color and other personalized information of the interface;

(3) Dbconnectionfactoryservice database connection factory: Get database connection;

(4) Mainwindowservice main form service: Used to close the current display area and open/close the side border.

In the plug-in development process, we can directly write the model, database access, view model, view code, if you need to use the framework function, you call the above 4 services, no longer need to deal with any framework. Below we can try to add a new XAML page Contactsmanagementusercontrol.xaml, and change manifest.xml to do the following configuration.

At this point, after running, the new page can be loaded into the content area.

You can write the page display, ViewModel and other code on this page according to the business.

4 Framework Experience Summary

With these simple demos, you can see that this framework has the following benefits:

(1) High-reuse: interface can be taken, general function can be taken;

(2) Standardization: Each plug-in is a standard architecture, standard code to develop, easy to maintain;

(3) Modularization: A large software can be divided into different modules, by different people to develop different plug-ins to combine;

(4) Layering: Force the base plug-in and business plug-ins into different levels, not the basic plug-in calls the function of the business plug-in;

(5) Consistent user experience: The framework provides a standardized UI that gives the entire system a consistent display.

In addition, you can support dynamic modularity (dynamic installation, start, stop, update, unload module), automated deployment and update capabilities on a osgi.net basis.

Share a beautiful WPF interface framework authoring process and its source code