How to Add Custom Elements to Skins

• Sep 28, 2023
• 2 minutes to read

Skins are shipped with the pre-defined (default) elements, properties, and colors. You are free to change them, or add custom elements via the Skin Editor, or programmatically.

This topic describes how you can add custom elements to skins, and access these elements in code. Refer to the How to Add Custom Colors and Properties to Skins help topic, to learn more.

In skins, elements are divided into groups according to target products, common use, etc. To add custom elements to a group via the Skin Editor, select the group or one of its elements, and click the Add Element toolbar button or the Project | Add Element menu item.

This will open a window prompting you for a unique element name. To add the element to all skins within a project, check a corresponding option in this window.

To delete skin elements, select the desired skin element, and click the Delete Element toolbar button or the Project | Delete Element menu item.

In code, you can use the following product group methods to perform the same tasks.

Objective	Method
Adding skin elements	AddElement AddElementEx
Accessing skin elements	Elements GetElementByName
Deleting skin elements	Delete RemoveElement

The following code example demonstrates how to manage custom skin elements.

uses
  ..., cxLookAndFeels, dxSkinInfo, cxLookAndFeelPainters;
var
  APainter: TcxCustomLookAndFeelPainter;
  ASkinInfo: TdxSkinInfo;
  ASkin: TdxSkin;
  AFormGroup: TdxSkinControlGroup;
  AFormLogo, AFormLegacyLogo: TdxSkinElement;
begin
  // Getting a painter that corresponds to the MySkin_MoneyTwins1 skin
  if cxLookAndFeelPaintersManager.GetPainter('MySkin_MoneyTwins1', APainter) then
  begin
    // Getting a painter's skin data
    APainter.GetPainterData(ASkinInfo);
    ASkin := ASkinInfo.Skin;
    // Getting the Form product group
    AFormGroup := ASkin.GetGroupByName('Form');
    // Adding a Form.FormLogo skin element
    AFormLogo := AFormGroup.AddElement('FormLogo');
    // Getting the Form.FormLegacyLogo element
    AFormLegacyLogo := AFormGroup.GetElementByName('FormLegacyLogo');
    if AFormLegacyLogo <> nil then
    begin
      // Assigning Form.FormLogo element properties from the Form.FormLegacyLogo element
      AFormLogo.Assign(AFormLegacyLogo);
      AFormGroup.RemoveElement(AFormLegacyLogo);
    end;
  end;
end;

After this, you can use the Form.FormLogo skin element when implementing new appearance options, in control painters built with the Skin Editor.