[轉]開發Visual Studio風格的使用者介面－－MagicLibrary使用指南

標籤：

本文的範例程式碼為可以從這裡下載：
 

1           概述

微軟Visual Studio.NET開發工具推出已經好幾年了，這個開發工具一推出就以其易用性和強大功能深受開發人員的喜愛。尤其是.NET環境使得不同開發語言如C#、VB.NET以及C++.NET之間的互動變得非常容易。因此湧現了許多在.NET下開發的控制項陳列庫，可以供不同的開發語言調用。MagicLibrary就是其中比較優秀的一個用於介面設計的控制項陳列庫，可以用來開發類似.Net Studio這樣具有停靠視窗風格的介面。該庫的原始碼及使用說明可以從http://www.codeproject.com/cs/miscctrl/magicdocking.asp 下載，感興趣的讀者還可以通過研究該原始碼學習其實現原理。

是用該庫開發的一個樣本介面：

 

 
圖1 樣本介面

 

2           實現方法

下面介紹該樣本的實現步驟

 

2.1          安裝MagicLibrary

從網上下載MagicLibrary，安裝後得到幾個目錄，分別是協助檔案目錄，程式檔案目錄，原始碼目錄。程式的開發和以後分發過程中唯一需要的是程式檔案目錄下的MagicLibrary.dll檔案。

 

2.2          產生解決方案

l          在.Net Studio中產生解決方案MagicStudio，工程類型是Visual C#，Windows應用程式。

l          在MagicStudio解決方案的引用中加入MagicLibrary.dll庫(圖 1－1) 

 
圖 1－1 在工程中添加引用

l          添加控制項到工具箱

在工具面板上添加MagicLibrary的控制項,1-2,在工具箱面板上按右鍵，選擇快顯功能表中的“添加／移除項”，然後在彈出的視窗中點擊“瀏覽”按紐，選取MagicLibrary.dll檔案，確定後會在工具箱面板上出現幾個新的控制項，1－3所示。

 

                       

圖1－2 在工具面板上添加控制項                             圖1－3 工具面板上的新控制項

l          添加TabControl控制項

將解決方案MagicStudio的主視窗命名為MainForm，然後將工具面板上新增的TabControl控制項拖到主視窗上，如所示

圖1－4 解決方案MagicStudio的主視窗MainForm

 

l          添加子視窗

產生WinForm的“方案總管”視窗、“類別檢視”視窗、“代碼編輯”視窗，如所示

 

                   圖1－5 方案總管視窗             圖1－6 類別檢視視窗

 

圖1－7 代碼編輯視窗

 

2.3          編輯MagicStudio主視窗MainForm所在的檔案MagicStudio.cs的程式碼

 

l          加入using語句

using Crownwood.Magic.Common;

using Crownwood.Magic.Docking;

 

l          MagicStudio主視窗MainForm類裡定義DockingManager對象：

     private DockingManager dockManager;

 

l          在MainForm的建構函式裡添加初始化代碼

DockingManager的資料成員OuterControl，InnerControl用來決定DockingManager所在的視窗上哪些地區不受到DockingManager停靠視窗的影響

Docking Manager不會影響在OuterControl對象以後加入主視窗的對象的視窗地區

Docking Manager也不會影響在InnerControl對象以前加入主視窗的對象的視窗地區

例如：

              在InitailizeComponet()中，下面的語句決定了將主視窗上的控制項加入主視窗時的順序

              this.Controls.Add(this.centerPanel);

              this.Controls.Add(this.statusBar);

              this.Controls.Add(this.toolBar1);

 

dockManager.OuterControl=statusBar;

dockManager.InnerControl=centerPanel;

上面代碼決定了在centerPanel（包括centerPanel）以前加入的控制項和在statusBar(包括statursBar)後面加入的控制項的顯示地區不受到dockManager停靠視窗的影響

 

如果是

              this.Controls.Add(this.centerPanel);

              this.Controls.Add(this.toolBar1);

              this.Controls.Add(this.statusBar);

 

dockManager.OuterControl=statusBar;

dockManager.InnerControl=centerPanel

則程式實際啟動並執行結果，停靠視窗和工具列在一個高度上，可見toolBar1的顯示地區受到了DockManager停靠視窗的影響

圖2 控制項順序對介面效果的影響

 

l          產生停靠視窗

要在主視窗的四周產生可以伸縮的停靠視窗，需要先產生兩個Content對象，然後把“方案總管”視窗和“類別檢視”視窗各用一個Content對象封裝起來，把Content對象停靠在DockManager對象管理的WindowContent上。WindowContent自動管理視窗停靠。代碼如下：

//產生用來封裝視窗的Content

Content solutionExplorerContent=new Content(dockManager);

 

//用Content對象封裝要管理的視窗

solutionExplorerContent.Control=new SolutionExplorer();

 

//設定停靠視窗屬性

//擷取"方案總管"視窗的初始視窗尺寸

Size solutionExplorerSize=solutionExplorerContent.Control.Size;

 

//設定當停靠視窗收縮成標籤時標籤上的標題

solutionExplorerContent.Title="方案總管";

//設定停靠視窗展開時的標題

solutionExplorerContent.FullTitle="方案總管-Exam";

//設定Content停靠視窗從標籤狀態滑動出來成為視窗狀態時視窗大小

solutionExplorerContent.AutoHideSize=solutionExplorerSize;

//設定停靠視窗被“釘”在DockManager管理視窗上時的尺寸

solutionExplorerContent.DisplaySize=solutionExplorerSize;

//設定停靠視窗收縮時標籤上顯示的小表徵圖,viewImgs是使用者事先定義好的ImageList類型變數

solutionExplorerContent.ImageList=viewImgs;

solutionExplorerContent.ImageIndex=0;

 

將停靠視窗Content加入DockManager的管理隊列

dockManager.Contents.Add(solutionExplorerContent);

//用AddContentWithState()顯示Content停靠視窗，

//State.DockRight表明了是將視窗停靠在整個DockManager管理地區的右邊

//可選的還有State.DockLeft,State.DockTop,State.DockBottom,State.Floating;

//傳回值是WindowContent類型的變數，是用來容納多個Content對象

WindowContent wc=dockManager.AddContentWithState(

solutionExplorerContent,State.DockRight);

 

//假設前面已經設定了classViewContent的屬性，下面將classViewContent加入停靠

dockManager.Contents.Add(classViewContent);

//將classViewContent加入到“資源管理員”視窗所在的WindowContent中

dockManager.AddContentToWindowContent(classViewContent,wc);

 

完整的程式碼如下：

         public MainForm()

         {

              InitializeComponent();

 

              //產生IDE風格的管理視窗

              dockManager=new DockingManager(this,VisualStyle.IDE);

 

              dockManager.OuterControl=statusBar;

              dockManager.InnerControl=centerPanel;

             

              centerPanel.IDEPixelBorder=true;

 

              //產生Conten對象，該對象就是DockingManager管理的浮動視窗

              Content solutionExplorerContent=new Content(dockManager);

              solutionExplorerContent.Control=new SolutionExplorer();

              Size solutionExplorerSize=solutionExplorerContent.Control.Size;

 

              solutionExplorerContent.Title="方案總管";

              solutionExplorerContent.FullTitle="方案總管-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="類別檢視";

              classViewContent.FullTitle="類別檢視－Exam";

              classViewContent.AutoHideSize=classViewSize;

              classViewContent.DisplaySize=classViewSize;

              classViewContent.ImageList=viewImgs;

              classViewContent.ImageIndex=1;

 

              //設定浮動視窗的屬性，title是視窗收縮以後的標題

              //FullTitle是視窗顯示時的標題

              //將浮動視窗和具體在浮動視窗中被包含的面板聯絡起來

              dockManager.Contents.Add(solutionExplorerContent);

WindowContent wc=dockManager.AddContentWithState(

solutionExplorerContent,State.DockRight);

              dockManager.Contents.Add(classViewContent);

              dockManager.AddContentToWindowContent(classViewContent,wc);

       }

 

2.4          在主視窗上加入TabControl類型的多視窗面板控制項centerPanel

l          添加控制項

從工具列新添加的控制項中(圖1－3)拖動一個TabControl控制項到MainForm主視窗上，如所示：

圖 3 添加TabControl控制項

 

l          TabControl控制項的屬性

Appearance：決定控制項的外觀，可能的取值MultiDocument，MultiForm，MultiBox

HideTabsMode：決定TabControl面板控制項隱藏和顯示的方式

ShowAlways：總是顯示

HideAlways：總是不顯示

HideUsingLogical：根據邏輯判斷顯示或隱藏

HideWithoutMouse：當滑鼠不在控制項上時隱藏

IDEPixelBorder：決定是否在TabControl面板控制項四周畫邊框

ShowArrows：決定是否顯示面板右上方的箭頭

ShowClose：決定是否顯示面板右上方的關閉按紐

 

l          在中央面板centerPanel上顯示代碼編輯視窗CodeEditor

需要首先產生一個TabPage對象，然後用TabPage把代碼編輯視窗CodeEditor封裝起來，最後把TabPage對象加入到centerPanel的TabPages管理隊列中去

     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           結論

     如上所述，使用MagicLibrary這樣的庫函數在.NET環境下確實可以非常方便地實現一個精緻的介面，使使用者可以將注意力集中在和自己應用相關的部分，從而極大地提高了開發效率。

參考文獻

Magic Docking - VS.NET Style, Phil Wright,2002-9

[轉]開發Visual Studio風格的使用者介面－－MagicLibrary使用指南