property XMLGrid.SelBackColor as Color
Specifies the selection's background color.

TypeDescription
Color A color expression that indicates the background color of selected nodes. Use the Add method to add new skins to the control. If you need to remove the skin appearance from a part of the control you need to reset the last 7 bits in the high significant byte of the color being applied to the background's part. 
Use the SelForeColor, SelForeColorChild, SelBackColor, SelBackColorChild properties to customize the colors for selected nodes. The SelBackColorCollapse property specifies the selection's background color, when the node is collapsed. The property has effect while its value is not -1. In other words, use the -1 to prevent apply the color on the node's background/foreground. Use the SelectCount property to get the number of selected nodes. Use the SelectedNode property to retrieve the selected node giving its index in the selected nodes collection. Use the Selected property to select a node. The SelBackMode property specifies the way the control displays the selected nodes.

How do I assign a new look for the selected item?

The following VB sample changes the visual appearance for the selected node. The SelBackColor property indicates the selection background color. Shortly, we need to add a skin to the Appearance object using the Add method, and we need to set the last 7 bits in the SelBackColor property to indicates the index of the skin that we want to use. The sample applies the "" to the selected node:

With XMLGrid1
    With .VisualAppearance
        .Add &H22, App.Path + "\selected.ebn"
    End With
    .SelForeColor = RGB(0, 0, 0)
    .SelBackColor = .SelBackColor Or &H22000000
    .SelBackColorChild = .BackColor
    .SelForeColorChild = vbBlack
End With

The following C++ sample changes the visual appearance for the selected node:

#include "Appearance.h"
m_xmlgrid.GetVisualAppearance().Add( 0x22, COleVariant(_T("D:\\Temp\\EXMLGrid.Help\\selected.ebn")) );
m_xmlgrid.SetSelBackColor( RGB(0,0,255) | 0x22000000 );
m_xmlgrid.SetSelForeColor( 0 );
m_xmlgrid.SetSelBackColorChild(m_xmlgrid.GetBackColor());
m_xmlgrid.SetSelForeColorChild( 0 );

The following VB.NET sample changes the visual appearance for the selected node:

With AxXMLGrid1
    With .VisualAppearance
        .Add(&H22, "D:\Temp\EXMLGrid.Help\selected.ebn")
    End With
    .SelForeColor = Color.Black
    .Template = "SelBackColor = 587137024"
    .SelBackColorChild = .BackColor
    .SelForeColorChild = Color.Black
End With

where the 587137024 value is the hexa representation of 0x22FF0000

The following C# sample changes the visual appearance for the selected node:

axXMLGrid1.VisualAppearance.Add(0x22, "d:\\temp\\EXMLGrid.Help\\selected.ebn");
axXMLGrid1.Template = "SelBackColor = 587137024";
axXMLGrid1.SelForeColorChild = Color.Black;
axXMLGrid1.SelBackColorChild = axXMLGrid1.BackColor;

where the 587137024 value is the hexa representation of 0x22FF0000.

The following VFP sample changes the visual appearance for the selected node:

With thisform.XMLGrid1
    With .VisualAppearance
        .Add(34, "D:\Temp\EXMLGrid.Help\selected.ebn")
    EndWith
    .SelForeColor = RGB(0, 0, 0)
    .SelBackColor = RGB(0,0,255) + 570425344
    .SelBackColorChild = .BackColor
    .SelForeColorChild = RGB(0, 0, 0)
EndWith

How do I assign a new look for the selected item?

The component supports skinning parts of the control, including the selected item. Shortly, the idea is that identifier of the skin being added to the Appearance collection is stored in the first significant byte of property of the color type. In our case, we know that the SelBackColor property changes the background color for the selected item. This is what we need to change. In other words, we need to change the visual appearance for the selected item, and that means changing the background color of the selected item. So, the following code ( blue code ) changes the appearance for the selected item:
With XMLGrid1
    .VisualAppearance.Add &H34, App.Path + "\aqua.ebn"
    .SelBackColor = &H34000000
End With

Please notice that the 34 hexa value is arbitrary chosen, it is not a predefined value. Shortly, we have added a skin with the identifier 34, and we specified that the SelBackColor property should use that skin, in order to change the visual appearance for the selected item. Also, please notice that the 34 value is stored in the first significant byte, not in other position. For instance, the following sample doesn't use any skin when displaying the selected item:

With XMLGrid1
    .VisualAppearance.Add &H34, App.Path + "\aqua.ebn"
    .SelBackColor = &H34
End With  

This code ( red code ) DOESN'T use any skin, because the 34 value is not stored in the higher byte of the color value. The sample just changes the background color for the selected item to some black color ( RGB(0,0,34 ) ). So, please pay attention when you want to use a skin and when to use a color. Simple, if you are calling &H34000000, you have 34 followed by 6 ( six ) zeros, and that means the first significant byte of the color expression. Now, back to the problem. The next step is how we are creating skins? or EBN files? The Exontrol's exbutton component includes a builder tool that saves skins to EBN files. So, if you want to create new skin files, you need to download and install the exbutton component from our web site. Once that the exbutton component is installed, please follow the steps.

Let's say that we have a BMP file, that we want to stretch on the selected item's background.

  1. Open the VB\Builder or VC\Builder sample
  2. Click the New File button ( on the left side in the toolbar ), an empty skin is created. 
  3. Locate the Background tool window and select the Picture\Add New item in the menu, the Open file dialog is opened.
  4. Select the picture file ( GIF, BMP, JPG, JPEG ). You will notice that the visual appearance of the focused object in the skin is changed, actually the picture you have selected is tiled on the object's background.
  5. Select the None item, in the Background tool window, so the focused object in the skin is not displaying anymore the picture being added.
  6. Select the Root item in the skin builder window ( in the left side you can find the hierarchy of the objects that composes the skin ), so the Root item is selected, and so focused.
  7. Select the picture file you have added at the step 4, so the Root object is filled with the picture you have chosen.
  8. Resize the picture in the Background tool window, until you reach the view you want to have, no black area, or change the CX and CY fields in the Background tool window, so no black area is displayed.
  9. Select Stretch button in the Background tool window, so the Root object stretches the picture you have selected.
  10. Click the Save a file button, and select a name for the new skin, click the Save button after you typed the name of the skin file. Add the .ebn extension.
  11. Close the builder

You can always open the skin with the builder and change it later, in case you want to change it.

Now, create a new project, and insert the component where you want to use the skin, and add the skin file to the Appearance collection of the object, using blue code, by changing the name of the file or the path where you have selected the skin. Once that you have added the skin file to the Appearance collection, you can change the visual appearance for parts of the controls that supports skinning. Usually the properties that changes the background color for a part of the control supports skinning as well.