Toolbar

     Toolbar is a horizontal row of selectable buttons displayed in the top part of a parent window right under the menubar, allowing you to select a variety of functions.

     The Toolbar control skin consists of images which make your application more attractive. Full color-depth Toolbar contains the default Buttons that can duplicate the basic menu commands and at the same time toolbar can be an independent window component with its inherent functionalities.

       Creating a Toolbar skin in SkinBuilder application is one of the complicated tasks involved in this guide. You need to import appropriate graphics corresponding to the different Control states (Normal/Highlighted/Pressed/Disabled) of the Toolbar buttons.

        Skin creation process

        When you start skinning Toolbar component, check the checkbox in front of "Toolbar" item presented in "Default Controls" pane. Then switching to "Properties pane" the following attributes for "Normal" state should be customized to change the visual appearance of toolbar as you desire:

  

         

       In case you use the image with text for skinning your Toolbar buttons you can adjust Text Color option in Properties pane. See the picture #4 above illustrating the example of SkinBuilder Toolbar button with text.

       Insert your pre-created images in assigned fields by clicking "Browse" button ( ) and selecting images in "Select file" window. Image handling implies Margins values setting and Drawing mode (Stretch/Tile) assignment.

       "Text Color" attribute is intended for color customization by means of built-in palette "Color" or choosing a "Custom Color".

       Vertical center alignment allows buttons to be centered vertically. So you should choose True or False that means "yes" (to apply this property to the skin) or "no" (not to apply)

       Define (Left/ Right) borders values to show the distance of Toolbar buttons row from the or from the right.

         Notes:

       1. Be careful to customize all supported control states (Normal, Highlighted, Pressed and Disabled).

       2. Pay attention to "Disabled" state, as there is a "Disable Icon Color" setting for disabled icons representation. In case you miss this attribute your Toolbar representation in Disabled state will not be skinned.

       And here is what the Toolbar component looks like with all the properties set: