MultiRow发现之旅(六)- 使用MultiRow开发票据应用(附源码)

简介: 前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Table MultiRow发现之旅(四)- 使用MultiRow开发WinForm应用(附源码) MultiRow发现之旅(五)- MultiRow版俄罗斯方块(exe + 源码)   本文将使用MultiRow实现票据开发功能,模拟大家都很熟悉的“中国移动通讯公司”的展示发票。

前文回顾

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

MultiRow发现之旅(二)- 详解属性管理器

MultiRow发现之旅(三)- 模板管理器和Table

MultiRow发现之旅(四)- 使用MultiRow开发WinForm应用(附源码)

MultiRow发现之旅(五)- MultiRow版俄罗斯方块(exe + 源码)

 

本文将使用MultiRow实现票据开发功能,模拟大家都很熟悉的“中国移动通讯公司”的展示发票。效果图如下:

clip_image002

打印为xps格式并用XPS Viewer打开,效果如下:

clip_image004

 

发票模板设计

现在就动手设计发票模板吧。在工程中心添加一个windows窗体,命名为“发票窗体”,在设计器中拖放一个MultiRow和一个按钮。

然后添加新模板并且进入新模板的编辑界面。(如果你对如何添加新模板以及编辑模板不熟悉,建议参考之前的几篇MultiRow系列文章。)如图所示:

clip_image006

下面开始编辑发票模板。在模板设计器点右键:添加->ColumnFooter, 添加一个ColumnFooterSection,稍后会用来做发票的底部。

1. 选中ColumnHeaderSection1,在属性窗口中把BackColor属性设为白色,这是为了在打印的时候和纸的颜色保持一致。同样的处理RowSection和ColumnfooteSection.

2. 选中ColumnHeaderSection1, 在属性窗口中展开DefaultCellStyle属性,并把ForeColor设为下图所示的颜色:

clip_image008

这样就能使其上面的Cell的ForeColor默认变成橙色了,就不用每个cell都去设一次ForeColor了。 同样处理RowSection和ColomnFooterSection。

3. 先拖放一个ImagCell到columnHeaderSection上,作为logo。

clip_image010

4. 然后拖放Label来摆成这个样子:(其中图中红色的两个cell需要在属性窗口中将Forecolor改为红色)

clip_image012

5. 拖放一个PrintInfoCell到图中“缴费日期”的后面:

clip_image014

并在属性窗口中,设置FormatString:

clip_image016

这表示在打印的时候,打印出当前的日期。我们再手动编辑一下这个字符串,把其中的斜杠替换成“年”,和“月”,并在最后加上“日”:

clip_image018

展开Style将ForeColor设为蓝色。

设置之后是这个样子:

clip_image020

6. 在拖放一个Labelcell到下图的位置,作为剪裁线:

clip_image022

在属性窗口中,Value属性设置为“剪裁线”,并展开Style。

设置TextVertical属性为True。

设置UseCompatibleTextRendering属性为True。

点开Border属性后面的编辑器。在弹出的边框对话框中选择普通边框,然后选择蓝色,并选择一种虚线设值给左边框:
clip_image024

然后确定,关闭对话框。设置后的效果:

clip_image026

7. 拖放一个ImageCell,作为Value设为收费专用章的图片。

clip_image028

这个发票头基本完成了。最后一步去掉所有这些Cell的边框。点击ColumnHeaderSecion的空白地方(不要点击到Cell上)选中ColumnHeaderSecion. 然后在属性窗口中展开DefaultCellStyle属性,点开Border属性的编辑器,选择普通边框,点击“无”,然后点击确定,关闭对话框。至此发票的抬头就完全做好了。

8. 现在来编辑发票的主体。

从工具箱中选中Table,然后在模板上拖放一个较大的Table:

clip_image030

选择相应的Cell,然后鼠标右键选择“合并”,把table的Cell合并成下面的样子:

clip_image032

输入相应的文字:

clip_image034

其中蓝色的Cell都需要把Style中的Forecolor改为蓝色。用红框标明的cell,其中的文字都是设置的它们的DesignTimeValue属性。其余的都是设置的Value属性。

图中的2号Cell还设置了Font的大小,并把Style中的TextVertical和UseCompatibleTextRendering属性都设为了true。

把图中的3,4,5号Cell分别命名为”姓名”,“电话”,”日期”。

再把途中3号框中的Cell从上到下,Name属性依次设值为:”市话费”,“来电显示费”,“短信息费”,“GPRS费”,“长途费”。效果如下:

clip_image036

图中的1号Cell需要先替换成一个SummaryCell(选中这个Cell,鼠标右键,选择置换->标准Cell->SummaryCell)。SummaryCell的Calculation属性设置为Expression, ExpressionString设置为:“市话费+来电显示费+短信息费+GPRS费+长途费”:

clip_image038

在RowSection上的空白地方按下鼠标左键,拖拽到table中,松开鼠标,此时整个Table被选中了,

clip_image040

clip_image042

在table上点鼠标右键,选择边框. 在弹出的边框编辑器中选择“圆角边框”,并选择如下图所示的颜色和线条样式,点击外边框:

clip_image044

然后点击确定关闭对话框。完成之后是这个样子:

clip_image046

再次选中整个table,然后点右键选择“拆分成自由Cell”:

clip_image048

现在在依次调整每个Cell的边框和位置为下面的样子:

clip_image050

(拖拽的过程中,细心的笔者发现自己写了一个错别字,于是改正之^_^,亲爱的读者你能看出来吗。)

接下来在把右面的剪裁线和发票存根做出来吧:(详细步骤就不多说了,跟上面的类似.)

clip_image052

将“本次缴费”后面的Cell命名为“缴费”,把“积分”后面的Cell命名为“积分”:

clip_image054

“本次结余”后面的Cell是一个SummaryCell, 它的Calculation设为Expression, ExpressionString设置为“缴费-summaryCell1”:

clip_image056

到这里,发票主体就完成了。

最后在ColumnFooterSectin上做出发票的落款(详细步骤参考前面的):

clip_image058

好了,最后看一下整体效果图吧:
clip_image060

是不是很不错呢?

 

发票打印

现在来处理发票打印的动作。回到发票窗体的设计器。调整Multirow的大小到刚好能显示全部发票内容。

clip_image062

双击打印按钮,添加事件处理代码:
clip_image064

在发票窗体中给发票窗体类添加如下方法:

clip_image066

最后,切回主窗体的设计器,查看代码, 找到最开始的“显示打印发票界面()”函数:

clip_image068

加入以下代码:
clip_image070

好了 ,到这里整个收费系统就大功告成了,运行起来看看效果吧。

源代码

票据应用

MultiRow 6.0 中文版

相关文章
|
2天前
|
人工智能 API 开发工具
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
Claude Code是我目前最推荐的AI编程工具,没有之一。 它可能不是最简单的,但绝对是上限最高的。一旦跑通安装、接上模型、定好规范,你会发现很多原本需要几小时的工作,现在几分钟就能搞定。 这套方案的核心优势就三个字:可控性。你不用依赖任何不稳定服务,所有组件都在自己手里。模型效果不好?换一个。框架更新了?自己决定升不升。 这才是AI时代开发者该有的姿势——不是被动等喂饭,而是主动搭建自己的生产力基础设施。 希望这篇保姆教程,能帮你顺利上车。做出你自己的作品。
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
|
9天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。
3870 21
|
5天前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
2467 8
|
4天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro,跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
2086 4
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
|
21天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
19003 60
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
2天前
|
SQL 人工智能 弹性计算
阿里云发布 Agentic NDR,威胁检测与响应进入智能体时代
欢迎前往阿里云云防火墙控制台体验!
1170 2

热门文章

最新文章