Back to Devexpress

Modify XtraForm Skin Elements

skineditor-118427-create-custom-skins-modify-xtra-form-skin-elements.md

latest1.8 KB
Original Source

Modify XtraForm Skin Elements

  • May 29, 2025
  • 3 minutes to read
  1. In the Skin Editor, select the “Form” skin element group. In the property grid, set the Text Color property to #F88E1D and clear the Text Shadow Color setting. Note that depending on the current Skin Editor settings, property names may differ.

  2. Select the “Common” skin element group and change the “Control” color to #F7F7F7.

  3. Locate and click the “FormCaption” skin element that represents the form title bar to see its default settings.

  4. Hover over the state preview area and click the background image size to open this bitmap in an external graphics editor.

  5. Inspect the background image in the graphics editor. This image stores bitmaps for all element states at once, arranging them in a single column.

  6. Fill the entire rectangle with #3A3A3A color and save the image.

  7. Apply the following modifications to the FormCaption skin element:

  8. Remaining form borders are represented by the FormFrameLeft, FormFrameRight, and FormFrameBottom skin elements. In the “DevExpress Style” skin these are 5-pixel borders with dark gray edges.

  9. Edit these bitmaps in a graphics editor as follows.

  10. Set frame element sizes, so that they fit your new bitmaps: left and right frames must be 1-pixel wide (“Size | MinSize | Width” in the property grid), the bottom frame must be 1-pixel high (“Size | MinSize | Height” in the property grid).

  11. Set sizing margins for all three frames to zero.

  12. Refresh the project assembly and run your testing application to see the result.

Next Step

Modify Tab Pane and Recent Item Control Skin Elements