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

Adding a Background Image to the Path Selector

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

Adding a Background Image to the Path Selector Using the Designer

To add a background image to the path selector, 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 evoke 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's smart tag () to open the C1WebEditor Tasks menu.

5.   From the C1WebEditor Tasks menu, select Property builder.

The C1WebEditor Properties editor appears.

6.   Choose the Styles tab.

 

     

     

7.   Under Styles, select Path Selector to reveal its list of properties in the Properties window.

8.   Locate the BackgroundImage property and type the URL of your background image into its text box.

 

 

9.   Press OK. Observe that a background image now appears behind the path selector.

Adding a Background Image to the Path Selector in Source View

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

 

       <PathSelectorStyle BackgroundImage="~/Images/YourImageHere.gif">

       </PathSelectorStyle>

Adding a Background Image to the Path Selector Programmatically

If you prefer to work programmatically, you can add a background image to the path selector by adding the following code to the Page_Load Event:

      Visual Basic

C1WebEditor1.PathSelectorStyle.BackgroundImage = "images/floofyrainbow.gif"

      C#

C1WebEditor1.PathSelectorStyle.BackgroundImage = @"images/floofyrainbow.gif";

 This Topic Illustrates the Following:

The background image of the path selector is now set as you specified.  In addition, you have learned how to set the BackgroundImage property of a toolbar item using the Designer, Source view, and Visual Basic and C# code.

The image below features a background image behind the path selector:

 

 

Note that the regular toolbar has no background image. To learn how to add a background image to the toolbars, please see the Adding a Background Image to the Toolbars topic.


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