ComponentOne WebEditor for ASP.NET: WebEditor for ASP.NET Task-Based Help > Customizing C1WebEditor's Appearance > Adding a Background Image to the Toolbars

Adding a Background Image to the Toolbars

You can add a background image to toolbars using the BackgroundImage property. C1WebEditor offers three methods of adding a background image to the toolbars, all of which are described below.  

Adding a Background Image to the Toolbars Using the Designer

To add a background image to the toolbars using the Properties window, complete the following tasks:

1.   From the Solution Explorer window, right-click on your project and select New Folder from the context menu.  Name the new folder "Images".

2.   Right click the Images folder to invoke its context menu and select Add Existing Item.

 

     

      The Add Existing Item dialog box appears.

3.   In the Add Existing Item dialog box, select an image file and click Add. The image has been added to the Images folder.

4.   Select C1WebEditor to display its properties in the Properties window.

5.   Expand the node for the ToolBarStyle property.

      Another list of properties is revealed. 

6.   Find the BackgroundImage property and click its ellipsis button .

      The Select Image dialog box appears.

7.   From the Project folders pane in the Select Image dialog box, select the folder that contains your image file. 

8.   Select your image from the Contents of folder pane and press OK.

 

     

 

      A background image is added to C1WebEditor's toolbars.

 

Adding a Background Image to the Toolbars in Source View

To add a background image to the toolbars in Source view, place the following markup between the </C1WebEditor:C1WebEditor> tags:

 

       <ToolBarStyle BackgroundImage="~/Images/graduation_50x50.gif">

       </ToolBarStyle>

Adding a Background Image to the Toolbars Programmatically

If you prefer to work programmatically, you can set the background image of C1WebEditor's toolbars by adding the following code to the Page_Load Event:

      Visual Basic

C1WebEditor1.ToolBarStyle.BackgroundImage = "images/blue_marble.gif"

      C#

C1WebEditor1.ToolBarStyle.BackgroundImage = @"images/blue_marble.gif";

 This Topic Illustrates the Following:

The background of C1WebEditor's toolbars is now set as you specified. In addition, you have learned how to set the BackgroundImage property using the designer, Source view, and Visual Basic and C# code. 

The image below features C1WebEditor's toolbars with a background image:

 

 

 

Note that the path selector bar has no background image. To learn how to add a background image to the path selector, see the Adding a Background Image to the Path Selector topic.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.
￿