Updated: 13.02.2018
Rus Follow on twitter

Adding skins to existing project

Two main ways exists for adding skins:

  1. Using of standard components, controlled by the TsSkinManager component
  2. Replacement of standard controls by analogs from the AlphaControls package

1. Using of standard components

This way is more easier in most cases and allows to see a result after few minutes of work. Therefore, we first consider it. For a sample will be used an existing demo-program from Demos directory in BDS2005. Sources of this demo may be downloaded there.

After first compiling of this project we will receive a window where form and all controls have standard looking.

All we need now is to place the TsSkinManager component on the form and configure it:

  1. Put the component on a form and add one of the skins to the InternalSkins property. How this is done can be learned on the "First application with skins" page. I have added the "AlterMetro" skin.
  2. Choose this skin in the SkinName property, the Active property should be True. Also, we can enable the ExtendedBorders property, form will have a beautiful shadow in this case.
  3. Click on the ThirdParty property, the property editor will be opened with accepted AlterMetro skin. This means that component was configured correctly. At the left of dialog window we will see a list of controls types which will be supported at run-time. After first opening only TButton will be shown there (standard button). This means that after start of application will be skinned the form and buttons with TButton type only.
    We can close the dialog, run the program and see a new looking which have this form in run-time now. We will see a beautiful skinned window, but all components will have standard looking still. This is due to the fact that needed types has not been added to the support list. TButton is added only, but we have not such buttons on the form, only TBitBtns are placed there.
  4. Let's try to add support of the TBitBtn. To do this, go back to the design-time and reopen the ThirdParty property editor. Press the "New" button, in the opened dialog should be defined the "TBitBtn" type and rule of skinning ("Button"). Press "Ok" button.
  5. Close the property editor and run application again. Now, we can see that all buttons are painted in accordance with the selected skin.
  6. It's long and lazy to add all types by this way. Therefore we can use a predefined list of supported types, located at the right of the ThirdParty property editor. Go to the "Packages" list and select the "Standard VCL" item. List of standard controls, supported in the package, will be filled. Just press the big "<<" button at the center of dialog and all marked types will be copied to the list of types which should be skinned.
  7. That's all! Let's run application again and look what we have now. Compiled application with sources may be downloaded there. All standard controls and standard dialogs even are painted in accordance with the selected skin.

  8. Since we have added the AlterMetro skin to the InternalSkins property, it is now integrated into Exe and always available for loading when Exe transfered to other machines.

Pros and cons of this way using in comparison to the using of components from the package:

  • The main advantage of the first way using is a rate of ready project converting. Support of skins may be added in a few minutes and appearance of application will be completely changed.
  • The downside of this approach is slower rendering of components. Analogs of standard components contained in the package, fully inherit the default behavior, but are optimized for faster work with skins.
  • Support of standard components is more complicated technically, which may be critical for very large projects.
  • Components from the package have a lot of additional properties and possibilities. For example, all edit controls have the BoundLabel property. This label is "sticked" to control and moved together with control if it changes its position. Buttons have such properties as "Reflected", "Blend" and others. Also, all controls have the SkinData property, which allows to change a rule of component drawing, configure own colors and specify SkinManager component for the component. All additional properties and possibilities of components from the AlphaControls package will be described in separate article.
2. Replacement of standard controls by analogs from the AlphaControls package

So, we have ready and working project with skins already. Now, standard components may be replaced on their analogs from the package. For beginning, let's replace TBitBtn on TsBitBtn, to understand the principle:

  1. Open the form in design-time and press Alt+F12 or click by right mouse button on the form and choose then "View as text" menu item. We can change Dfm-file in the opened edit window.
  2. Use the "Replace" dialog for a fast replacement. There we can specify that "TBitBtn" should be changed to "TsBitBtn" and press "Ok". Press Alt+F12 again and go back to the visual representation of form. We can make sure that all buttons are replaced by TsBitBtn.
  3. Save the form. Delphi IDE will display a message that Pas-file contains a declaration of TBitBtn still and offer to correct it. Press "Yes" and Delphi will change all declarations of TBitBtn to TsBitBtn automatically. We can see, that all TBitBtn controls are replaced by TsBitBtn now.

Of course, if we are going to change each type in the project by this method, it will take quite a long time. Special automated tools for a replacement of types in the project are exist. One of the best tools is the GExperts. Also the AlphaConvert utility is available, which designed specially for replacemnt of standard controls by AlphaControls analogs. Also, backward converting to standard controls is allowed there. Consider the program in more detail and try to use it to replace other components in the sample project:

  1. For a work of converter is required save all Dfm files as text. In our test project click on the form by right mouse button and look the "Text Dfm" menu item (should be True). Close the project.

    Make sure that backup of the project is saved.
  2. Download a package with utility, unpack it to any directory and run Alphaconvert.exe. If "Skip this greeting..." is checked, then first window will not be shown at the next time. Press "Next" button.
  3. In the File Open dialog, hold down the Ctrl or Shift key and select forms which should be converted. Only one Main form exist in the our sample. Next converter page will be opened after dialog closing. There we should choose the "Standard to AC" item and select required types which should be converted. All possible types are marked by definition. Press "Next" button.
  4. Now, all modified forms should be opened and re-saved in Delphi again (the "Save" button may be disabled, you need to change something on the form and it will be enabled in this case). Delphi propose to update the types of components as we did when we converted TBitBtn to TsBitBtn. Agree and press "Enter". In the design-time we can see that components are changed already. Run the application.

    That's all! Perhaps in large projects additional changes in code may be required, in areas where the types of components are not changed automatically. Ready project may be downloaded there.

    Now we can open the ThirdParty property and remove all types from list except TButton. This type of button used in some Delphi dialogs.

Some buttons have blue text in standard example. Also blue and red labels exist there. All colors are received from current skin now, but we can change it and in these controls will be used custom font colors defined in the standard Font.Color property. To do this, open the buttons SkinData.CustomFont property and change it to True. Also, we need to change the labels UseSkinColor property to False.

When appliction is started under Windows Vista or newer, we can see that animation is not very smooth. It is because skin is initialized after the start of animation by system. To avoid this, it is needed to place the TsSkinProvider component to the form. This component will initialize the skin on the form before it is shown. Animation may be configured in the TsSkinManager.AnimEffects property. TsSkinProvider also contains a set of other settings that can be useful. More about them can be learned on the TsSkinProvider page.

Support of skins is added to the program and everything works as it should, but the package has many other features which will be discussed in future articles.