Article explains how to use standard style elements to customize LookAndFeel of own GUI elements.
Target goal: use style elements from standard GUI objects, in our own GUI
Example code: FMX application, Main form, custom GUI in Frame. The TSpeedButton style element 'background' is used for highlighting the mouse hover and mouse press events. The standard speed button style have 'background' element, implemented by TStyleButtonObject. First, we got to find it in default application style, and create a copy, owned and parented by our custom GUI. This is done in custom ApplyStyleLookup handler. For simplicity, a TPanel is dropped on frame. As soon as it's styled control, it have corresponding handler defined.
In that handler we perform 'style.substyle' lookup in global default style manager context. As soon as we find what we are looking for, we got to Clone style element, owning it, and assigning its Parent property to our panel. Do not forget to make sure the style element do not consume any mouse events by setting its HitTest := true.
The standard TStyleButtonObject defines several animation effects to reflect the mouse-to-button interaction. We're interested in Hot (AKA MouseOver) and Pressed. Now, for the tricky part. Let our TPanel handle mouse events. Inside these events we got to track panel state, i.e., is it pressed, or just higlighted, and toggle standard animation triggers defined for TSpeedButton's background, by calling:
Where state is the name of the standard button state trigger, which is known to TStyleButtonObject, like 'IsPressed' or 'IsMouseOver'. This call does the following. It checks if the object, we pass as the first parameter, has the RTTI-accessible property of the same name, as the trigger name, and launches corresponding forward or inverse animation, depending on property value, if it exists. As soon as we pass Self to the call, i.e. Frame instance reference, to make it all work, we have to define two read-only boolean properties in our Frame, IsPressed, and IsMouseOver. The values of these proprties got tracked in mouse event handlers of the Panel, and background style element later access them via RTTI automatically.
Sample project for Embarcadero RAD Studio Delphi XE8 Upd.1
Sample project for Embarcadero RAD Studio C++ Builder XE8 Upd.1