Edit dialog boxes with Visual Studio - yumunet/WoditorTranslationGallery GitHub Wiki

This page explains how to edit dialog boxes with Visual Studio (the development environment for WOLF RPG Editor).

Why Visual Studio?

Resource Hacker and RisohEditor are well-known dialog editors, but both have a major drawback. That is, they can't edit in dialog units.

The units for control size and position are dialog units (DLU), not pixels.

A DLU is based on the size of the dialog box font, normally 8-point MS Shell Dlg. A horizontal DLU is the average width of the dialog box font divided by four. A vertical DLU is the average height of the font divided by 8. — How To: Layout Controls (C++) | Microsoft Learn

Most dialog boxes in WOLF RPG Editor use the 9-point Tahoma font. The specified font is MS Shell Dlg, but because it has the DS_SHELLFONT style, it becomes the Tahoma font. (Note that although font changes are possible in versions 3.5 and later, changing the font in the editor options won't change the dialog units itself.)

In Resource Hacker and RisohEditor, when you press the arrow keys to change the size and position, the values don't change in dialog units. (They probably change in pixel units and are converted to dialog units.) This causes the position and size to differ from what is expected, resulting in unintended collisions between controls and uneven alignment. This isn't a big problem when adjusting a few controls, but it's quite troublesome and inefficient when editing the entire dialog box.

In addition, in Resource Hacker, you can't select overlapping controls such as those within a group box by clicking on them (instead, you end up selecting the group box itself), and there's a critical bug that sometimes causes the extended styles to be deleted.

Advantages of Visual Studio

In Visual Studio, you can edit in dialog units, and you can select the control you clicked even within a group box. Of course, the extended styles are never deleted, and it is very stable.

Also, you can undo edits.

Install

Install Visual Studio.

  1. Download the installer from https://visualstudio.microsoft.com/ .
  2. Run the installer and proceed.
  3. Click Desktop development with C++ to check it.
    Visual Studio Installer
  4. Select Install.
  5. Once the installation is complete, the Sign in to Visual Studio window will be displayed. You can either sign in or skip.
  6. Click Start Visual Studio.

How to use

Here is how to actually edit the dialog boxes.

  1. Launch Visual Studio.
  2. Click Continue without code.
    Continue without code
  3. Drag and drop Editor.Lang.dll.
  4. Open the dialog box to edit from Dialog.
    Select dialog box
  5. Edit dialog box. (Details below)
  6. Save changes by pressing Ctrl+S.

Basic editing

Mainly do the following.

  • Left-click to select a control.
  • Multiple selection
    • Ctrl+Click to select the controls as the dominant control.
    • Shift+Click to select/deselect the controls.
    • Mouse drag to select all controls within the range.
  • Arrow keys to move the control.
  • Shift+Arrow keys to resize the control. (Multiple selections aren't allowed. Use the buttons described below.)

The position and size are displayed in the lower right corner, so adjust while looking at these values. (For example, when you extend the width of a control by 10, the controls to its right should also be shifted by 10. Of course, considering the margin, it isn't necessary for the values to be exactly the same.)

Position and size

Align or make same size

You can align and resize multiple controls using the buttons at the top. When doing so, the position and size of the dominant control highlighted by the black squares will be used as a reference. (To change the dominant control, press Ctrl+Click.)

Top buttons

Change style

You can change the style of the control in the Properties Window. To open it, select View > Properties Window.

Properties Window

The following two styles are often used:

  • Align Text: Change the alignment of text.
  • Multiline: Allow button or checkbox to span multiple lines.

Points to note

Some dialog boxes, such as ID 188, become DIALOG resources from DIALOGEX when saved, causing the dialog units to change and the window to shrink.

(It seems that if no extended styles are used, Visual Studio automatically changes the dialog box to a DIALOG resource. The DS_SHELLFONT style only works with DIALOGEX resource, so the font will change.)

In that case, open the edited dialog box in ResourceHacker and change the DIALOG to DIALOGEX.

Edit DIALOG

Merge into code

When merging into the code, open Editor.Lang.dll with ResourceHacker and simply copy and paste the resources of the edited dialog boxes into the appropriate locations.

If you have edited many dialog boxes, it's convenient to output the entire Dialog resource by selecting Action > Save [ Dialog ] group to an RC file.