Personalizing Your Experience: Tailoring Installation Interfaces with Custom Frame Design

Table of Contents

• Introduction
• Registration
• Using Advanced Installer
  • GUI
  • Working with Projects
  • Installer Project
    * Product Information
    * Resources
    * Package Definition
    * Requirements
    * User Interface
    * Themes
    * Theme Settings Tab
    * Images Tab
    * Image Options Dialog - Installer Project
    * Dialog frame customization
    * Custom frame customization
    * Text Style Tab
    * Dialogs
    * Slideshow
    * Translations
    * System Changes
    * Server
    * Custom Behavior
  • Patch Project
  • Merge Module Project
  • Updates Configuration Project
  • Windows Store App Project
  • Modification Package Project
  • Optional Package Project
  • Windows Mobile CAB Projects
  • Visual Studio Extension Project
  • Software Installer Wizards - Advanced Installer
  • Visual Studio integration
  • Alternative to AdminStudio/Wise
  • Replace Wise
  • Migrating from Visual Studio Installer
  • Keyboard Shortcuts
  • Shell Integration
  • Command Line
  • Advanced Installer PowerShell Automation Interfaces
• Features and Functionality
• Tutorials
• Samples
• How-tos
• FAQs
• Windows Installer
• Deployment Technologies
• IT Pro
• MSIX
• Video Tutorials
• Advanced Installer Blog
• Table of Contents

Disclaimer: This post includes affiliate links

If you click on a link and make a purchase, I may receive a commission at no extra cost to you.

Installation user interface frame customization

The following article uses options that are available starting with the Enterprise edition and project type.

The frame is split into parts, and each part has a predefined property and image associated with it. To customize images go to Images tab and edit the image. The parts of a frame are:

• AI_CF_SysCloseDown - system close button when is pressed
• AI_CF_SysCloseHot - system close button when the mouse is over it
• AI_CF_SysCloseNormal - system close button
• AI_CF_SysCloseInactive - system close button when the application is inactive
• AI_CF_SysMinDown - system minimize button when is pressed
• AI_CF_SysMinHot - system minimize button when the mouse is over it
• AI_CF_SysMinNormal - system minimize button
• AI_CF_SysMinInactive - system minimize button when the application is inactive
• AI_CF_FrameTopLeft - top left corner frame
• AI_CF_FrameTopLeftInactive - top left corner frames when the application is inactive
• AI_CF_FrameTopMid - top middle frame
• AI_CF_FrameTopMidInactive - top middle when the application is inactive frame
• AI_CF_FrameCaption - caption area frame
• AI_CF_FrameCaptionInactive - caption area when the application is inactive frame
• AI_CF_FrameTopRight - top right corner frame
• AI_CF_FrameTopRightInactive - top right corner when the application is inactive frame
• AI_CF_FrameLeft - left frame margin
• AI_CF_FrameLeftInactive - left margin when the application is inactive frame
• AI_CF_FrameRight - right frame margin
• AI_CF_FrameRightInactive - right frame margin when the application is inactive
• AI_CF_FrameBottomLeft - bottom left frame corner
• AI_CF_FrameBottomLeftInactive - bottom left frame corner when the application is inactive
• AI_CF_FrameBottomMid - bottom middle frame
• AI_CF_FrameBottomMidInactive - bottom middle frame when the application is inactive
• AI_CF_FrameBottomRight - bottom right corner frame
• AI_CF_FrameBottomRightInactive - bottom right frame corner when the application is inactive

The image format is bitmap. RGB(255, 0, 255) color is considered as transparent color.

Customizing a dialog window

To change the text style of the dialog title go to Text Styles tab and associate the text style with “AI_CF_TITLE_TEXT_STYLE” property.

To modify the spacing between the system menu buttons set the property “AI_CF_SYS_BTNS_SPACING”. The value must be a number between 0 and 25 and represents pixels.

To customize the Y-pos of the system menu buttons set the “AI_CF_SYS_BTNS_YPOS” property. The value must be a number between 0 and 30. This number is considered a percent of the frame height.

To set this types of properties go to Custom Actions page and sequence a “Set installer property” custom action before “Wizard Dialogs Stage > Searches”.

To customize the frame of a dialog, follow these steps:

1. Add the frame images by going to Themes > Images > New…
2. Set the Property name to the part you want to change (e.g., AI_CF_TemplateFrameBottomMid, AI_CF_TemplateFrameBottomMidInactive). The name of the property is formed from the unique identifier “Template” and the frame part you want to change.
3. Go to Table Editor > Property
4. Add the name of the dialog you want to change (e.g., AI_CF_CancelDlg, AI_CF_PrepareDlg) in the Table Editor and set its value to the unique identifier we want to apply to the dialog. In our example, we used Template, meaning both the AI_CF_FrameBottomMid and AI_CF_FrameBottomMidInactive of the AI_CF_CancelDlg and AI_CF_PrepareDlg will be changed to the new images we provided.

Example

AI_CF_CancelDlg | Template
……………………………………………………………..
AI_CF_PrepareDlg | Template
……………………………………………………………..

Copy

Did you find this page useful?

Please give it a rating:

Thanks!

Report a problem on this page

Information is incorrect or missing

Information is unclear or confusing

Something else

Can you tell us what’s wrong?

Send message

Also read: