Updated: Dec 16, 2023
Follow on twitter

Description of standard sections

Below is a list of standard sections in alphabetical order with brief descriptions. However, since all sections support the same properties, for a control in the program may be selected another section and it will have the appearance corresponding to this section. This approach is often used for creating of unique design specially developed for a specific project. For example, you can specify many different kinds of panels and buttons in the skin and apply them in the development of the program (the property SkinData.SkinSection in the control).

ALPHACOMBOBOX
Alternative section for the ComboBox control with specials effects such as transparency, gradient, and others (see section COMBOBOX).
ALPHAEDIT
Alternative section for the ComboBox control with specials effects such as transparency, gradient, and others (see section EDIT).
Note: not all edit controls can support these effects.
BAR
The main section for the FrameBar component, also used in the button box in the "file open" and "folders selection" dialogs.
BARPANEL
Defines the view of panel in the FrameBar component.
BARTITLE
Button-header of the FrameBar component. There are four control states which can be drawn in MasterBitmap (normal, active, pressed, open bar). The StateCount parameter of corresponding section should be set to a value in corresponding to number of possible states.
BUTTON
Main view of buttons (TsButton, TsBitBtn). Usually has a visible border in each state of the control.
BUTTON_HUGE
Additional section for defining of view for large round buttons. Usually it's a round button with 64x64 px size.
CHECKBOX
Section should not have borders and should be completely transparent in all states. This section used in CheckBoxs and RadioButtons usually, but in the program this section may be used in other controls which should not have a border and fully transparent.
COMBOBOX
Main section for ComboBox control. The skin editor have additional tab for this section, where may be defined an image of arrow. Additionally, may be defined the COMBOBTN section for drawing of the button image.
DIALOG
Section defines a look of dialogs. May be just copied from the FORM section in the "Manual edit" tab (if dialogs have same look as forms).
DIVIDER
Separator of buttons in ToolBar, used as a separator of panels in StatusBar also. It's recommended to leave it transparent and set an image in the BordersMask property only.
DRAGBAR
Section defines a look of the window title in calendars and other similar elements.
EDIT
The main section for edit controls. Note: not all edit controls can support of transparency or drawing on the background, it should be considered in the development of this section.
EXTRALINE
Additional left vertical line in popup menus.
FORM
A main section in forms drawing. Only two states may be considered in a forms rendering - normal and active. If count of states is defined to one only, then form will be redrawn quickly when it is activated or deactivated (if disabled Extended Borders).
FORMTITLE
A title of forms and dialogs, only first two states are considered in drawing of windows. This element can be completely transparent in some skins, an example - the WLM skin.
GAUGE
Main section for Gauge and ProgressBar components. Image of progress bar should be defined in the PROGRESSH and PROGRESSV sections.
GROUPBOX
This section defines a look of the GroupBox component. Usually is transparent completely with a thin border.
HINT
Section defines a look of hint window. Transparent areas in the corners (if needed) defined as Fuchsia color in the image. If transparency of background is 100%, the entire look of hints will be fully depended from BORDERSMASK (an example in the MetroUI skin).
MAINMENU
The main section for popup menus. Transparent areas in the corners are defined as Fuchsia color in the image.
MENUITEM
Contains a description of single menu item look. It's completely transparent in normal state usually, and only applies to the active state which occurs when you move the mouse over an item. For a drawing of borders in active state only use the "Active only" checkbox in the border selection dialog.
MENULINE
Line of MainMenu, it's completely transparent usually, but not always. An example of an opaque menu - skin Acryl.
PAGECONTROL
Main section for the PageControl component.
RIBBONPAGE
Same as PAGECONTROL, but be aware that component which uses this section will be placed at the top of form usually.
PAGECONTROLLEFT
Same as PAGECONTROL, but with left positioning of tabs.
PAGECONTROLRIGHT
Same as PAGECONTROL, but with right positioning of tabs.
PAGECONTROLBOTTOM
Same as PAGECONTROL, but with bottom positioning of tabs.
PANEL
Image of a raised panel (a default look). May be used in other controls often, such as ToolBar.
PANEL_LOW
Image of a lowered panel. Used in ScrollBoxes also usually.
PROGRESSH
Image of the progress line in horizontal Gauge and ProgressBar components. With using of the "Effects region" property may be defined a mask for the animation effect (example in Alluminium), but you can leave this field blank, region for animation will have default kind in this case.
PROGRESSV
Same as PROGRESSH, but used in components which are positioned vertically.
RADIOBUTTON
Section is obsolete and may be removed from skins in the future (duplicated by "CHECKBOX" section).
SCROLLBAR1H
A left part of horizontal scroll bar (to the left of slider). This is a background for the slider and for the left arrow button.
SCROLLBAR1V
A top part of vertical scroll bar (to the top of slider). This is a background for the slider and for the top arrow button.
SCROLLBAR2H
A right part of horizontal scroll bar (to the right of slider). This is a background for the slider and for the right arrow button.
SCROLLBAR2V
A bottom part of vertical scroll bar (to the bottom of slider). This is a background for the slider and for the bottom arrow button.
SCROLLBTNBOTTOM
Bottom button of a vertical scrollbar. Scrollbar buttons have the "Glyphs" extra tab, where you can set the arrow corresponding to these buttons. These images of arrows used in some other controls also.
SCROLLBTNLEFT
Left button of a horizontal scrollbar.
SCROLLBTNRIGHT
Right button of a horizontal scrollbar.
SCROLLBTNTOP
Top button of a vertical scrollbar.
SCROLLSLIDERH
Slider of a horizontal scrollbar.
SCROLLSLIDERV
Slider of a vertical scrollbar.
SPEEDBUTTON
The main look of buttons that do not take the focus (TsSpeedButton). Usually has a visible frame in each state of the control.
SPEEDBUTTON_SMALL
A look of buttons that do not take the focus and have a small size. Additional small buttons with a small radius of corners are necessary in some skins. These buttons are used in calculators and some other components.
SPLITTER
This section has the additional "Glyphs" tab, where may be added an image for drawing in center of the splitter. Look of splitter may be similar to SPEEDBUTTON_SMALL (may be just copied using the "Manual edit" tab).
STATUSBAR
Section defines a look of the status bar at the bottom of forms. Divider of panels may be defined in the "DIVIDER" section. The area for a capturing by mouse (at the bottom right) may be defined in the "General skin options / Controls glyphs" page of the skin editor.
TABBOTTOM
Look of tabs that positioned at the bottom of TabControl and PageControl components.
TABLEFT
Look of tabs that positioned at the left of TabControl and PageControl components.
TABRIGHT
Look of tabs that positioned at the right of TabControl and PageControl components.
TABTOP
Look of tabs that positioned at the top of TabControl and PageControl components.
RIBBONTAB
Look of tabs that used in PageControl with the "RIBBONPAGE" section.
TOOLBAR
This section describes a toolbar (a panel with buttons located on it). A toolbar is located at the top of forms usually.
TOOLBUTTON
Same buttons as SPEEDBUTTON, but completely transparent in the normal state usually. Used as flat buttons on toolbars. For a drawing of border in active state only you should set the "Active only" checkbox in the dialog of a borders selection.
TRACKBAR
The section contains all information required for drawing of TrackBars. The main part is completely transparent usually. The additional "TrackBar data" tab is available where may be defined all elements of the component as separate images.
UPDOWNBTN
This section used for a drawing of updown buttons. Also used in drawing of scroll buttons placed on the PageControl component, when many tabs exists. The arrow keys are taken from ScrollBars buttons sections.
WEBBUTTON
Button with automatically underlined text when mouse is hovered on it. This section has not borders usually and fully transparent.

The following are additional sections. These skins are optional, they are not necessarily but can improve the appearance of some elements :


BUTTON_BIG
Additional section for large buttons.
COLHEADER
Section defines a look of column title (in HeaderControl, ListView, some grids and other components). If this section not exist then "BUTTON" section used as replacement.
COLHEADERL COLHEADERR
Left and right columns titles of the TsHeaderControl component. These two sections can be used if left and right columns titles of this component must be different.
COMBOBTN
The button for the ComboBox. If this section not exists then icon specified in the Glyphs tab of the "COMBOBOX" section will be drawn.
CAPTION
Section used for drawing of a back panel for caption in a form title. Example can be seen in the skin HeroesStyle.
DIALOGTITLE
Section defines a look of titles in dialogs. If this section not exist then the "FORMTITLE" section will be used as replacement.
DIVIDERV
Separator for popup menu items and for vertical ToolBar component.
ICOLINE
Vertical panel, which drawn under icons in popup menus.
GRIPH
Defines a look of grip in a horizontal CoolBar and similar components. If this section is missing then "PROGRESSH" section will be used as replacement.
GRIPV
Section specifies an image of grip for vertical CoolBar. If section not exist then "GRIPH" section used.
MENUCAPTION
Section for drawing of caption of menu items group in popup menus. If section not specified then the "TOOLBAR" section will be used.
MENUBTN
Used for drawing of menu button in the TsPageControl component, when the TabType property is ttMenu (Ribbon menu style).
MDIAREA
Workspace of MDI window. If a section is not specified then the "PANEL_LOW" section used.
SELECTION
Section specifies a look selected item in such elements as TsListBox, TsTreeView, TsComboBox and others. Active state for this section used when component is focused. If a section is not specified then used the MENUITEM section.


All primary sections are added automatically when skin is created in the skin editor. Additional sections may be added by developer if needed. They may be selected in the drop down list which appears after clicking on the "Create new" button.



Installing, using and licensing the demo programs © Sergii Goncharov, Ukraine, Odessa 2004-2023