外围网上金喜网站

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

转帖|使用教程|编辑:龚雪|2021-01-29 11:18:09.007|阅读 193 次

概述:本文利用WizardControl控件来设计找回密码的结果来进行介绍,使大家对基于DevExpress的WizardControl向导控件的使用有一个大概的了解。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接:

DevExpress Universal Subscription拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

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

一、界面效果的规划

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

WinForm界面开发教程

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

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

WinForm界面开发教程

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

WinForm界面开发教程
WinForm界面开发教程
二、控件的使用及代码处理

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

WinForm界面开发教程

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

WinForm界面开发教程

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

WinForm界面开发教程

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

WinForm界面开发教程

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

WinForm界面开发教程

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

WinForm界面开发教程

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

WinForm界面开发教程

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

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;
}

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

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

WinForm界面开发教程
WinForm界面开发教程

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

本文转载自


DevExpress技术交流群3:700924826      欢迎一起进群讨论

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@ipmdipw.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
DevExpress Universal Subscription

优秀的界面控件开发包,帮助企业构建卓越应用!

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!

DevExpress WinForms Subscription

为Windows Forms平台创建具有影响力的业务解决方案,高性价比WinForms界面控件套包。

DevExpress WPF Subscription

高效MVVM开发模式,WPF界面解决方案首选工具,帮助企业实现酷炫动效界面。

DevExpress ASP.NET Controls

多款重量级ASP.NET用户界面组件套包,让您快速开发出完美、强大的应用程序!

title
title
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP