[轉]開發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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM