How to Add Custom Colors and Properties to Skins
- 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.