MultiRow发现之旅(一)- 高效模板设计器

简介: 在这篇博客中我将向大家介绍一个集成在VisualStudio中的很酷很给力的设计器——MultiRow模板设计器。它与VisualStudio无缝集成,提供与VisualStudio一脉相承的设计体验,可以使用VisualStudio提供的各种窗口、菜单命令等,你可以像使用WinForm设计器一样使用它。

在这篇博客中我将向大家介绍一个集成在VisualStudio中的很酷很给力的设计器——MultiRow模板设计器。它与VisualStudio无缝集成,提供与VisualStudio一脉相承的设计体验,可以使用VisualStudio提供的各种窗口、菜单命令等,你可以像使用WinForm设计器一样使用它。所以本系列博客将重点介绍一些很酷的功能。

尽管该设计器是专门为MultiRow产品开发的,想学习、试用MultiRow产品的朋友们固然不容错过,但是相信对其他朋友们也有很大的借鉴作用。

创建模板

那么,现在就让我们从创建一个模板出发,开始本次的设计之旅吧!

首先你需要安装MultiRow并创建一个项目。(MultiRow的下载地址等在本文的最下面会有详细说明;MultiRow模板设计器不需要许可证书,一旦安装就可以无限制永久免费使用)

然后打开“项目” 菜单,选择“添加新项”,并在对话框中选择“MultiRow 6.0 模板”就可以直接添加一个空白的模板,选择“MultiRow 6.0 模板生成向导”则会启动模版生成向导。

clip_image002

如果你用的是Visual Studio 2008 或者Visual Studio 2010,也许这个对话框中有太多的项而不太容易找到MultiRow的模板,那么你可以在左边选择Windows Forms的子项,这样找起来就容易多了:

clip_image004

抱歉:由于本人机器上只安装了Visual Studio 2010的英文版,所以截图都是英文的,但应该不妨碍大家理解。)

当然,默认生成的模板是空白的,只有一个Header Section和一个Row。

clip_image006

你也可以使用向导生成一个有初始Cell的、更加漂亮的模板。有关如何使用向导以及如何将模板应用给MultiRow将在未来的文章中讨论。clip_image008

无论如何,自动生成的模板是远远不够的,要想生成实际需要的模板,我们推荐的流程是这样的:

· 把你想生成的模板划分好区域,要迭代的区域放在Row;而Header和Footer区域可以有多个,最下面的Header一般用来输入值并做选择/过滤/排序,最上面的Footer用来放统计用的Cell,而其它的Header/Footer用来放静态的标签、图标等。(这只是一般做法,实际你可以在任何Header/Footer区域放任何Cell)

· 先大概规划好Section,比如固定Section的大小等。

· 往Section中填Cell。选定好Cell的类型,布局并给Cell起个跟功能相关的名字。

· 调整Cell的索引、“Tab”键顺序等。

· 设置Cell的属性、样式等。

MultiRow模板设计器的基本使用方法

MultiRow模板设计器的基本使用方法与WinForm基本相同:

· 从“工具箱”/“数据源”窗口拖拽Cell到界面上。

· 选择Template/Section/Cell并通过“属性”窗口设值。

· 拖拽Cell移动或者按住’Ctrl’键拖拽Cell复制。

· 拖拽选中Cell外圈的装饰调整大小。

· 使用快捷键或者右键菜单做剪切/复制/粘帖等。

· 使用VS的“布局”工具栏或者“格式”菜单等:
clip_image010
clip_image012

· 使用VS的其它工具窗口。

· 在设计器中切换到运行/打印预览模式以快速的预览对模板的改动。
clip_image014

· 使用MultiRow模板设计器独有的工具栏和工具窗口(将在下文详细介绍)。

运行模式

运行模式下可查看当前设定的模板在 GcMultiRow 中的行为效果。运行模式上 MultiRow 控件的属性为默认设定。

在此模式下,Cell 编辑的值会一直保存到文档窗口被关闭。

注意:在集成的运行模式下,由于VisualStudio环境的限制,所以可能有极少数的功能被禁用了而不起作用。所以最终的表现要以运行起来以后加载在Form上的MultiRow为准。

打印预览模式

当前设定的模板在 GcMultiRow 中的打印预览效果。此时 MultiRow 控件的属性为默认设定。

你可以通过内嵌的工具栏来配置打印:

clip_image016

clip_image018

注:有关打印、套打的相关内容敬请关注后续博客。

工具栏

MultiRow模板设计器提供了一个专用的工具栏,工具栏上集成了很多很常用的功能,比如设置字体、文字对齐方式,设置Cell的显示信息,打开工具窗口等。

右键点击工具栏的任何区域,并在弹出的菜单中将“MultiRow 6..0 模板设计器”勾选上,就可以看到该工具栏了。

clip_image020

模板管理器

当模板中Cell比较多的时候,你往往会眼花缭乱,这时“模板管理器”就特别有用。通过它,你可以一览当前模板中的所有元素(Template\Section\Cell)以及它们之间的关系。有关模板管理器的具体用法将在未来的文章中讨论。

clip_image022

属性管理器

另一个更加特别有用的窗口是“属性管理器”。如果你用过Form设计器,你一定遇到过这样一种场景:我只需要查看/修改某个Control的某个属性,却需要我在一大堆Control中找到并选择这个Control,然后打开“属性”窗口,再在一大堆属性中找到我关心的属性,最后才是查看/修改这个属性值,是不是很麻烦 %>_<% 呢?

MultiRow提供了“属性管理器”帮助你管理当前模板中所有Cell的常用属性。有关“属性管理器”的具体用法将在未来的文章中讨论。

clip_image024

NamedCellStyle 管理器

MultiRow模板设计器提供的最后一个工具窗口叫“NamedCellStyle 管理器”(即命名样式管理器),“NamedCellStyle ”管理器是管理模板中所有 NamedCellStyle 的窗口。使用此窗口,只需单击 1 次窗口中列出的 NamedCellStyle,便可将此 Style 应用于已选的 Cell。可在此窗口中添加、删除和更改 NamedCellStyle。此窗口与 Visual Studio 2008 中创建 ASP.NET Web 应用程序时所使用的“应用 Style”窗口相似。

你可以把它与“工具箱”、“数据源”窗口一起停靠在VisualStudio的左上角:
clip_image026

菜单

除了工具栏和工具窗口外,MultiRow模板设计器还在VisualStudio中集成了一个菜单,通过该菜单,你可以完成一些基本的操作。比如通过导入/导出布局,你可以把当前的模板保存为xml文件,然后在其他模板设计器中或者通过代码导入,以方便模板的共享。
clip_image028

Table

MultiRow最大的特点是自由布局,所以对MultiRow的模板设计器的操作就像Form设计器一样是以Cell为单位的。但很多时候,你需要的模板中间有很大一片区域就是一个方方正正的标准表格,如果要一个一个Cell的拼出这样一个表格的话,是不是太麻烦了?没关系,MultiRow的模板设计器早就考虑到了你的这种用例,并提供了一揽子解决方案,这就是“Table”。详情将在未来的文章中讨论。

clip_image030

设计样图

当你的客户/老板给你一张纸或者一个软件的截图,让你精确的照着纸/图片设计一个模板的时候,你是不是很痛苦?需要不停的对比图片和模板,然后微调Cell和Section。其实MultiRow模板设计器已经提供了设计样图的能力:

在MultiRow模板设计器中点击模板的灰色区域或者标尺的左上角选择模板,然后在“属性”窗口中找到TracingImage这个属性,把你的图片(如果是纸上的你需要先把它扫描到电脑上并用其它图像处理软件做些预处理,比如把图片旋转正)设给它,导入的图片就会出现在模板的背景中,你只需要根据背景上的图片调整/摆放Section/Cell即可:

clip_image032

当然,Template上还有几个其它属性来控制设计样图。比如默认情况下你可以单击Section的空白区域拖拽样图,但是把TracingImageLocked设成True后,设计样图就拽不动了。

一些很酷的细节

一个产品,最重要的是细节。MultiRow是一款精心打磨的产品,对细节的追求达到了极致,MultiRow 模板设计器的每一个功能,没一个按钮,甚至每一条线,每一个像素都经过严格的测试。

现在就让我们来看看MultiRow模板设计器的几个细节:

1、 丰富的对话框:每一个对话框都经过精心设计,布局严谨大方;每一个对话框都可以实现全键盘操作,对话框上每一个可操作的Control都有快捷键,它们的“Tab”键顺序也经过精心设计;每一个对话框都有帮助按钮,你可以点击该按钮或者使用“F1”键直接导航到帮助文档的相关内容。

2、 你在设计器中的几乎所有对模板有影响的操作都能够撤销/重做(Undo/Redo),特别是通过“属性”窗口对Style的子属性进行的修改也可以撤销/重做。而在Form设计器中修改复杂类型属性的子属性是不能撤销/重做的。

3、 设计器的皮肤会根据操作系统的不同而自动适应:
clip_image034clip_image036clip_image038clip_image040

4、 标尺上的小花招:

· 你注意到标尺的左上角又一个小方块了吗?当选中的是模板对象本身时,你注意到这个小方块的变化了吗?当然,你也可以直接点击这个小方块而选中模板。clip_image042

· 你又有没有注意到鼠标移动到标尺上时,光标发生了变化?试试按下鼠标拖拽看看,放手后拖拽区域的所有Cell是不是都被选中了?这在Cell特别密集,Section上没有太多空白空间而又想片选Cell的时候特别有用。

· 拖拽Cell的时候,标尺上的阴影你总该注意到了吧?有趣的是:标尺上的阴影会根据你拖拽Cell的多少而呈现出不同的浓度:
clip_image044

· 标尺的单位也是可以改变的,你可以功过上文提到的“设置”对话框中的RulerUnit属性进行设置,可供选择的单位有:英寸、厘米和像素(默认)。

5、 调皮的表头:
clip_image046
Table的行头怎么跑到右边去了?这是因为标尺在模板的设计区域之外,如果把行头放在左边,则会被标尺压住而无法显示,导致你无法对Table中的行进行操作,所以当Table的左边放不下行头时,我们把它挪到了右边。而Table角上显示的锁表示当前Table被锁定了,无法调整行/列的大小。

设计器语言

实际上,你下载的MultiRow中文版产品默认已经支持2种语言:中文和英文。MultiRow模板设计器使用的语言会根据你使用的VisualStudio的语言不同而自动选择,在中文VisualStudio中使用中文,而在英文VisualStudio中使用英文,跟操作系统的语言无关。

MultiRow模板设计器的下载、安装及其它

安装包下载:http://gcdn.grapecity.com/showtopic-786.html

说明1:试用期限不是30天,而是20个使用日。这样更有利于您安排试用时间。

说明2:安装MultiRow时就会自动安装MultiRow模板设计器。由于安装程序会重新配置你系统中所有的VisualStudio,所以如果你系统中安装的VisualStudio较多的话,安装过程可能需要你等待几分钟。

说明3:请确保你的VisualStudio是Visual Studio2005 SP1及以上的正式版本,MultiRow模板设计器无法工作在Visual Studio Express Edition上。

如果您有什么问题、有什么建议、或者找到了Bug,欢迎到我们的官方论坛提问:

http://gcdn.grapecity.com/

相关文章
|
3月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
67 1
|
4月前
|
C# 开发者 数据处理
WPF开发者必备秘籍:深度解析数据网格最佳实践,轻松玩转数据展示与编辑大揭秘!
【8月更文挑战第31天】数据网格控件是WPF应用程序中展示和编辑数据的关键组件,提供排序、筛选等功能,显著提升用户体验。本文探讨WPF中数据网格的最佳实践,通过DevExpress DataGrid示例介绍其集成方法,包括添加引用、定义数据模型及XAML配置。通过遵循数据绑定、性能优化、自定义列等最佳实践,可大幅提升数据处理效率和用户体验。
64 0
|
4月前
|
前端开发 JavaScript 开发者
Angular状态管理神器ngrx Store:从零开始的实践指南与进阶优化秘籍,让你的前端应用状态井井有条、高效运行的绝招大揭秘
【8月更文挑战第31天】状态管理在现代Web应用开发中至关重要,特别是在构建大型、复杂的Angular应用时。ngrx Store借鉴Redux的设计理念,提供集中式状态管理和可预测的数据流,有助于增强应用的可维护性和可测试性。
90 0
|
7月前
|
前端开发 JavaScript
前端 TS 快速入门之四:函数
前端 TS 快速入门之四:函数
39 0
|
7月前
|
前端开发
前端 TS 快速入门之五:泛型 T
前端 TS 快速入门之五:泛型 T
95 0
怎么快速熟悉模板
怎么快速熟悉模板
|
前端开发 UED
模板(Template):构建精美界面的设计之道
在现代应用程序开发中,模板是一个至关重要的概念,它用于定义应用程序的用户界面(UI)和布局。模板允许开发人员创建精美的界面,使用户界面设计变得更加可维护和可扩展。在本博客中,我们将深入研究模板的定义、类型和最佳实践,以及如何运用模板来打造出吸引人的应用程序界面。
85 0
|
存储 数据可视化 Ubuntu
bcftools学习笔记丨软件简介、安装方式、使用方法、核心功能、参数解释等一文速览
bcftools学习笔记丨软件简介、安装方式、使用方法、核心功能、参数解释等一文速览
|
前端开发 JavaScript
Vue3+TS从零到一开发通用组件—导航栏(案例详细流程,含源码)
Vue3+TS是目前前端vue开发的趋势,Vue3相对2来说有更好的响应式,函数式,模板编译优化等等,Ts是js的超集,可读性和维护性更高。这篇文章教大家如何从零到一利用Vue3+TS开发一个通用组件——导航栏,前端ui使用的是bootstrap框架,先来看一下实现的效果:
727 0
Vue3+TS从零到一开发通用组件—导航栏(案例详细流程,含源码)
|
JavaScript 小程序 物联网
HaaS UI小程序解决方案基础教学之七:创建第一个自定义组件
前面已经介绍过通过HaaS UI内置的组件库来搭建页面,而组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素(在HaaS UI里就是扩展基础组件库),封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用。
HaaS UI小程序解决方案基础教学之七:创建第一个自定义组件