Most of our UI component supports skinning, or in other words you can define
how parts of the component may looks like. In this tutorial we will apply skins
to bars in the eXG2antt component. The tutorial provides code for Access, VB6,
Visual FoxPro,
VB.NET, C#, C++,Visual DataFlex. If the NET Assembly is
listed in the programming language name it means that the section is applied to
NET Assembly Version of the component, else the COM or ActiveX version is being
used. Generally speaking, if any of our components provides the VisualAppearance
property it means that the visual appearance for almost all visible parts of the
component can be changed using EBN objects. The Exontrol's eXButton/COM
installs a WYSWYG Builder ( Builder.exe ) that helps creating and editing EBN
files ( skin files ).

The following tutorial shows:

applying a skin object ( EBN ) to a part of the
component, in our case the bars in the chart

Applying a skin object ( EBN ) to a part of the component, in our case the bars in the chart

The first thing we need is to insert the ebn file to VisualAppearance
collection as in the following sample. Shortly, the Add method of the
VisualApearance collection is called, to add a new skin file, and the Color
property of the Task bar is being changed to indicate the index of the skin file
being used, in the highest byte. The sample uses the rect.ebn
file that looks like which
is applied to Task bars.

Access.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\rect.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
End With
.EndUpdate
End With

VB6.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\rect.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
End With
.EndUpdate
End With

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 1 "C:/Temp/rect.ebn" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$1000000
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

So, now the look for our chart will be:

Let's change now the height of the Task bars, so you need to call the Height property as shown in the following sample:

Access.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\rect.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
.Height = 22
End With
.EndUpdate
End With

VB6.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\rect.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
.Height = 22
End With
.EndUpdate
End With

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 1 "C:/Temp/rect.ebn" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$1000000
Set ComHeight of hoBar to 22
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

Now, let's change again the skin with a new one called arrow.ebn
that shows like follows .
This skin file contains transparent regions for the start and end
portion of the arrow ( these were defined in the EBN file ). So, the code actually
calls the Add method of the VisualAppearance to add a new ebn file, and changes
the Color and Height property of the Task bar.

Access.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\arrow.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
.Height = 24
End With
.EndUpdate
End With

VB6.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "C:\Temp\arrow.ebn"
With .Chart.Bars("Task")
.Color = &H1000000
.Height = 24
End With
.EndUpdate
End With

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 1 "C:/Temp/arrow.ebn" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$1000000
Set ComHeight of hoBar to 24
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

So, the the look will be as:

resizes the part of the component being displayed using skins, for different effects

The question will be how can we change the visual appearance of
the Task bar so the Day and Week bars will look closer, not interrupted ( like
seen in the following picture ) . All we
need to do is to create a clone of the skin object, and specifying a new
displaying area, by increasing the left and right area. Create a CP skin object as shown in the following sample:

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 2 "C:/Temp/arrow.ebn" to Nothing
Get ComAdd of hoAppearance 1 "CP:2 -6 0 6 0" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$1000000
Set ComHeight of hoBar to 24
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

The CP:2 -6 0 6 0 indicates that the skin object index 2
will be displayed in a rectangle with the 6 pixels left, and 6 pixels to the
right. This way we got the following:

Now how about the green bar that overrides
the black bar behind, can we somehow show them transparently? The answer will be
yes, all we need is to ShowTransaprentBars
property so the code looks like follows:

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 2 "C:/Temp/arrow.ebn" to Nothing
Get ComAdd of hoAppearance 1 "CP:2 -6 0 6 0" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Set ComShowTransparentBars of hoChart to 30
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$1000000
Set ComHeight of hoBar to 24
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

Let's say that you have already defined your skin file ( ebn ) that looks like
and you need to change its color to be more red as ,
without creating a new skin file with a different color. The idea is using the
BBGGRR in the color properties as in the following code. By default, 000000 is
used, but if you will change the 000000 with 0000FF red color is applied.

Access.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "c:\temp\xpsel.ebn"
With .Chart.Bars("Task")
.Color = &H10000FF
.Height = 16
End With
.EndUpdate
End With

VB6.

With G2antt1
.BeginUpdate
.VisualAppearance.Add 1, "c:\temp\xpsel.ebn"
With .Chart.Bars("Task")
.Color = &H10000FF
.Height = 16
End With
.EndUpdate
End With

Visual DataFlex, you need to call the Send changeAppearance Self,
where the changeAppearance procedure looks as following:

Procedure changeAppearance Handle g
Variant voAppearance
Get ComVisualAppearance of g to voAppearance
Handle hoAppearance
Get Create (RefClass(cComAppearance)) to hoAppearance
Set pvComObject of hoAppearance to voAppearance
Get ComAdd of hoAppearance 1 "C:/Temp/xpsel.ebn" to Nothing
Send Destroy to hoAppearance
Variant vChart
Get ComChart of g to vChart
Handle hoChart
Get Create (RefClass(cComChart)) to hoChart
Set pvComObject of hoChart to vChart
Variant vBars
Get ComBars of hoChart to vBars
Handle hoBars
Get Create (RefClass(cComBars)) to hoBars
Set pvComObject of hoBars to vBars
Variant vBar
Get ComItem of hoBars "Task" to vBar
Handle hoBar
Get Create (RefClass(cComBar)) to hoBar
Set pvComObject of hoBar to vBar
Set ComColor of hoBar to |CI$10000FF
Set ComHeight of hoBar to 16
Send Destroy to hoBar
Send Destroy to hoBars
Send Destroy to hoChart
End_Procedure

Imagine that an EBN is just a Color. As you
would paint an object using a solid color, the same you can use using the EBN
objects. Shortly, all properties or parameters that support EBN objects is
indicated in the help file with the description "The last 7 bits in the
high significant byte of the color indicates the identifier of the skin being
used to paint the ...." A color expression is generally a combination of
RRGGBB values, even it is stored in a DWORD value, which means 4 bytes, so
actually the color uses only 3 bytes for RR, GG and BB value, ( red, green, blue
). This way we get one byte that can be used to specify the identifier of the
EBN being used. For instance, 0x1000000, indicates the EBN with the identifier
1, since 0x000001, means actually the RGB(0,0,1) which is different. If you need
to paint the EBN with a different color, you need to specify the RRGGBB values,
as 0x1FF0000 means the EBN object being shown in red as the 0xFF0000 is
RGB(255,0,0) which means red, and the 0x1 indicates the EBN with the identifier
1. All controls the support EBN objects provide a VisualAppearance collection.
Use the Add method of the VisualAppearance collection to add new EBN objects to
the component.

The following table shows the differences between new and old
implementations of applying the color on different EBN objects:

The following screen shot shows the EBN objects being shown by
default, when no color is applied ( for instance, 0x1000000, 0x2000000, .... )

The following screen shot shows the EBN objects being shown when
RGB(255,0,0) is applied ( for instance, 0x1FF0000, 0x2FF0000, .... )

The following screen shot shows the EBN objects being shown when
RGB(0,255,0) is applied ( for instance, 0x100FF00, 0x200FF00, .... )

The following screen shot shows the EBN objects being shown when
RGB(0,0,255) is applied ( for instance, 0x10000FF, 0x20000FF, .... )

The following screen shot shows the EBN objects being shown when
RGB(127,127,127) is applied ( for instance, 0x17F7F7F, 0x27F7F7F, .... )

The following screen shot shows the EBN objects being shown when
RGB(127,255,255) is applied ( for instance, 0x17FFFFF, 0x27FFFFF, .... )

The following screen shot shows the EBN objects being shown when
RGB(255,255,127) is applied ( for instance, 0x1FFFF7F, 0x2FFFF7F, .... )

The following screen shot shows the EBN objects being shown when
RGB(255,127,255) is applied ( for instance, 0x1FF7FFF, 0x2F7FFFF, .... )

The following screen shot shows the EBN objects being shown when
RGB(0,127,255) is applied ( for instance, 0x1007FFF, 0x2007FFFF, .... )

Each pixel is the result of a bitwise AND combination between the specified
color AND the color in the EBN object. In other words a BLACK imagine ( all
zeros ) can not be combined with any color, so the result will be always BLACK.
When applying the color to an EBN object its transparent color ( if defined ) is
kept, so only the region that defines the EBN object is shown with a different
color. The screen shots were generated using the EBN sample in the C:\Program Files\Exontrol\ExGrid
folder ( eXGrid )

Currently, any EBN file being used should
be added using the Add(ID,SKIN)
method of the VisualAppearance object. The following sample changes the visual
appearance of the selected items in the eXGrid component.

The following screen shot shows the control before applying the
EBN file:

(string) The BASE64 encoded string that holds the EBN
file. This option is useful if you provide EBN objects in the control's
Template page or in code. The Exontrol's exImages
tool generates BASE64 encoded strings from EBN files.

In order to generate the BASE64 encoded string from your
EBN file do the following:

Run the eXImages tool

Run the Windows Explorer and select or locate the
EBN file. Press the CTRL + C or drop the EBN file in the middle
panel ( Drag here files such of .bmp, .gif, .ebn, ... )

The clipboard contains the generated BASE64 string,
or you can copy it from the right panel of the eXImages tool.
Generally, the string is long, so you can use the s definition to
insert it to your code.

(array) A byte[] or safe arrays of VT_I1 or VT_UI1 expression that indicates the
content of the EBN file. This option is useful if you want to provide the EBN
files in the project resources. The idea is that you have to provide a safe
array of bytes to the Skin parameter of the Add method. For instance, the
VB6 provides the LoadResData function, the VB/NET or C# provides an internal
class Resources where all items in the resources can be accessed through
public properties.