Using IDE Styles in Third-Party Plugins

From RAD Studio
Jump to: navigation, search

Go Up to Extending the IDE Using the Tools API


The IDE uses VCL styles for its look and feel. Third-party plugins provide windows such as dockable windows and dialogs that should match the IDE styling. As well as following the theme, some specific controls such as TGroupBox have style hooks to ensure they render with a different look than usual, and your windows should follow this too.

General Information

The IDE provides the IOTAIDEThemingServices API that allows you to check if theming is enabled.

Get the IDE and editor theme names, apply the IDE theme to your form or controls, and register your form for style hooks for special IDE behavior.

This interface also allows you to access the IDE StyleServices. The IDE maintains its style services object representing the IDE style.

Access this interface using BorlandIDEServices: 

var 
ThemingServices : IOTAIDEThemingServices;

if Supports (BorlandIDEServices, IOTAIDEThemingServices, ThemingServices) then...

Registering your Form for IDE Look and Feel

In your plugin initialization or your form’s constructor, call IOTAIDEThemingServices.RegisterFormClass with the class of your form, that is, the form type. You only need to do this once to apply the style hooks to your form. You do not need to unregister it. Once you do this, the TGroupBox draws without a frame, but with a larger caption font and a single line at the top, the same way group boxes do in the Options dialog.

For each instance of your form, call IOTAIDEThemingServices.ApplyTheme. This applies the IDE style to your form. Also, do this when the IDE style changes, to update your form and controls to match. See below for information on detecting when the IDE style changes.

Detecting Style Changes

Register a notifier to detect when the IDE theme or editor theme changes.

  • For the general IDE theme, use IOTAIDEThemingServices.AddNotifier.
  • For editor colour scheme changes, use IOTAIDEThemingServices.AddEditorColorNotifier.

Both notifier interfaces have two methods that are called, a Changing variant (eg, IOTAEditorColorSpeedSetting.EditorColorChanging) that is called before the theme changes, and a Changed variant (eg INTAIDEThemingServicesNotifier.ChangedTheme) called after the theme changed.

Normally, you would only register a notifier for the general IDE theme change, unless you need to be notified of editor colour settings.

In your implementation of the INTAIDEThemingServicesNotifier.ChangedTheme method, call IOTAIDEThemingServices.ApplyTheme for your form. This updates your form and controls to the new style. It also updates any custom colors or custom drawing used by your form to use the new colors.

Style Guide

The IDE has a common look and feel for many dialogs, where there is a tinted panel at the bottom of the form containing the OK, Cancel, and other buttons, and the rest of the form is the window color.

The best way to implement this is via two panels, one bottom-aligned to contain buttons, and the other client-aligned to contain the rest of the dialog contents. For each panel, apply the following:

  1. Set ParentBackground to false
  2. Remove seClient from StyleElements
  3. Set the Color to clWindow for the content panel, and clBtnFace for the button panel. If required, you can get the theme value for each system color via IOTAIDEThemingServices.StyleServices.GetSystemColor.

At 100% scaling, a typical button panel is 49 pixels high. Buttons are indented 20 pixels from the right, sized at 75x25 by default, and placed with a Top of 12. This gives a 12 pixels margin below the button.

In a TGroupBox, make the Top of your highest control 26 pixels at minimum. This gives room for larger captions.

The IDE indicates relationships between controls and data via indentation.

A setting or control that depends on another control (for example, modifies a setting’s behavior, or is only enabled if a setting is set to a specific value) is placed underneath that setting, indented 16 pixels. This indentation allows the content to line-up with the start of the RadioButton or CheckBox caption; if under another control, such as a TComboBox, it is consistent with other indentation.

The IDE layout is based on a 4x4 pixel grid. Almost all UI elements height are a multiple of 4 pixels. For example, the height of a tree or listview row is 20 pixels.

See Also

Retrieved from "https://docwiki.embarcadero.com/RADStudio/Alexandria/e/index.php?title=Using_IDE_Styles_in_Third-Party_Plugins&oldid=274882"