Mock-up Windows XP Interface elements

Use the Windows XP User Interface template to create mock-ups of user interfaces with shapes designed according to Microsoft Windows XP guidelines. The shapes include the elements commonly used in interfaces, such as a blank form for the basis of an application window, wizard pages, toolbar and menu shapes, and control shapes.

You can use these shapes to make everything from a mock-up of a complex application window or tabbed dialog box to a simple message box or single button.

What do you want to do?

Create a single dialog box

Create a tabbed dialog box

Create an application window

Build menus and toolbars

Create a single dialog box

1. From Windows and Dialogs, drag a Blank form shape onto the drawing page.

2. With the shape selected, type a title for the dialog box.

3. Drag a Window button shape onto the right end of the title bar and select the button type. There are typically a Help button and a Close button, arranged left to right.

4. Add command buttons, such as OK, Cancel, and Apply, to the lower right corner of the Blank form shape.

   how

   1. From Common Controls, drag Command button shapes to the lower right edge of the Blank form shape.

   2. Select each button and type the name of the control.

5. Drag appropriate controls onto the Blank form shape. Right-click the shapes to choose options as appropriate.

   For help on a specific control shape, right-click the shape and click Help.

   If you use the Text tool to create your own text on the Blank form shape, format the text as Tahoma 8 pt.

6. Cluster commands into logical groups.

7. Drag Group box and Group line shapes onto the Blank form shape to visually separate the groups.

   Use Guides to align the controls.

   The Print dialog box, under the File menu, is a good example of a dialog box with many of the most common elements.

Top of Page

Create a tabbed dialog box

1. From Windows and Dialogs, drag a Blank form shape onto the drawing page.

2. With the shape selected, type a title for the dialog box.

3. Drag a Window button shape onto the right end of the title bar and select the button type. There are typically a Help button and a Close button, arranged left to right.

4. Add command buttons, such as OK, Cancel, and Apply, to the lower right corner of the Blank form shape.

   how

   1. From Common controls, drag Command button shapes to the lower right edge of the Blank form shape.

   2. Select each button and type the name of the control.

5. Drag a Tab Control (body) shape onto the Blank form shape and size it to fit inside the form, leaving room for the tabs.

6. Drag a Tab Control (tabs) shape and glue it to the top edge of the Tab Control (body) shape.

7. With the Tab Control (tabs) shape selected, type a name for the tab.

8. Repeat steps 6 and 7 for each tab, gluing the tabs to each other as well as to the Tab Control (body) shape.

9. Right-click the tab you want to show as the front tab, click Foreground Tab, and set the others to Background Tab.

10. Drag appropriate controls onto the Blank form shape. Right-click the shapes to choose options as appropriate.

    For help on a specific control shape, right-click the shape and click Help.

    If you use the Text tool to create your own text on the Blank form shape, format the text as Tahoma 8 pt.

11. Cluster commands into logical groups.

12. Drag Group box and Group line shapes onto the Blank form shape to visually separate the groups.

    Use Guides to align the controls.

    The Page Setup dialog box, under the File menu, is a good example of a dialog box with many of the most common elements.

Top of Page

Create an application window

1. From Windows and Dialogs, drag a Blank form shape onto the drawing page.

2. With the shape selected, type a title for the application window.

3. To add an icon to the left of the text in the title bar, right-click the Blank form shape and check the Room for Icon check box.

4. Drag a Window buttons shape onto the right end of the title bar and select the button type. There are typically three buttons: a Minimize button, a Maximize or Restore button, and a Close button, arranged left to right.

5. From Toolbars and Menus, drag a Menu bar shape onto the Blank form shape, glue it to the bottom of the title bar, and then add menu items.

   how

   1. Drag a Top-level menu item shape to the page and glue it to the left edge of the Menu bar.

      You can place an icon to the left of the first menu item.

   2. With the shape selected, type a name. If the menu item has a keyboard shortcut, underline the appropriate letter.

   3. Repeat steps 1 and 2 as necessary.

      For help with a shape, right-click it and click Help.

      To hide the connection points , on the View menu, click Connection Points.

      Items in a column should all be the width of the widest one.

   To show the gripper dots at the left edge of the menu bar, right-click the shape and clear the Lock Menu Bar check box.

6. From Toolbars and Menus, drag a Toolbar shape onto the Blank form shape, glue it to the bottom of the menu bar, and then add toolbar buttons.

   how

   1. Drag one of the Toolbar buttons shapes to the page and glue it to the left edge of the Toolbar shape.

   2. In the Shape Data dialog box, choose the type of button you want. If you want to change the button later, right-click the shape and click Set Button Type to reopen the Shape Data dialog box.

   3. Drag out more Toolbar buttons and Button separator shapes as necessary and glue them to each other.

      For help with a shape, right-click it and click Help.

      To hide the connection points , on the View menu, click Connection Points.

   To show the gripper dots at the left edge of the toolbar, right-click the shape and clear the Lock Toolbar check box.

7. From Common Controls drag horizontal and vertical scroll bars as necessary to the right and bottom edges of the Blank form shape.

8. Right-click the scroll bars and choose Set Thumb Size to indicate how far the window can scroll.

   To indicate that only a small portion of the document is visible, make the thumb size small. To indicate that most of the document is visible, make the thumb size large.

9. Drag a Status bar shape to the lower edge of the application window and format appropriately.

   how

   1. Drag a Status bar divider shape to the page and glue it to the Status bar shape's control handle .

      Control handles provide a place to glue a Status bar divider shape to a Status bar or to another Status bar divider shape.

      If you can't see a Status bar divider shape after you glue it to a Status bar shape, select the Status bar shape and, on the Shape menu, point to Order, and then click Send backward.

   2. Drag a Window Resize shape to the right edge of the status bar to indicate that the window is currently resizable.

Top of Page

Build menus and toolbars

You can use the Windows XP shapes to build basic menus, drop-down menus, and toolbars.

Build a menu

1. From Toolbars and Menus, drag a Menu bar shape onto the drawing page. To show the gripper dots at the left edge of the menu bar, right-click the shape and clear the Lock Menu Bar check box.

2. Drag out a Top-level menu item shape and glue it to the left edge of the Menu bar.

   Tip: You might want to place an icon to the left of the first menu item.

3. With the shape selected, type a name. If the menu item has a keyboard shortcut, underline the appropriate letter.

4. Repeat steps 2 and 3 as necessary.

   For help with a shape, right-click it and click Help.

   To hide the connection points , on the View menu, click Connection Points.

   Items in a column should all be the width of the widest one.

Build a drop-down menu

1. Drag a Top-level menu item shape onto the drawing page.

2. With the shape selected, type a name. If the menu item has a keyboard shortcut, underline the appropriate letter.

3. Drag a Drop-down Menu Item shape, glue it to the bottom of the Top-level menu item, and type a name.

4. Repeat step 3 for all drop-down menu items in the column.

5. Resize all of the Drop-down Menu Items to the width of the widest one.

6. Right-click each Drop-down Menu Item shape, click Menu Item Properties, and select the appropriate options.

   For help with a shape, right-click it and click Help.

   To hide the connection points , on the View menu, click Connection Points.

Build a toolbar

1. From Toolbars and Menus, drag a Toolbar shape onto the drawing page. To show the gripper dots at the left edge of the toolbar, right-click the shape and clear the Lock Toolbar check box.

2. Drag a Toolbar button shape and glue it to the left edge of the Toolbar shape.

3. In the Shape Data dialog box, choose the type of button that you want. If you want to change the button later, right-click the shape and click Set Button Type to reopen the Shape Data dialog box.

4. Drag more Toolbar button and Button separator shapes as necessary and glue them to each other.

   For help with a shape, right-click it and click Help.

   To hide the connection points , on the View menu, click Connection Points.

Top of Page