4
votes

The UX designer's call. I am reworking layout for Ready Page to make it similar to Welcome Page as in my drawing:

UX Designer wants Ready Page to look more like Welcome page

The two slides above are standard pages. The one on the bottom is reworked Ready Page. How can I reposition all the controls and text labels to accomplish that?

P.S. I accepted the answer from Martin Prikryl and the most important part was the structure from Wizard.dfm.txt. The exact answer was not fully applicable partially due to the sketch above being simplification of the problem with upgrading the installation project to use with Graphic Installer plug-in for Inno Setup.

1

1 Answers

4
votes

The TWizardForm class has a structure like (.dfm format):

object OuterNotebook: TNewNotebook
  object WelcomePage: TNewNotebookPage
    object WizardBitmapImage: TBitmapImage
    object WelcomeLabel2: TNewStaticText
    object WelcomeLabel1: TNewStaticText
  end
  object InnerPage: TNewNotebookPage
    object Bevel1: TBevel
    object InnerNotebook: TNewNotebook
      ...
      object ReadyPage: TNewNotebookPage
        object ReadyMemo: TNewMemo
        object ReadyLabel: TNewStaticText
      end
      ...
    end
    object MainPanel: TPanel
      object WizardSmallBitmapImage: TBitmapImage
      object PageDescriptionLabel: TNewStaticText
      object PageNameLabel: TNewStaticText
    end
  end
end

Note how the "Welcome" page is on a different level of the hierarchy than the "Ready" page.

For full details, see Wizard.dfm.


To do what you ask for, in the InitializeWizard event function:

  • Create copy of the WizardBitmapImage on the ReadyPage;
  • Shrink the ReadyMemo and ReadyLabel accordingly (use WelcomeLabel2.Left and .Width as a guide).

When the user proceeds to the "Ready" page, in the CurPageChanged event function (with CurPageID = wpReady).

  • Hide the MainPanel (probably also Bevel1);
  • Resize the InnerPage to stretch over the space left by the MainPanel. You can probably just make it as large as its parent InnerPage is.

(And undo this if the user presses "Back").