开发者社区> walb呀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

在DevExpress中使用WizardControl控件构建多步向导界面

简介:
+关注继续查看

利用好的界面控件,往往能做成比较界面体验效果。在一些界面操作里面,我们可能把它拆分为几部进行处理,这个时候引入WizardControl向导控件应该是比较不错的选择了。多步的处理方式,可以让用户避免一次性输入太多内容的烦躁心情,也可以针对性的校验部分内容,本文以利用WizardControl控件来设计找回密码的结果来进行介绍,使大家对基于DevExpress的WizardControl向导控件的使用有一个大概的了解。

1、界面效果的规划

在一般APP或者基于网络的软件界面里面,都有一个为了帮助用户找回账号密码的功能,可以让用户自助通过手机、邮件等方式获得充值密码的机会。如一般的APP界面效果如下所示。

   

但是一般Winform的界面,可以利用向导控件做的更好,其中DevExpress的WizardControl向导控件就是一个很好的选择。

我们一般在DevExpress的VS工具栏里面选择导航布局选项卡,就可以找到对应的WizardControl向导控件了。

最终我们实现的效果如下所示。

2、控件的使用及代码处理

上面介绍了,在在DevExpress的VS工具栏里面选择导航布局选项卡,就可以找到对应的WizardControl向导控件了。

我们拖动能这个控件到一个空白的窗体界面上,就可以看到默认有一些界面了,我们在其中可以看到一个完整的向导界面效果的。

拖动过来的控件,初始化界面效果都是英文的,可以通过控件属性对其中的文字进行修改即可。

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

然后我们修改向导控件的一些属性,如图片、文字等内容,最后在其中空白的位置,拖入一些界面控件,实现我们的界面效果即可。

另外默认的向导控件是三个界面页的,因此我们可以根据需要增加或者删除一些,如本例我就移除了一个,仅仅使用两个页面来处理密码的找回处理即可。

另外,我们为了实现向导控件界面的输入验证和处理,我们往往还需要对其中下一步、完成、取消、帮助等事件进行处理,这样才能达到较好的处理效果。

其中部分处理代码如下所示。

        private void wizardControl1_NextClick(object sender, DevExpress.XtraWizard.WizardCommandButtonClickEventArgs e)
        {
            string pageText = e.Page.Text;
            if(pageText == "验证账号")
            {
                if (this.txtMobile.Text.Length == 0 || this.txtValidateCode.Text.Length == 0)
                {
                    MessageDxUtil.ShowTips("请输入手机号码和验证码");
                    e.Handled = true;
                    this.txtValidateCode.Focus();
                    return;
                }
                else if(!ValidateUtil.IsValidMobile(this.txtMobile.Text))
                {
                    MessageDxUtil.ShowTips("请输入正确的手机号码");
                    e.Handled = true;
                    this.txtMobile.Focus();
                    return;
                }
                else
                {
                    bool result = CallerFactory<ISmsCodeService>.Instance.CheckSmsCode(this.txtMobile.Text, this.txtValidateCode.Text);
                    if (!result)
                    {
                        MessageDxUtil.ShowTips("验证码校验不正确,请检查验证码是否在有效时间内。");
                        this.txtValidateCode.Focus();
                        return;
                        e.Handled = true;
                    }
                }
            }
            else if(pageText == "重置密码")
            {
                MessageDxUtil.ShowTips(pageText);
            }
        }

在这些Next下一步事件里面,有一个代码是需要阻塞下一步的处理的。

e.Handled = true;

这样我们就可以实现对用户输入的验证处理了,如果处理不通过,那么就停留在这个页面上,让用户校正输入即可。

如果是完成按钮页面,它的处理也是差不多。

        private void wizardControl1_FinishClick(object sender, CancelEventArgs e)
        {
            if (this.txtCorpAccount.Text.Length == 0)
            {
                this.txtCorpAccount.Focus();
                MessageDxUtil.ShowTips("公司账号不能为空!");
                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;
            }


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

最后我们实现的效果就是前面所说的一样了。

结合短信平台,我们可以给用户发送验证码以及提示消息即可。

本文转自博客园伍华聪的博客,原文链接:在DevExpress中使用WizardControl控件构建多步向导界面,如需转载请自行联系原博主。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Express3.0实现<Node.js开发指南>中的微博系统
特别说明:本实例仅在windows xp sp3系统下测试通过(其它系统未经过测试)。 这本书,之前有评论过,但之前并不清楚express2.x与3.x会有如此大的差异,导致在写例子的过程中痛苦不已。
655 0
(转)利用libcurl和国内著名的两个物联网云端通讯的例程, ubuntu和openwrt下调试成功(四)
1. libcurl 的参考文档如下 CURLOPT_HEADERFUNCTION Pass a pointer to a function that matches the following prototype: size_t function( void *ptr, size_t size, size_t nmemb, void *userdata);.
1133 0
WRFDA与WRFDA-4DVAR的编译安装
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ESA_DSQ/article/details/78391677 前面介绍过WRFDA的安装教程了。
841 0
使用函数工作流+函数计算轻松构建 ETL 离线数据处理系统
随着云计算、人工智能、物联网等新技术的应用普及,人类产生的数据呈现出了爆发式增长的态势,对数据处理的需求能力也提出了越来越高的要求。数据成了重要资产,收集、处理数据的能力成为了核心竞争力,比如:应用服务的运行监控,运营数据的分析,以及深度学习的数据过滤、预处理等,这些对已有数据的处理能力将直接影响服务的运营效率。
1889 0
应用系统瓶颈排查和分析的思考-Arthas 实战
业务应用系统接入流程引擎来处理业务应用的流程执行,流程引擎提供多线程高性能异步化来执行流程元素的执行,但是如何设置流程引擎的线程池线程数执行,以及执行线程数和任务数,应用机器资源使用情况之间的关系如何,目前只能通过接入方的人工经验评估,比较粗泛评估,参数的合理性也很难直观的评估,现通过现有的应用系统默认的参数配置进行问题说明。
0 0
ECS 7天实践训练营 - 使用 PolarDB 和 ECS 搭建门户网站
本场景将提供一台基础环境为CentOS的ECS(云服务器)实例和已经创建好的PolarDB数据库实例。我们将会在这台服务器上安装WordPress,帮助您快速搭建自己的云上博客。
0 0
婚恋源码实现快速盈利,支付系统功不可没
婚恋源码实现快速盈利,支付系统功不可没
0 0
Cypress系列(1)- Window下安装 Cypress 并打开
Cypress系列(1)- Window下安装 Cypress 并打开
0 0
【OpenFiler】使用虚拟机安装openfiler
【OpenFiler】使用虚拟机安装openfiler
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载