Filling with image

Question

I am using the following code to add a background image,

function Page1_Create: TWizardPage;
var
    Page1: TWizardPage;
    // Fonts
    // Pictures
    PictureBox2_PictureName: String;

    // Controls
    PictureBox2: TBitmapImage;

begin
    // This is a page creator Function. You can use the Result of it to access the controls on this Page.
    Page1 := CreateCustomPage(wpWelcome, 'Title', 'Subtitle');

    { PictureBox2 (TBitmapImage) }
    PictureBox2 := TBitmapImage.Create(Page1);
    PictureBox2.Parent := Page1.Surface;
    PictureBox2.Enabled := True;
    PictureBox2.Visible := True;
    PictureBox2.Left := ScaleX(0);
    PictureBox2.Top := ScaleY(0);
    PictureBox2.Width := ScaleX(513);
    PictureBox2.Height := ScaleY(302);
    PictureBox2.Anchors := [akLeft, akTop, akRight, akBottom];
    PictureBox2.Stretch := True;
    PictureBox2_PictureName := ExpandConstant('{tmp}\purple-skin.bmp');
    ExtractTemporaryFile(ExtractFileName(PictureBox2_PictureName));
    PictureBox2.Bitmap.LoadFromFile(PictureBox2_PictureName);

    // Result is the newly created Page (TWizardPage).
    Result := Page1;
end;

procedure InitializeWizard;
begin
  PageWelcome_Create()
end;

But this does not fill the entire background. It fills like as shown by the image below,

How to fill the entire background?

Also, how to add images to the Title section (fill the entire title bar) at top and command button section (fill the entire bottom bar) at bottom?

score 1 · Answer 1 · answered May 08 '22 at 05:30

TLDR: Your code is correct, simply repeat it for each page and the title and bottom part of the form + adjust the controls positions and dimensions (posting whole code is beyond the SO, it would be hundreds of lines of code).

Detailed answer:

Filling the entire background is quite tricky. The setup form consists of several "layers" of components placed on it.

There is no such thing as "background", there is a WizardForm: TWizardForm containing OuterNotebook: TNewNotebook which contains InnerNotebook: TNewNotebook which represents the individual pages of the installer, see https://github.com/jrsoftware/issrc/blob/main/Projects/Wizard.dfm for details.

So you need to create several images: first for title section, second for all setup pages (I assume all pages have the same dimensions) and third for bottom section.

Each control has its own handle and custom position (relative to its parent so you need to play with updating control's Left and Top position) and also there is some "space" around the controls which can be minimized by adjusting the WIdth and Height of the control. Then load these images and show them in some control e.g. TBitmapImage as you did. Also do not forget to handle the page refreshing.

This require a lot of work in vanilla Inno Setup. As this question is quite often I have developed a 3rd party extension specially designed for this purpose.

It is called Graphical Installer: http://www.graphical-installer.com

Please try it (it is commercial but costs only few bucks and save you hundreds of hours of work) and let me know whether it suits your needs.

Filling with image

1 Answers1