Use the WizardControl control in DevExpress to build the multi-step wizard interface, devexpress

Use the WizardControl control in DevExpress to build the multi-step wizard interface, devexpress

Good interface controls can often be used to compare the interface experience. In some interface operations, we may split it into several parts for processing. At this time, introducing the WizardControl wizard control should be a good choice. The multi-step processing method allows users to avoid the annoyance of inputting too much content at a time, and can also verify part of the content in a targeted manner, this article describes how to use the WizardControl control to design the password retrieval result, so that you can have a rough understanding of the use of the DevExpress-based WizardControl wizard control.

1. interface effect Planning

In general apps or network-based software interfaces, there is a function to help users retrieve their account and password, allowing users to obtain recharge passwords through mobile phones, emails, and other methods on their own. The following figure shows the general effect of the APP interface.

However, the wizard control can be used to make better use of Winform interfaces. The Wizard control of DevExpress is a good choice.

We usually select the navigation layout tab in the VS Toolbar of DevExpress to find the corresponding WizardControl wizard control.

The final result is as follows.

 

2. Use of controls and code processing

As described above, select the navigation layout tab in the VS Toolbar of DevExpress to find the corresponding WizardControl wizard control.

We can drag this control to a blank form interface to see some interfaces by default. here we can see a complete wizard interface.

After you drag the control, the initialization interface effects are all in English. You can modify the text in the control properties.

The modified interface is as follows.

Then, we modify some properties of the wizard control, such as tabs and text, and finally drag some interface controls in the blank space to achieve our interface effect.

In addition, the default wizard control has three interface pages, so we can add or delete some pages as needed. In this example, I have removed one, use only two pages to retrieve the password.

In addition, in order to verify and process the input in the Wizard control interface, we often need to process the next, complete, cancel, help, and other events in order to achieve better processing results.

Some of the processing code is as follows.

Private void wizardcontrolpolicnextclick (object sender, DevExpress. xtraWizard. wizardCommandButtonClickEventArgs e) {string pageText = e. page. text; if (pageText = "verify account") {if (this.txt Mobile. text. length = 0 | this.txt ValidateCode. text. length = 0) {MessageDxUtil. showTips ("Enter your mobile phone number and Verification Code ");E. Handled= True;This.txt ValidateCode. Focus (); return;} else if (! ValidateUtil.IsValidMobile(this.txt Mobile. Text) {MessageDxUtil. ShowTips ("enter the correct Mobile phone number ");E. Handled= True;This.txt Mobile. Focus (); return;} else {bool result = CallerFactory <ISmsCodeService> .Instance.CheckSmsCode(this.txt Mobile. Text, this.txt ValidateCode. Text); if (! Result) {MessageDxUtil. ShowTips ("the verification code is incorrect. Check whether the verification code is valid within the validity period. "); This.txt ValidateCode. focus (); return; e. handled = true ;}} else if (pageText = "Reset Password") {MessageDxUtil. showTips (pageText );}}

In these Next events, there is a code that needs to block the Next process.

e.Handled = true;

In this way, we can verify the user input. If the processing fails, we will stay on this page and let the user correct the input.

If the button is completed, the processing is similar.

Private void wizardControl1_FinishClick (object sender, CancelEventArgs e) {if (this.txt CorpAccount. text. length = 0) {this.txt CorpAccount. focus (); MessageDxUtil. showTips ("company account cannot be blank! ");E. Cancel= True;Return;} else if(this.txt NewPassword. Text. Length = 0) {this.txt NewPassword. Focus (); MessageDxUtil. ShowTips ("the password cannot be blank! "); E. Cancel = true; return;} else if (! This.txtnewpassword.text.ss(this.txt RePassword. Text) {this.txt RePassword. Focus (); MessageDxUtil. ShowTips ("the two passwords are inconsistent! "); E. Cancel = true; return ;}...............

In the end, we achieved the same effect as we mentioned above.

In combination with the SMS platform, we can send verification codes and prompt messages to users.