How to Customize TAdvOfficeButtons for Modern UI

To customize TAdvOfficeCheckBox and TAdvOfficeRadioButton (part of the TMS TAdvOfficeButtons suite in the TMS VCL UI Pack) for a flat, modern, minimalist user interface, you must look past their traditional 3D Office ⁄₂₀₁₀ aesthetics.

Because these components draw their checkmarks, radio circles, and states using embedded resource graphics, standard color property modifications are limited. To achieve a modern UI style—such as a simple border with an accent color fill—use the following approaches. 1. Global Customization via UIStyle & tsCustom

Modern UI design favors flat shapes, high contrast, and clean borders over multi-shaded gradients. By default, these controls inherit gradients from a global styler.

Set the control’s UIStyle property to tsCustom. This detaches the control from older Office templates (like Office 2003 or 2007) and allows you to manually override colors. Property Mapping for a Modern Look:

BorderColor: Choose a neutral dark or mid-gray color (e.g., clGrayText or a custom hexadecimal gray like $007A7A7A).

Color: Set to clWhite for a clean, flat interior background.

ColorTo: Match this exactly to the Color property (clWhite) to strip away the glossy gradient and achieve a solid flat look.

Hot & Focused States: Customize properties prefixed with Hot or Focused (such as ColorHot or BorderColorFocused) using a single brand accent color (e.g., a vibrant blue or teal) rather than a multi-colored shine. 2. Overriding the Resource Files (The Image Approach)

For total control over the exact shapes (such as changing the radio button inner dot size or creating a flat checkbox tick mark), modify the component’s internal glyph resources.

Locate the file AdvOfficeButtons.res inside your TMS VCL UI Pack installation directory.

Open this resource file using a resource editor tool (such as Resource Hacker or the built-in image editor in RAD Studio).

Replace the legacy bitmaps representing the checked, unchecked, hover, and disabled states with flat, crisp graphics that match your modern UI system.

Recompile your project or the component package to apply the new default graphics. 3. App-Wide Modern Theme Injection

Instead of editing components one by one, manage your modern aesthetic globally using TMS styler components.

Drop a TAdvFormStyler on your form, or a TAdvAppStyler on a central data module.

Change the Style property to a flatter, newer preset such as tsOffice2019White, tsOffice2019Gray, or tsWindows10. These presets automatically strip away legacy gradients and apply narrow, flat borders and modern typography across all connected TMS controls. 4. Modern UX Best Practices for Layout

When styling your buttons, ensure the layout reflects modern interface guidelines: