---

Design a GUI Form

This tutorial will guide you step by step through the creation of a simple GUI Form from scratch. It is addressed to those who have no previous experience in using the DesignerVista application.

1. Run DesignerVista Application.
2. Create New Document.
3. Add Window Control.
4. Customize Window Control Properties.
5. Customize Window Icon.
6. Customize Window Background.
7. Add User Name Controls.
8. Add Password Name Controls.
9. Add Login Buttons.

• Run DesignerVista Application if it is not yet started.
• Product Selection Dialog will be shown.
• Select Desktop product and click OK button.
• DesignerVista for Desktop GUI Mockup application will be launched.

Press Ctrl + N or Select [ File | New | Document ] menu item to create a new document.

Add Window Control

1. Drag and drop [ Windows and Dialogs | Window] control from the Shapes Explorer Window.
2. Double click on the Title bar of Window control to change the title as "Login Dialog".

1. Select Window control.
2. In the Properties window, uncheck the following properties:
   
   • Iconifiable
   • Maximizable

1. Select Window control.
2. Press Ctrl + G or Right Click and Select [ Icon | Icon... ] Menu item.
3. Icon Browser window will be shown.
4. Click on Search Button.
5. Input text "User" and Press Enter Key.
6. Scroll down the result listbox and select "User" icon as shown below.
7. Click OK button.

1. Select Window control.
2. Press Ctrl + D or Right Click and Select [ Background | Custom Background ] men item.
3. Fill Color Dialog will be shown.
4. Select a background ( Solid, Gradient, Preset, Texture, Pattern or Picture background colors).
5. Selected color will be updated immediately. If the window control is hidden, move the Fill Color Dialog little bit off to see the changes.

1. Drag and drop Label control from Shapes Explorer to the current page.
2. Double click on the control or Press F3 and change the text as "User Name:"
3. Drag and drop TextBox control.
4. Double click on the control or Press F3 and delete the text.

1. Select Name and Textbox controls.
2. Hold down Ctrl key and drag and drop to make a copy of the selected controls.
3. Double click on the Name label or Press F3 to change the text as "Password".

1. Drag and drop Separators | Horizontal Separator control.
2. Drag and drop Common Controls | Button control.
3. Double click on the Button control or Press F3 and change the text as "&Login".
4. Drag and drop Common Controls | Button control.
5. Double click on the Button control or Press F3 and change the text as "Cancel".

The End