Adjusting DevExpress’ XtraTabControl’s page padding

Look at the picture below, it is a DevExpress‘ XtraTabControl (WinForms) with a single page hosting a normal Button. Both XtraTabControl and Button are set as Dock = Dock.Fill. Somebody (read: my client) considers that there is just too much wasted space around them (annotated with arrows):

There are no properties to modify padding behavior but luckily DevExpress supports skinning and I solved it through the use of slightly modified skin based iMaginary in this case.

Preparation

Fire up SkinEditor (found in All Programs/Developer Express v2009 vol 2/Components/Tools) and create a new skin based on iMaginary out of the box skin. For more info on creating new skins see this help topic. Save the new project and build the skin assembly. Create a new Visual Studio project, reference the skin assembly and code similar to this (substitute SKINPROJECTNAME and SKINNAME with your names):

DevExpress.Skins.SkinManager.Default.RegisterAssembly(typeof(SKINPROJECTNAME).Assembly);!
XtraForm f = new XtraForm();
f.LookAndFeel.SkinName = "SKINNAME";
f.LookAndFeel.UseDefaultLookAndFeel = false;
XtraTabControl ctl1 = new XtraTabControl();
ctl1.Dock = DockStyle.Fill;
XtraTabPage page = new XtraTabPage { Text = "One" };
ctl1.TabPages.Add(page);
Button b = new Button { Text = "Dock.Fill" };
b.Dock = DockStyle.Fill;
page.Controls.Add(b);
f.Controls.Add(ctl1);

Now you have a test project that should output the window above.

Step 1 – The drawing of XtraTabControl the border

DevExpress controls use template images that are properly resized for most of the resizable drawing including XtraTabControl’s borders.

Find the TabPane node in the tree view on the right

and you’ll see the border template image:

Note that the shadows are drawn within this template, not programmatically. Red lines are borders that determine what part of the image is copied to provide dynamically size final image. First, close SkinEditor. Then find the template image on the disk ([SKIN PROJECT]/[SKIN NAME]/Tab/TabPane.png) and use on of the paint applications to get ride of the shades (by copy paste the parts without shades) and expand the usable area to get a result like below, reopen SkinEditor and load the skin project (I did move borders to 2,2,2,2 as well – you can drag them with mouse or by setting proper values on the left).

If you run the test application it will show painted borders as expected but the button will remain on the original position regardless of this change. For now only the drawing changed but not the behavior.

We are half way now. Obviously the page content margins have to be adjusted as well.

Step 2 – adjust page content margins

First instinct was to adjust Tab’s parameters of my skin in the SkinEditor, it has to be one of these I thought:

Left and RightContentIndent were the obvious choices.  But no, they have no effect in our case. So I resorted to what every developer does: I looked at the sources of the XtraTabControl. It turns out that the solution is rather simple yet not supported by SkinEditor for some reason. Instead I had to manually modify the skin’s XML definition you’ll find in [SKIN PROJECT]/[SKIN NAME]/skin.xml file.

Open the skin.xml and find the line that contains this content: SkinProduct="Tab" SkinName="[SKIN NAME]". It should look like:

<Skin4 SkinProduct="Tab" SkinName="SKIN NAME">

(don’t ask me why there is a node named Skin4 and others numbered from 1 on). So, within this node find the node named TabPane. Within TabPane node adjust the attributes of ContentMargins node to values you want. I.e. try this:

<ContentMargins Bottom="1" Top="1" Left="1" Right="1" />

The result is the 2nd picture below – compare both original and modified skin to see which one you prefer.

This would be a lot more straightforward if ContentMargins were available through SkinEditor’s UI. I hope that SkinEditor will get more treatment in the future as it lacks other features as well.