[转]开发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

时间: 2024-12-28 11:28:05

[转]开发Visual Studio风格的用户界面--MagicLibrary使用指南的相关文章

Visual Studio 2017上配置OpenGL编程指南第8版开发环境

一直想学习一下OpenGL,买了红宝书第8版,却因为工作原因一直没有时间看,最近利用周末尝试了一下配置开发环境,遇到了一些坑点,现在记录下来备用. 第一步:打开Visual Studio 2017,建立一个空的C++工程 第二步:新建triangles.cpp文件,并写入书本例子中的代码 /////////////////////////////////////////////////////////////////////// // // triangles.cpp // //////////

开发Visual Studio 插件

新建项目,在其他项目类型中找到扩展性,然后新建Visual Studio外接程序,VS中没有这个要安装SDK,http://yunpan.cn/cd27eNczKREwd (提取码:ab29)去下载 部署插件 在部署目录中如果在vs工具中没有显示安装的插件,可以将别的vs目录中的Addin文件夹拷贝到相应的vs中去. 相关示例代码:监听复制剪切源码http://yunpan.cn/cd8gS2txG3R9c (提取码:6b57)监听保存事件源码:http://yunpan.cn/cd8gMyjz

自己开发Visual studio插件-一个nvelocity高亮插件

首先,有一个项目用到了nvelocity模板引擎,但是用vs开发模板的时候,没有高亮效果,所以非常不方便,鉴于这个,于是有了自己开发插件的念头,但是在vs sdk开发上面,这方面的资料真是少之又少,网上能参考的文章真是寥寥无几. 不过借鉴了几篇文章和参考MSDN后,总算开发出了一款VS插件,目前是支持nvelocity的语法高亮,比如nvelocity的关键字#set #parse等等 还有nvelocity的对象$xxx这样的格式,还有注释## #**#这样的,但是这里出现一个小曲 就是因为我

Visual Studio 2017 ASP.NET Core开发

Visual Studio 2017 ASP.NET Core开发,Visual Studio 2017 已经内置ASP.NET Core 开发工具. 在选择.NET Core 功能安装以后就可以进行ASP.NET Core开发. 新的ASP.NET Core项目为csproj ,打开之前的xproj项目,会提示单向升级,确认以后,会自动帮你升级至csproj. 新建项目 VS 2017新建ASP.NET Core 项目: 确定以后 可选择ASP.NET Core 1.0 和ASP.NET Co

使用Visual Studio进行 Android开发的十大理由

[原文发表地址]Top 10 reasons to use Visual Studio for C++ Android Development! Visual Studio: C++跨平台的移动解决方案 Visual Studio (下载地址) 正在迅速成为一个跨平台的C++IDE.我们的目标是让Visual Studio成为您研发C++跨平台代码的选择,无论您的目标是Windows (UWP), Android, iOS, Linux, Xbox, PlayStation, Marmalade

visual Studio 2017 扩展开发(一)《向Visual Studio菜单栏新增一个菜单》

最近有接触到关于visual studio 2017 扩展的开发,特此记录,也是为了督促自己去深入了解其原理. 开始开发Visual Studio 扩展,在这里我安装了visual studio 2017, 在安装的时候记得勾选上visual studio 扩展开发. 创建一个项目 我们打开编译器,文件→新建项目,模板→Visual C#→Extensibility 选择 VSIX Project.创建一个项目. 添加自定义命令 右键项目,添加新项.Visual C#项→Extensibilit

在Visual Studio中配置BabylonJS开发环境

为什么(用Visual Studio)? 有许多IDE可用于Babylon.js开发, Visual Studio是其中之一. 通过Visual Studio你将能够将库和你的代码一起编译,而且能测试两者(库和你的代码). 编译模式 在深入之前,你需要明白有两种编译模式可用来编译Babylon.js. 发布模式 你可以使用Gulp脚本来创建主发布文件(babylon.js, babylon.max.js, babylon.d.ts) , 它们将被存储到之前的路径里. 这个模式通常用来创建一个快速

微软Visual Studio Online:一款能打造网页版开发工具

根据开发者对IntelliCode以及Live Share的回馈,微软进一步延伸远程程序代码协作概念,即将推出三个能增加开发生产力的功能,分别是个人远程开发.云端开发环境配置,以及网页版Visual Studio Online.微软提到,个人远程开发这项功能,是他们释出程序代码协作功能Live Share的时候,就收到的回馈建议,而远程开发也的确有其优点,能在有别于部署应用程序的操作系统工作,可以让开发者利用更高阶的硬件进行开发,还能增加应用程序的可移植性.而在五月初,微软已经为Visual S

Visual Studio Code中文文档

Visual Studio Code中文文档 Visual Studio Code是一个轻量级但是十分强大的源代码编辑器,重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行.Visual Studio Code内置了对JavaScript, TypeScript和Node.js语言的支持,并且为其他语言如C++, C#, Python, PHP等提供了丰富的扩展库和运行时. 一.Visual Studio Code实际应用(一)快速强大的编码功能:    能够快速捕捉程