The eXSuite package contains more than 40 components, with over 200 objects, 9,000 functions, and more than 3,000,000 lines of source code... All of our components are written from scratch ( they are not subclassing classes such as SysTreeView32, SysListView32, ... ), which makes them very flexible and easy to improve. NO dependencies to MFC, VB or anything else.

The EBN file provides skin capabilities for almost all of our UI components.  The Exontrol's eXButton/COM installs a WYSWYG Builder ( Builder.exe ) that helps creating and editing EBN files. The skin method, in it's simplest form, uses a single graphic file assigned to the client area of the painting object. By using a collection of objects laid over the graphic, it is possible to define which sections of the graphic will be used as borders, corners and other possible elements, fixing them to their proper position regardless of the size of the painting object. The skin file ( EBN ) is organized as a hierarchical list of objects. Each object can display a portion of picture with attributes like tile, stretch or transparent or a background color. The position for each child object is relative to its parent, and can be aligned to any side of the parent's client area. 

• Introduction
• Installing EBN's WYSWYG builder
• Encoding EBN files
• Creating your EBN file
• Skinning a component, or changing its visual appearance
• Gallery

What's the difference between stretching a picture and EBN technology? The main difference is that they doesn't look the same when the picture or the EBN is stretching or applied to the same object. Also, simple stretching a picture won't hide transparent points or create not rectangular regions.  Here's illustrated the difference between stretching a picture and using the EBN file with the same bitmap as . 

If we stretch the picture we get and we get if the EBN file is applied to the same object.

The eXButton/COM installs the WYSWYG Builder to create, view or edit EBN files. The eXButton/NET configuration does not install the EBN's builder. Please go to eXButton's download page here, and download and install the COM/ActiveX version. Once you install the eXButton/COM setup, it provides the EBN's builder, as well as a Windows Shell Extension that allows viewing the EBN files in your Windows Explorer as you would see the BMP or picture files in the thumbnail view. Also, you can view the EBN content by dragging the file from your Windows Explorer on the Exontrol's eXImages tool that can be found here.

The following screen shot shows the Windows Explorer before installing the eXButton/COM:

while the next screen shot shows the Windows Explorer after installing the eXButton/COM ( you can see the visual appearance for each EBN file ).

The BASE64 encoded strings hold objects such as icons, images, pictures, or EBN files. In some cases, in order to avoid carrying the files with your setup you can use the BASE64 encoded strings to hard code the object. The Exontrol's eXImages tool can be used to encode files or decode BASE 64 strings. 

The following screen shot shows the eXImages tool once you dragged or selecting for copy an EBN file

Using the eXImages tool, you can try one of the followings:

(1) · drag icon files to the left panel
(2) · drag a picture file to the middle panel
(3) · select a file using CTRL + C (Explorer)

in both cases the tool generates the BASE64 encoded strings, for your application. ~ENCODE~

(4) · select the text and press CTRL + C
(5) · select the text, copy and paste it here

in both cases the tool looks for the icons or picture being stored in the encoded string. ~DECODE~

Here's the steps you need to quick create an EBN file from a picture file (bmp, gif or jpg ):

1. Locate and Run the Builder.exe ( designer ) tool in the ExButton's installation folder. ( Usually it is located C:\Program Files\Exontrol\ExButton\Sample\VC\Builder\Builder.exe ).
2. Insert your picture using the Zoom\Settings\Load Picture open dialog, or drag the picture file from your Windows Explorer to the Builder tool.
3. If necessary, change the size for the margins in the Zoom window.
4. If necessary, change the points to specify the transparent colors, in the Zoom window
5. Save the EBN file

Here's the steps you need to quick create an EBN file from a screenshot ( For instance, take your full screenshot by pressing the PRINT SCREEN key, or take your open window screenshot ( currently selected window ), by pressing the ALT + PRINT SCREEN key ) :

1. Locate and Run the Builder.exe ( designer ) tool in the ExButton's installation folder. ( Usually it is located C:\Program Files\Exontrol\ExButton\Sample\VC\Builder\Builder.exe ).
2. Insert your screen shot using the Zoom\Settings\Load Picture From Clipboard. If there is not screenshot in your clipboard, a warning message is shown.
3. If your clipboard contains a screenshot, the Builder tool displays a window called Select Picture, that helps you to select the entire picture or a portion of it. Use the mouse and arrow keys to adjust the portion of the picture you need to insert to your skin file. 
4. If necessary, change the size for the margins in the Zoom window.
5. If necessary, change the points to specify the transparent colors, in the Zoom window.
6. Save the EBN file

By default, the Zoom\Settings\Load Picture or Zoom\Settings\Load Picture From Clipboard inserts a picture,  assigns borders of 4 pixels wide to the skin, and the corner pixels as being transparent color for corners.

,

1. Load the picture file using the Zoom\Settings\Load Picture, and so the builder applies the picture to the skin. The first screen shot shows the Zoom window after loading the picture file. The second screen shot shows the designer of the Builder tool.

   ,

2. From the Designer we can see that the client area is not looking ok, so all we need to do is to adjust the size of the margins. We need to drag the top margin to 7, the bottom margin to 6, the left margin to 7, and the right margin to 7, and so the zoom and the Designer looks like follows:

   ,

3.  The Zoom window shows 4 shade corners, that specify the points that indicates the transparent colors for associated objects. As you can see in the designer the red color points are not show, as the each corner has a transparent color. For instance, if in your case, you need to get ride of the transparent color, click and drag the shade point outside of the rectangle where it is displayed, as we did for the top left corner, and so the Zoom and the Designer looks like follows:

   ,

If we magnify the Designer in the top left corner, we can see the red points ( because there is no transparent color for the part, no shade point in the top left corner ):

If we put back the transparent color back, ( click the left/top point in the Zoom window, in the picture area ) we get:

so the round corner is showing back.

Few recommendations:

• Use BMP files as much as possible, because they show an accurate picture when zooming ( not compressed like GIF ot JPG ).

• Always check the EBN file size. Use small picture files, not huge, so loading and displaying your EBN could be time consuming. By default, the EBN file is compressed, so even if you load a BMP, the EBN is compressed! Even in the case we presented we can reduce the size of the picture from , to , and so we still keep the essential parts of the skin. In the first case, the EBN file's size is 1,722 bytes, where the second is 515 bytes, which is better and they display the same skin.

• For parts of the skins, that just don't need to screech a picture, just assign a background color for the part if required.

• When no needed, avoid using transparency, so it will avoid creating regions, and so EBN file could be faster.

• You can save the EBN file as uncompressed, clicking the Save button while CTRL key is pressed.

• Don't add multiple pictures, if you don't need them.

• Don't add new objects that you are not planning to use them.

Click the picture, and save the TXT file associated. The TXT file is a template (x-script) file that can be applied to any of our UI controls. Click the control in design mode, locate the Properties item, locate the Template page, and paste the TXT content in the right panel. Each line in VisualAppearance context indicates an EBN file compressed and saved as BASE64 encoded strings. Any UI part of the control can show any EBN content, so you can combine in any way the following templates.

ATX Size: 56,435 bytes

Vista Size: 37,918 bytes

Sofa Size: 30,047 bytes

Oxid Size: 11,258 bytes

Idea Size: 15,915 bytes

She Size: 27,478 bytes

Confort Size: 15,778 bytes

VBlue Size: 46,223 bytes

XPZune Size: 32,052 bytes

XPSilver Size: 37,959 bytes

XPBlue Size: 47,031 bytes

XPGreen Size: 41,935 bytes