DevExpress使用教程：利用WizardControl構(gòu)建多步向?qū)Ы缑?/h2>

轉(zhuǎn)帖|使用教程|編輯：我只采一朵|2015-11-02 15:01:15.000|閱讀 2947 次

概述：本文以利用WizardControl控件來(lái)設(shè)計(jì)找回密碼的結(jié)果來(lái)進(jìn)行介紹，使大家對(duì)基于DevExpress的WizardControl向?qū)Э丶氖褂糜幸粋€(gè)大概的了解。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

• DevExpress使用教程：如何實(shí)現(xiàn)Dashboard中的數(shù)據(jù)操作
• DevExpress使用教程：富文本編輯器RichEditControl
• DevExpress使用教程：使用ChartControl繪制多重坐標(biāo)圖形
• DevExpress使用教程：GridView經(jīng)驗(yàn)小結(jié)
• DevExpress使用教程：Form窗體經(jīng)驗(yàn)小結(jié)
• DevExpress使用教程：向GridControl添加進(jìn)度條控件
• DevExpress使用教程：常用Winform界面封裝
• DevExpress使用教程：XtraGrid常見用法
• DevExpress使用教程：PopupMenu使用心得
• DevExpress使用教程：窗體換膚
• DevExpress使用教程：Gridview下拉框
• DevExpress使用教程：添加非綁定列
• DevExpress XtraReport和微軟RDLC報(bào)表的詳細(xì)對(duì)比分析
• DevExpress使用教程：XtraGridControl動(dòng)態(tài)添加右鍵菜單
• DevExpress使用教程：PDF、Word、Excel文檔的預(yù)覽及操作處理
• DevExpress使用教程：手把手教你用官方漢化資源做漢化
• 圖文詳解！DevExpress XtraScheduler日程管理控件應(yīng)用實(shí)例（1）-- 基本使用
• 圖文詳解！DevExpress XtraScheduler日程管理控件應(yīng)用實(shí)例（2）-- 深入理解數(shù)據(jù)存儲(chǔ)
• 【實(shí)例】如何利用控件完成Winforms圖形化界面設(shè)計(jì)
• DevExpress官方漢化包2012-2019版免費(fèi)下載！v19.2全新發(fā)布助力界面開發(fā)
• 本期連載目錄 > > > >

利用好的界面控件，往往能做成比較棒的界面體驗(yàn)效果。在一些界面操作里面，我們可能把它拆分為幾部進(jìn)行處理，這個(gè)時(shí)候引入WizardControl向?qū)Э丶?yīng)該是比較不錯(cuò)的選擇了。多步的處理方式，可以讓用戶避免一次性輸入太多內(nèi)容的煩躁心情，也可以針對(duì)性的校驗(yàn)部分內(nèi)容，本文以利用WizardControl控件來(lái)設(shè)計(jì)找回密碼的結(jié)果來(lái)進(jìn)行介紹，使大家對(duì)基于DevExpress的WizardControl向?qū)Э丶氖褂糜幸粋€(gè)大概的了解。

| DevExpress最新版下載 |

1、界面效果的規(guī)劃

在一般APP或者基于網(wǎng)絡(luò)的軟件界面里面，都有一個(gè)為了幫助用戶找回賬號(hào)密碼的功能，可以讓用戶自助通過(guò)手機(jī)、郵件等方式獲得充值密碼的機(jī)會(huì)。如一般的APP界面效果如下所示。

但是一般Winform的界面，可以利用向?qū)Э丶龅母茫渲蠨evExpress的WizardControl向?qū)Э丶褪且粋€(gè)很好的選擇。

我們一般在DevExpress的VS工具欄里面選擇導(dǎo)航布局選項(xiàng)卡，就可以找到對(duì)應(yīng)的WizardControl向?qū)Э丶恕?/p>

最終我們實(shí)現(xiàn)的效果如下所示。

2、控件的使用及代碼處理

上面介紹了，在在DevExpress的VS工具欄里面選擇導(dǎo)航布局選項(xiàng)卡，就可以找到對(duì)應(yīng)的WizardControl向?qū)Э丶恕?/p>

我們拖動(dòng)能這個(gè)控件到一個(gè)空白的窗體界面上，就可以看到默認(rèn)有一些界面了，我們?cè)谄渲锌梢钥吹揭粋€(gè)完整的向?qū)Ы缑嫘Ч摹?/p>

拖動(dòng)過(guò)來(lái)的控件，初始化界面效果都是英文的，可以通過(guò)控件屬性對(duì)其中的文字進(jìn)行修改即可。

修改后的界面效果如下所示。

然后我們修改向?qū)Э丶囊恍傩裕鐖D片、文字等內(nèi)容，最后在其中空白的位置，拖入一些界面控件，實(shí)現(xiàn)我們的界面效果即可。

另外默認(rèn)的向?qū)Э丶侨齻€(gè)界面頁(yè)的，因此我們可以根據(jù)需要增加或者刪除一些，如本例我就移除了一個(gè)，僅僅使用兩個(gè)頁(yè)面來(lái)處理密碼的找回處理即可。

另外，我們?yōu)榱藢?shí)現(xiàn)向?qū)Э丶缑娴妮斎腧?yàn)證和處理，我們往往還需要對(duì)其中下一步、完成、取消、幫助等事件進(jìn)行處理，這樣才能達(dá)到較好的處理效果。

其中部分處理代碼如下所示。

private void wizardControl1_NextClick(object sender, DevExpress.XtraWizard.WizardCommandButtonClickEventArgs e)
        {
            string pageText = e.Page.Text;
            if(pageText == "驗(yàn)證賬號(hào)")
            {
                if (this.txtMobile.Text.Length == 0 || this.txtValidateCode.Text.Length == 0)
                {
                    MessageDxUtil.ShowTips("請(qǐng)輸入手機(jī)號(hào)碼和驗(yàn)證碼");
                    e.Handled = true;
                    this.txtValidateCode.Focus();
                    return;
                }
                else if(!ValidateUtil.IsValidMobile(this.txtMobile.Text))
                {
                    MessageDxUtil.ShowTips("請(qǐng)輸入正確的手機(jī)號(hào)碼");
                    e.Handled = true;
                    this.txtMobile.Focus();
                    return;
                }
                else
                {
                    bool result = CallerFactory<ISmsCodeService>.Instance.CheckSmsCode(this.txtMobile.Text, this.txtValidateCode.Text);
                    if (!result)
                    {
                        MessageDxUtil.ShowTips("驗(yàn)證碼校驗(yàn)不正確，請(qǐng)檢查驗(yàn)證碼是否在有效時(shí)間內(nèi)。");
                        this.txtValidateCode.Focus();
                        return;
                        e.Handled = true;
                    }
                }
            }
            else if(pageText == "重置密碼")
            {
                MessageDxUtil.ShowTips(pageText);
            }
        }

在這些Next下一步事件里面，有一個(gè)代碼是需要阻塞下一步的處理的。

e.Handled = true;

這樣我們就可以實(shí)現(xiàn)對(duì)用戶輸入的驗(yàn)證處理了，如果處理不通過(guò)，那么就停留在這個(gè)頁(yè)面上，讓用戶校正輸入即可。

如果是完成按鈕頁(yè)面，它的處理也是差不多。

private void wizardControl1_FinishClick(object sender, CancelEventArgs e)
        {
            if (this.txtCorpAccount.Text.Length == 0)
            {
                this.txtCorpAccount.Focus();
                MessageDxUtil.ShowTips("公司賬號(hào)不能為空！");
                e.Cancel = true;
                return;
            }
            else if(this.txtNewPassword.Text.Length == 0)
            {
                this.txtNewPassword.Focus();
                MessageDxUtil.ShowTips("密碼不能為空！");
                e.Cancel = true;
                return;
            }
            else if (!this.txtNewPassword.Text.Equals(this.txtRePassword.Text))
            {
                this.txtRePassword.Focus();
                MessageDxUtil.ShowTips("兩次密碼不一致！");
                e.Cancel = true;
                return;
            }


          ...............

最后我們實(shí)現(xiàn)的效果就是前面所說(shuō)的一樣了。

結(jié)合短信平臺(tái)，我們可以給用戶發(fā)送驗(yàn)證碼以及提示消息即可。

本文原文為博客園伍華聰發(fā)布。

DevExpress年終促銷火熱進(jìn)行中！低至8折起！
如果您要購(gòu)買DevExpress或者對(duì)產(chǎn)品還存在疑問(wèn)，請(qǐng)咨詢我們的>>

標(biāo)簽：DevExpress

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

上一篇：Qt使用教程：創(chuàng)建一個(gè)基于Qt部件的應(yīng)用程序（三） 下一篇：Barcode Professional for ASP.NET使用教程：條碼圖像保存到數(shù)據(jù)庫(kù)或者XML文件