Skip to main content

Banded Table View Tutorial. Step 4: Customize Appearance

  • 2 minutes to read

In the previous step, you grouped columns in bands. This step describes how to apply skins to the View and customize View styles and scrollbar settings.

Step 5 Result

Skins

Skins allow you to change the appearance of an application built with DevExpress VCL controls.

Enable skin support for the project. Click Project | Modify Skin Options in the main menu of your RAD Studio IDE to invoke the Project Skin Options Editor.

Skin Options Drop-Down List Item

Check Enable skin support and click OK to apply changes and close the dialog.

Project Skin Options Editor

Place a TdxSkinController component on the form.

Tip

Press Ctrl+H to hide non-visual components that can overlap the View’s content.

Adjust the following skin settings:

  1. Ensure that the NativeStyle property is set to False because the native (operating system-dependent) look-and-feel style has priority over skins and built-in styles.

  2. Specify Office2019Colorful as the SkinName property value. The control now uses this skin instead of the default look-and-feel style.

The image shows the skinned View.

The Office2019Colorful Skin

View Styles

Click the View and expand its Styles property. Review the available View Styles settings. You can also disable the UseOddEvenStyles option to apply the same appearance settings to odd and even rows.

The image shows the difference.

The Same Style for Odd and Even Data Rows

Scroll Options

VCL scrollbars allow you to view data that does not fit to the control’s client area. You can customize scrollbar settings to make your application more user-friendly.

Select the skin controller and configure scrollbars as follows:

  1. Set the ScrollbarMode property to sbmHybrid. This option enables hybrid scrollbars that are similar to those found in Universal Windows Platform (UWP) applications.

  2. Assign scmSmooth to the ScrollMode property. This option enables per-pixel scrolling and smooth scroll animations when a user navigates between records.

Build and run the application to see the result.

VCL Data Grid: The Final Result

See Also