Recently we’ve been working on a project that requires us to create an entirely custom User Interface. The aim of this project was to create a UI that closely resembles a modern web application.
DevExpress has been exceptionally useful in this process. We’ve been able to modify a lot of components using a custom skin we’ve created through the DevExpress skin editor. It is a tool that allows the user to customize almost every aspect of standard Delphi and DevExpress components.
I will go over the customization of a single component as an example of using the skin editor.
With your DevExpress license, you get access to the dxSkinEditor. The SkinEditor is located in your DevExpress installation folder. After opening it, you can create a new project using any of the DevExpress standard templates. For this example, the basic button will be modified to a custom dark mode styling.
On the side panel on the left-hand side, you will find the product groups. These contain the components that can be edited sorted in groups. The button will be under Common > Button. After selecting the button, you will be met with these settings:
Here you have all the usual properties you have in Delphi, but we can also change the image. This will allow you to have rounded corners on the buttons for example. In the first dropdown on the left you will see all the states that need to be filled. For the button these states are: Normal, Hot, Pressed, Disabled, Active and Checked. For this example, I will be using the following image to fill these states.
After making your changes, you must build your custom skin. The SkinEditor will save the design in the following files:
To use the custom skin in your own project you must do the following: