MultiRow發現之旅(六)- 使用MultiRow開發票據應用(附原始碼)

weixin_34219944發表於2010-12-23

前文回顧

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 中文版

相關文章