[Go] Develop Visual Studio-style user Interface--magiclibrary usage guide

The sample code for this article is available for download here:

1 Overview

Microsoft Visual Studio.NET development tool has been introduced for several years, the development tool has been introduced to its ease of use and powerful features by developers love. Especially. NET environment makes different development languages such as C #, VB. NET and C + +. NET has become very easy to interact with. Thus emerged many in. NET, which can be called by different development languages. Magiclibrary is one of the better. A library of controls for interface design that can be used to develop interfaces like. Net Studio with a docking window style. The library's source code and instructions can be downloaded from http://www.codeproject.com/cs/miscctrl/magicdocking.asp, and interested readers can learn the principle of implementation by studying the source.

is a sample interface developed with this library:

Figure 1 Sample Interface

2 Implementation Methods

The implementation steps for the example are described below

2.1 installation magiclibrary

Download magiclibrary from the Internet, after the installation of a few directories, respectively, the Help file directory, program Files directory, source code directory. The only thing that needs to be done during the development and distribution of the program is the MagicLibrary.dll file in the Program Files directory.

2.2 Build Solution

L Build Solution Magicstudio in. Net Studio, the project type is a visual c#,windows application.

L Add the MagicLibrary.dll library to the references in the Magicstudio solution (Figure 1-1)

Figure 1-1 Adding a reference to a project

L Add controls to Toolbox

Add the Magiclibrary control to the Tools panel, 1-2, right-click on the Toolbox panel, select "Add/Remove Items" in the pop-up menu, and then click "Browse" button in the popup window. Selecting the MagicLibrary.dll file determines that several new controls appear on the Toolbox panel, as shown in 1-3.

Figure 1-2 Adding a control on the tools panel 1-3 new controls on the tools panel

L Add TabControl Control

Name the main window of solution Magicstudio MainForm, and then drag the new TabControl control on the tool panel onto the main window, as shown in

Figure 1-4 Main window of solution Magicstudio MainForm

L Add child window

Build the Solution Explorer window for WinForm, the Class View window, the Code editing window, as shown in

Figure 1-5 Solution Explorer window Figure 1-6 Class View window

Figure 1-7 Code Editing window

2.3 edit magicstudio main window mainform the same file Program code for MagicStudio.cs

L JOIN using statement

Using Crownwood.Magic.Common;

Using Crownwood.Magic.Docking;

L Magicstudio define Dockingmanager objects in the main window MainForm class:

Private Dockingmanager Dockmanager;

L Add initialization code to the MainForm constructor

The Dockingmanager data member Outercontrol,innercontrol is used to determine which areas of the Dockingmanager window are not affected by the Dockingmanager docking window.

Docking Manager does not affect the window area of the object that joins the main window after the Outercontrol object

Docking Manager also does not affect the window area of objects that were previously joined to the main window in the Innercontrol object

For example:

In Initailizecomponet (), the following statement determines the order in which the controls on the main window are added to the main window

This. Controls.Add (This.centerpanel);

This. Controls.Add (This.statusbar);

This. Controls.Add (THIS.TOOLBAR1);

Dockmanager.outercontrol=statusbar;

Dockmanager.innercontrol=centerpanel;

The above code determines that controls that were added before Centerpanel (including Centerpanel) and the display area of controls that were added after StatusBar (including Statursbar) are not affected by the Dockmanager docking window

If it is

This. Controls.Add (This.centerpanel);

This. Controls.Add (THIS.TOOLBAR1);

This. Controls.Add (This.statusbar);

Dockmanager.outercontrol=statusbar;

Dockmanager.innercontrol=centerpanel

The result of the actual running of the program, the docking window and the toolbar at a height, the visible toolBar1 display area is affected by the Dockmanager docking window

Figure 2 Effect of control order on interface effect

L Generate Docking window

To create a retractable docking window around the main window, you need to make two content objects, and then wrap the Solution Explorer window and the Class View window with one Content object. Dock the Content object on the windowcontent of the Dockmanager object management. Windowcontent Automatic Management window docking. The code is as follows:

Generate content to wrap the window

Content solutionexplorercontent=new content (Dockmanager);

Wrapping a window to be managed with a Content object

Solutionexplorercontent.control=new SolutionExplorer ();

Setting Docking Window Properties

Get the initial window size of the Solution Explorer window

Size solutionexplorersize=solutionexplorercontent.control.size;

Set the caption on the label when the docking window shrinks to a label

Solutionexplorercontent.title= "Solution Explorer";

Set the title of the docking window when expanded

Solutionexplorercontent.fulltitle= "Solution Explorer-exam";

Set the Content docking window to slide from the label state to a window state when the window size

Solutionexplorercontent.autohidesize=solutionexplorersize;

Set the size of the docked window when it is "nailed" on the Dockmanager management window

Solutionexplorercontent.displaysize=solutionexplorersize;

Sets the small icon displayed on the label when the docking window shrinks, Viewimgs is the user's predefined ImageList type variable

Solutionexplorercontent.imagelist=viewimgs;

solutionexplorercontent.imageindex=0;

Add Docking window content to the Dockmanager management queue

DOCKMANAGER.CONTENTS.ADD (solutionexplorercontent);

Use Addcontentwithstate () to display the Content docking window,

The State.dockright table shows that the window is docked to the right of the entire Dockmanager management area.

There are also state.dockleft,state.docktop,state.dockbottom,state.floating to choose from;

The return value is a variable of type windowcontent, which is used to hold multiple content objects

Windowcontent Wc=dockmanager.addcontentwithstate (

Solutionexplorercontent,state.dockright);

Assuming that the Classviewcontent property has been set earlier, Classviewcontent joins the docking

DOCKMANAGER.CONTENTS.ADD (classviewcontent);

Add Classviewcontent to the Windowcontent in the Explorer window

Dockmanager.addcontenttowindowcontent (CLASSVIEWCONTENT,WC);

The complete program code is as follows:

Public MainForm ()

{

InitializeComponent ();

Generate an IDE-style management window

Dockmanager=new Dockingmanager (this,visualstyle.ide);

Dockmanager.outercontrol=statusbar;

Dockmanager.innercontrol=centerpanel;

Centerpanel.idepixelborder=true;

Generates a Conten object, which is a floating window managed by Dockingmanager

Content solutionexplorercontent=new content (Dockmanager);

Solutionexplorercontent.control=new SolutionExplorer ();

Size solutionexplorersize=solutionexplorercontent.control.size;

Solutionexplorercontent.title= "Solution Explorer";

Solutionexplorercontent.fulltitle= "Solution Explorer-exam";

Solutionexplorercontent.autohidesize=solutionexplorersize;

Solutionexplorercontent.displaysize=solutionexplorersize;

Solutionexplorercontent.imagelist=viewimgs;

solutionexplorercontent.imageindex=0;

Content classviewcontent=new content (Dockmanager);

Classviewcontent.control=new ClassView ();

Size classviewsize=classviewcontent.control.size;

Classviewcontent.title= "Class View";

Classviewcontent.fulltitle= "Class View-exam";

Classviewcontent.autohidesize=classviewsize;

Classviewcontent.displaysize=classviewsize;

Classviewcontent.imagelist=viewimgs;

Classviewcontent.imageindex=1;

Set the properties of a floating window, title is the caption after the window shrinks

Fulltitle is the caption when the window is displayed

Linking floating windows to panels that are contained in a floating window

DOCKMANAGER.CONTENTS.ADD (solutionexplorercontent);

Windowcontent Wc=dockmanager.addcontentwithstate (

Solutionexplorercontent,state.dockright);

DOCKMANAGER.CONTENTS.ADD (classviewcontent);

Dockmanager.addcontenttowindowcontent (CLASSVIEWCONTENT,WC);

       }

2.4 add TabControl -Type Multi-pane controls to the main window Centerpanel

L Add controls

From the newly added control in the toolbar (Figure 1-3), drag a TabControl control onto the MainForm main window, as shown in:

Figure 3 Adding a TabControl control

L TabControl Properties of a control

Appearance: Determines the appearance of the control, the possible value Multidocument,multiform,multibox

Hidetabsmode: Determines how the TabControl panel control is hidden and displayed

Showalways: Always Show

Hidealways: Always do not show

Hideusinglogical: Show or hide according to logical judgment

Hidewithoutmouse: Hidden when the mouse is not on the control

Idepixelborder: Decide whether to draw a border around the TabControl Panel control

Showarrows: Determines whether the arrow in the upper-right corner of the panel is displayed

Showclose: Decide whether to display the Close button in the upper right corner of the panel

L Display the Code editing window on the central panel Centerpanel Codeeditor

You need to generate a TabPage object first, then wrap the code-editing window Codeeditor with TabPage, and finally add the TabPage object to Centerpanel's TabPages management queue.

private void Newcodeform_click (object sender, System.EventArgs e)

{

Crownwood.Magic.Controls.TabPage page=new Crownwood.Magic.Controls.TabPage ();

Page. Title= "Exam.cs";

Page. Control=new Codeeditor ();

CENTERPANEL.TABPAGES.ADD (page);

}

3 Conclusion

As mentioned above, using library functions such as magiclibrary in the. NET environment does make it very easy to implement a sophisticated interface that allows users to focus on the relevant parts of their application, thus greatly improving development efficiency.

Reference documents

Magic docking-vs.net Style, Phil wright,2002-9

[Go] Develop Visual Studio-style user Interface--magiclibrary usage guide