Creating a custom UI with DevExpress

Home → Knowledgebase → Delphi → Creating a custom UI with DevExpress

Introduction

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.

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.

Using the custom skin

After making your changes, you must build your custom skin. The SkinEditor will save the design in the following files:

• A compiled resource file (.RES file).
• A unit file (.PAS file).
• Delphi package files (.DPK file).

To use the custom skin in your own project you must do the following:

• Place the .RES and .PAS in your projects folder.
• Specify the unit name in the ‘uses’ clause and install the skin package into the IDE. This works like any other package by right clicking and installing it.
• Add a TdxSkinController to your form.
• Apply the skin to a specific component under the “LookAndFeel.SkinName” property.