Raize Software recently released Raize VCL Styles, a collection of modern, high-quality interchangeable styles supporting light and dark themes in seven color variations. The set includes the hand-crafted and completely custom Raize Frost style and its companion, Raize Graphite. Both styles feature design-compatible user interface elements in light and dark themes, respectively. Plus, both styles and all color variations are optimized for High-DPI support in RAD Studio Delphi and C++Builder. Additional details and screenshots can be found at https://raize.com/raize-vcl-styles.
My adventure into writing custom VCL styles began with a simple objective–to update the user interface of the CodeSite Tools. In particular, adding support for light and dark themes, and to make sure they look good in High DPI. Little did I know just what a complicated, tedious, and frustrating process that was going to be. It wasn’t until much later in the process, after several iterations, that I decided that the styles would probably be valuable to others. And now that the styles are completed and the collection released, I thought it would be interesting to share what I learned along the way.
Building a truly custom VCL style is a complicated and tedious process. Sure, you can take an existing style image and customize the colors, but if you want to do anything more than that, such as change the shapes of buttons, then you really need to be able to create your own source images.
Organizing your graphic assets is important. Especially as you are working through a design and need to make tweeks. Unfortunately, all of the source images in the VCL styles that ship with RAD Studio are, quite frankly, poorly organized. Most of the time graphic assets that are related are grouped together, but there are many instances where assets are spread across the entire source image. And there is no consistency between styles. This makes it harder to visually see and compare related graphic elements. One of the key steps that I do in laying out the graphic assets is to put them in the same order that they show up in the Bitmap Style Designer. This makes it much easier to select the appropriate assets within the Bitmap Style Designer. I’ll have more to say about the Bitmap Style Designer a little later.
Although the graphic assets in a VCL style are PNG based images, designing graphics assets using vectors is crucial. Especially when you are working through how you want a particular design to look. For example, recoloring a vector graphic is much easier than trying to recolor a PNG image with alpha-blending. With that said, Adobe Illustrator does a really poor job of exporting a vector circle into a PNG image, while Adobe Photoshop does a great job. Unfortunately, it is much easier to design vector designs in Illustrator. Fortunately, there is a way to link an Illustrator file into a Photoshop file, so you can design in Illustrator and then export using Photoshop. It works, but it really shouldn’t be necessary.
Image slicing works really well, but is completely dependent on the source images that are being sliced. Image slicing is used by pretty much every operating system to display controls of varying sizes consistently. Image slicing works by taking a source image, say an image of a button, and slicing it up into 9 sections, like a tic-tac-toe board. The corner sections are always drawn without changes. The top and bottom middle sections are drawn using a fixed height and stretched horizontally to fill the top and bottom edges of the button. Likewise, the left and right middle sections are drawn using a fixed width and stretched vertically to draw the sides. And finally, the center section is stretched horizontally and vertically to fill the remain space.
Have you ever wondered why Windows in High DPI looks really washed out and faint, while MacOS looks the same in High DPI as it does in standard DPI? The reason is that the source images for buttons, windows, list boxes, etc are the same whether you are running Windows in 96 dpi or 192 dpi. The border of these source images is 1 pixel wide, which certainly makes sense for a traditional 96 dpi system. However, when these source images are sliced and used to display a control in high dpi, the border is still just 1 pixel wide. On a high dpi display, the border should really be 2 pixels wide. Microsoft should be using a different set of source images like it does for radio buttons and check boxes when in High DPI.
I mention this because VCL Styles, which is based off the Microsoft Visual Style engine suffers the same limitation. Not every control defined in a VCL style supports High DPI graphic assets. I think they should, but for now they don’t. Only a subset of controls include support for High DPI specific graphic assets.
The Bitmap Style Designer is a pretty lousy application. It is one of the primary reasons why creating a completely custom VCL style is so tedious and, at times, frustrating. The Bitmap Style Designer is responsible for mapping the individual graphic assets in your source images to the appropriate control elements. Unfortunately, the selection process can only be accomplished using the mouse and requires clicking the left mouse button to establish the upper left corner of the region and clicking the right button to set the lower right corner. There is a zoom feature that helps a little, but the zoom actually distorts the image so that it is quite easy to click on the wrong location. The app also teases you by showing you the actual coordinates of the two corners in an edit box in the toolbar, but you cannot edit the values by hand. Ugh.
Also frustrating is that there is no ability to pan the source image to move the desired graphic element into view. You have to use the scroll bars to pan across the image. The mouse wheel does not work, and keyboard arrow keys change the zoom level (the focused control). It would be much better if holding the space bar down while dragging the image worked to pan, like it does for pretty much every other graphics program.
The Bitmap Style Designer is also very confusing because when you select a control element in the Objects tree, you get a lot of properties displayed in an inspector grid. Many of which are confusing and unexpected. For example, clicking on Objects > Button > Face reveals a grid with several Margins properties. I know what the Margins property does for a VCL control, but for a VCL style, the margin values are actually used to define the image slicing lines.
Don’t forget to set the color values. When editing a style in the Bitmap Style Designer, there are three additional nodes in the structure tree: Fonts, Colors, and SysColors. All three of these nodes provide the ability to specify associated color values for style elements, which is really important when defining a new style. For example, under SysColors, it is important to be sure to set the clHighlight color constant value to match the highlight color of your style.
Unfortunately, the Fonts page is a bit misleaing. At the top of the page, there are two buttons: “Change” and “Change Color”. The Change button brings up a Font dialog box and you can indeed change the font used for the control element. However, the change is ignored in the actual style file. I have never gotten that to work. Fortunatey, the Change Color button does work properly and is especially important for changing the font color used in dark styles.
There are still gaps in style support in various VCL controls. For example, it is still not possible to specify a style for a dropdown toolbar button to have rounded corners only on the outer most corners, and not the corners of the drop down button. Another example, is there is no good way to create a capsule button, where the left and right sides are semi-cirles. The image slicing mechanism utilized in the Bitmap Style Designer (i.e. the Margins properties) does not have the flexibility to support this functionality. It would also be nice to be able to specify different styles for ComboBoxes based on whether the control is using csDropDown or csDropDownList style, like Windows itself supports.
Overall, it was quite an experience digging into the details of the VCL styles, but I believe the effort was worth it–I am pleased with the new styles.