How to Add Custom Colors and Properties to Skins

• Dec 06, 2024
• 3 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 colors and properties (also called skin members) to skins, and access these elements in code. Refer to the How to Add Custom Elements to Skins help topic, to learn more.

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

To add custom colors and properties to a skin via the Skin Editor, click the Add button in:

• A corresponding tab in the Additional properties pane to add a skin member to the entire skin or to the currently selected product group.

• The Additional tab of a skin element‘s properties window to add a skin member to the currently selected skin element.

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

To delete colors and properties (including the default ones), select the desired property or color and click the Delete button.

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

Objective	Method	Applies To
Adding skin members	AddColor AddProperty	Skin Skin, product group, or skin element
Accessing skin members	GetColorByName GetPropertyByName	Skin Skin, product group, or skin element
Deleting skin members	DeleteProperty	Skin, product group, or skin element

The following code example demonstrates how to add new skin members (Common.PreviewTextColor and Form.FormCaption.TextShadowOffset) based on the default selection color and the FontDelta property.

uses
  ..., cxLookAndFeels, dxSkinInfo, cxLookAndFeelPainters;
var
  APainter: TcxCustomLookAndFeelPainter;
  ASkinInfo: TdxSkinInfo;
  ASkin: TdxSkin;
  AFormGroup: TdxSkinControlGroup;
  ACommonSelectionColor: TColor;
  ANewSkinProperty: TdxSkinIntegerProperty;
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 Common.SelectionColor value
    ACommonSelectionColor := ASkin.GetColorByName('SelectionColor').Value;
    // Adding the Common.PreviewTextColor color
    ASkin.AddColor('PreviewTextColor', ACommonSelectionColor);
    // Getting the Form.FormCaption skin element
    AFormGroup := ASkin.GetGroupByName('Form');
    with AFormGroup.GetElementByName('FormCaption') do
    begin
      // Creating the Form.FormCaption.TextShadowOffset property to store integer values
      ANewSkinProperty :=
        TdxSkinIntegerProperty(AddProperty('TextShadowOffset', TdxSkinIntegerProperty));
      // Assigning the property value based on the Form.FormCaption.FontDelta property value
      ANewSkinProperty.Value :=
        TdxSkinIntegerProperty(GetPropertyByName('FontDelta')).Value + 1;
    end;
  end;
end;

After this, you can use the Common.PreviewTextColor and Form.FormCaption.TextShadowOffset skin members when implementing new appearance options, in control painters built with the Skin Editor.