Aspnet Menu

ComponentOne
Menu for ASP.NET AJAX

Copyright 1987-2010 ComponentOne LLC. All rights reserved.
Corporate Headquarters
ComponentOne LLC
201 South Highland Avenue
3
rd
Floor
Pittsburgh, PA 15206 USA
Internet: info@ComponentOne.com
Web site: http://www.componentone.com
Sales
E-mail: sales@componentone.com
Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)
Trademarks
The ComponentOne product name is a trademark and ComponentOne is a registered trademark of ComponentOne LLC. All
other trademarks used herein are the properties of their respective owners.
Warranty
ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming
normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective
CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After
90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and
handling) to ComponentOne.
Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express
or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was
written. We are not responsible for any errors or omissions. ComponentOnes liability is limited to the amount you paid for the
product. ComponentOne is not liable for any special, consequential, or other damages for any reason.
Copying and Distribution
While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make
copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in
seeing that it is used by licensed users only.
This manual was produced using ComponentOne Doc-To-Help.
iii
Table of Contents
ComponentOne Menu for ASP.NET AJAX Overview.................................................................. 1
What's New in ComponentOne Menu for ASP.NET AJAX.....................................................................1
Installing Menu for ASP.NET AJAX .......................................................................................................1
Menu for ASP.NET AJAX Setup Files.....................................................................................................1
System Requirements ...............................................................................................................................2
Uninstalling Menu for ASP.NET AJAX...................................................................................................2
Deploying your Application in a Medium Trust Environment ..................................................................3
End-User License Agreement ...................................................................................................................6
Licensing FAQs .......................................................................................................................................6
What is Licensing? ...................................................................................................................................6
How does Licensing Work? ......................................................................................................................6
Common Scenarios ..................................................................................................................................7
Common Scenarios in Mobile Applications ..............................................................................................9
Troubleshooting ..................................................................................................................................... 10
Technical Support .................................................................................................................................. 12
Redistributable Files ............................................................................................................................... 12
About This Documentation.................................................................................................................... 13
Namespaces ........................................................................................................................................... 13
Creating an AJAX-Enabled ASP.NET Project........................................................................................ 14
Adding the C1Menu Component to a Project ......................................................................................... 16
Key Features.......................................................................................................................17
Menu for ASP.NET AJAX Quick Start.....................................................................................21
Adding C1Menu to the Page .................................................................................................................. 21
Applying Different Data Binding Methods ............................................................................................. 21
Working with the C1Menu Designer Form............................................................................................. 28
Changing the Menu Item's Position in the C1Menu Designer Form........................................................ 29
Changing Menu and Sub-menu Orientation............................................................................................ 30
Adding Keyboard Support to C1Menu ................................................................................................... 31
Menu for ASP.NET AJAX Top Tips ........................................................................................32
Design-Time Support............................................................................................................33
C1Menu Smart Tag................................................................................................................................33
C1Menu Designer Form......................................................................................................................... 35
C1Menu Designer Form Menu Bar ........................................................................................................ 36
C1Menu Designer Form Toolbar............................................................................................................ 38
C1Menu Designer Form Context Menu ................................................................................................. 39
C1Menu Bindings Collection Editor ....................................................................................................... 39
Menu Types........................................................................................................................40
Top-level menu ...................................................................................................................................... 41
Drop-down Menu................................................................................................................................... 41
Group Menu .......................................................................................................................................... 41
Context Menu ........................................................................................................................................ 42
Menu Item Types .................................................................................................................43
Link Items.............................................................................................................................................. 43
Header Items.......................................................................................................................................... 44
Group Items ........................................................................................................................................... 47
Separator Items ...................................................................................................................................... 47
Menu Creation....................................................................................................................48
iv
Static Menu Creation.............................................................................................................................. 48
Dynamic Menu Creation........................................................................................................................ 48
Data Source Menu Creation................................................................................................................... 49
Menu Appearance................................................................................................................49
Menu Styles ........................................................................................................................................... 49
Visual Styles ........................................................................................................................................... 49
Templates............................................................................................................................................... 50
Top-Level Menu Template ..................................................................................................................... 50
Items Template....................................................................................................................................... 51
Child Items Template ............................................................................................................................. 52
Individual Menu Items Template............................................................................................................ 53
Menu Item Images ................................................................................................................................. 55
Menu Layout ......................................................................................................................................... 55
Menu Behavior....................................................................................................................57
Animation.............................................................................................................................................. 57
Expand and Collapse Animation Effects................................................................................................. 57
Expand and Collapse Transitions ........................................................................................................... 59
Expand and Collapse Duration............................................................................................................... 61
Menu Scrolling....................................................................................................................................... 61
Scroll Menu Types ................................................................................................................................. 61
Scroll Mode Options .............................................................................................................................. 62
Scroll Button Styles ................................................................................................................................64
Menu Navigation and Shortcuts ............................................................................................................. 65
Working with the Client-Side Menu ........................................................................................66
Client-Side Properties ............................................................................................................................. 66
Client-Side Methods ............................................................................................................................... 66
Client-Side Events .................................................................................................................................. 66
Menu for ASP.NET Samples ..................................................................................................71
Menu for ASP.NET Task-Based Help.......................................................................................71
Adding Collapse and Expand Animation Effects .................................................................................... 71
Creating Different Menu Types .............................................................................................................. 74
Create Submenus.................................................................................................................................... 74
Create a Group Menu............................................................................................................................. 77
Create a Context Menu and Attach it to a Control .................................................................................. 79
Saving and Loading C1Menu as an XML File........................................................................................ 79
Save C1Menu as an XML File................................................................................................................ 80
Load C1Menu from an XML File........................................................................................................... 80
Adding Scrolling to Menus ..................................................................................................................... 81
Add Scrolling to Vertical Top Level Menu.............................................................................................. 81
Add Scrolling to Horizontal Top Level Menu......................................................................................... 81
Add Scrolling to Vertical Sub Menu........................................................................................................ 82
Add Scrolling to Vertical Group ............................................................................................................. 83
Creating a Click Event for a Menu Item.................................................................................................. 84
Creating a Custom Visual Style .............................................................................................................. 85
1
ComponentOne Menu for ASP.NET
AJAX Overview
Create highly sophisticated menu systems in your ASP.NET applications with
ComponentOne Menu for ASP.NET AJAX (C1Menu). C1Menus easy to
use designers, support for Cascading Style Sheets (CSS) and templates, and
built-in animation effects give you a customizable and flexible menu control
that is very easy to use. The rich client-side object model enables you to use
client-side events for more client-side interactivity.
Menu for ASP.NET AJAX is part of ComponentOne Studio for ASP.NET
AJAX, the next breed of ASP.NET controls developed on a new client and
server side framework. This new ASP.NET control suite fully exploits the
AJAX framework to enable you to create highly interactive and sophisticated
Web applications with Studio for ASP.NET.
Getting Started
Get started with the
following topics:
- Menu for
ASP.NET AJAX
Quick Start (page
21)
- Menu Types
(page 40)
- Menu Behavior
(page 57)
What's New in ComponentOne Menu for ASP.NET AJAX
This documentation was last revised on June 14, 2010. There were no new features added to ComponentOne
Menu for ASP.NET AJAX.
Tip: A version history containing a list of new features, improvements, fixes, and changes for each product is
available in HelpCentral at http://helpcentral.componentone.com/VersionHistory.aspx.
Installing Menu for ASP.NET AJAX
The following sections provide helpful information on installing ComponentOne Studio for ASP.NET
AJAX:
Menu for ASP.NET AJAX Setup Files
The ComponentOne Studio for ASP.NET installation program will create the following directory:
C:\Program Files\ComponentOne\Studio for ASP.NET. This directory contains the following
subdirectories:
bin Contains copies of all binaries (DLLs, Exes) in the ComponentOne
Visual Studio ASP.NET package.
2
C1.Web.UI Contains files (at least a readme.txt) related to the C1WebUI product.
H2Help Contains online documentation for the Studio for ASP.NET controls.
C1WebUi\VisualStyles Contains all external file themes.
Samples
Samples for the product are installed in the ComponentOne Samples folder by default. The path of the
ComponentOne Samples directory is slightly different on Windows XP and Windows 7/Vista machines:
Windows XP path: C:\Documents and Settings\<username>\My Documents\ComponentOne Samples
Windows 7/Vista path: C:\Users\<username>\Documents\ComponentOne Samples
The ComponentOne Samples folder contains the following subdirectories:
Common Contains support and data files that are used by many of the demo
programs.
C1WebUI\CS\ControlExplorer Contains a Samples folder for the Visual Studio sample project and a
readme.txt file.
Samples can be accessed from the ComponentOne Sample Explorer. On your desktop, click the Start button
and then click ComponentOne | Studio for ASP.NET | Samples | Palomino Samples.
System Requirements
System requirements for ComponentOne Studio for ASP.NET AJAX components include the following:
Operating Systems: Windows 7
Windows 2000
Windows Server 2003
Windows Server 2008
Windows XP SP2
Windows Vista
Web Server: Microsoft Internet Information Services (IIS) 5.0 or later
Environments: .NET Framework 2.0 or later
Visual Studio 2005 or Visual Studio 2008
Internet Explorer 6.0 or later
Firefox 2.0 or later
Safari 2.0 or later
Uninstalling Menu for ASP.NET AJAX
To uninstall Menu for ASP.NET AJAX:
1. Open the Control Panel and select the Add or Remove Programs (Programs and Features in Windows
7/Vista).
2. Select ComponentOne Studio for ASP.NET and click the Remove button.
3
3. Click Yes to remove the program.
Deploying your Application in a Medium Trust Environment
Depending on your hosting choice, you may need to deploy your Web site or application in a medium trust
environment. Often in a shared hosting environment, medium trust is required. In a medium trust
environment several permissions are unavailable or limited, including OleDbPermission,
ReflectionPermission, and FileIOPermission. You can configure your Web.config file to enable these
permissions.
Note: ComponentOne controls will not work in an environment where reflection is not allowed.
ComponentOne ASP.NET controls include the AllowPartiallyTrustedCallers() assembly attribute and will
work under the medium trust level with some changes to the Web.config file. Since this requires some control
over the Web.config file, please check with your particular host to determine if they can provide the rights to
override these security settings.
Modifying or Editing the Config File
In order to add permissions, you can edit the exiting web_mediumtrust.config file or create a custom policy file
based on the medium trust policy. If you modify the existing web_mediumtrust.config file, all Web
applications will have the same permissions with the permissions you have added. If you want applications to
have different permissions, you can instead create a custom policy based on medium trust.
Edit the Config File
In order to add permissions, you can edit the exiting web_mediumtrust.config file. To edit the exiting
web_mediumtrust.config file, complete the following steps:
1. Locate the medium trust policy file web_mediumtrust.config located by default in the
%windir%\Microsoft.NET\Framework\{Version}\CONFIG directory.
2. Open the web_mediumtrust.config file.
3. Add the permissions that you want to grant. For examples, see Adding Permissions (page 4).
Create a Custom Policy Based on Medium Trust
In order to add permissions, you can create a custom policy file based on the medium trust policy. To create a
custom policy file, complete the following steps:
1. Locate the medium trust policy file web_mediumtrust.config located by default in the
%windir%\Microsoft.NET\Framework\{Version}\CONFIG directory.
2. Copy the web_mediumtrust.config file and create a new policy file in the same directory.
Give the new a name that indicates that it is your variation of medium trust; for example,
AllowReflection_Web_MediumTrust.config.
3. Add the permissions that you want to grant. For examples, see Adding Permissions (page 4).
4. Enable the custom policy file on your application by modifying the following lines in your web.config file
under the <system.web> node:
<system.web>
<trust level="CustomMedium" originUrl=""/>
<securityPolicy>
<trustLevel name="CustomMedium"
policyFile="AllowReflection_Web_MediumTrust.config"/>
</securityPolicy>
...
</system.web>
4
Note: Your host may not allow trust level overrides. Please check with your host to see if you have these rights.
Allowing Deserialization
To allow the deserialization of the license added to App_Licenses.dll by the Microsoft IDE, you should add
the SerializationFormatter flag to security permission to the Web.config file. Complete the steps in the
Modifying or Editing the Config File (page 3) topic to create or modify a policy file before completing the
following.
Add the SerializationFormatter flag to the <IPermission class="SecurityPermission">
tag so that it appears similar to the following:
<NamedPermissionSets>
<PermissionSet
class="NamedPermissionSet"
version="1"
Name="ASP.Net">
<IPermission
class="SecurityPermission"
version="1"
Flags="Assertion, Execution, ControlThread,
ControlPrincipal, RemotingConfiguration, SerializationFormatter"/>
...
</PermissionSet>
</NamedPermissionSets>
Adding Permissions
You can add permission, including ReflectionPermission, OleDbPermission, and FileIOPermission, to the
web.config file. Note that ComponentOne controls will not work in an environment where reflection is not
allowed. Complete the steps in the Modifying or Editing the Config File (page 3) topic to create or modify a
policy file before completing the following.
ReflectionPermission
By default ReflectionPermission is not available in a medium trust environment. ComponentOne ASP.NET
controls require reflection permission because LicenseManager.Validate() causes a link demand for full trust.
To add reflection permission, complete the following:
1. Open the web_mediumtrust.config file or a file created based on the web_mediumtrust.config file.
2. Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears similar
to the following:
<SecurityClasses>
<SecurityClass Name="ReflectionPermission"
Description="System.Security.Permissions.ReflectionPermission, mscorlib,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>
...
</SecurityClasses>
3. Add the following <IPermission> tag after the <NamedPermissionSets> tag so it appears similar
to the following:
<PermissionSet class="NamedPermissionSet" version="1"
Name="ASP.Net">
<IPermission
class="ReflectionPermission"
version="1"
Flags="ReflectionEmit,MemberAccess" />
5
...
</PermissionSet>
4. Save and close the web_mediumtrust.config file.
OleDbPermission
By default OleDbPermission is not available in a medium trust environment. This means you cannot use the
ADO.NET managed OLE DB data provider to access databases. If you wish to use the ADO.NET managed
OLE DB data provider to access databases, you must modify the web_mediumtrust.config file.
To add OleDbPermission, complete the following steps:
2. Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears similar
to the following:
<SecurityClasses>
<SecurityClass Name="OleDbPermission"
Description="System.Data.OleDb.OleDbPermission, System.Data,
...
</SecurityClasses>
to the following:
Name="ASP.Net">
<IPermission class="OleDbPermission" version="1"
Unrestricted="true"/>
...
</PermissionSet>
FileIOPermission
By default, FileIOPermission is not available in a medium trust environment. This means no file access is
permitted outside of the application's virtual directory hierarchy. If you wish to allow additional file
permissions, you must modify the web_mediumtrust.config file.
To modify FileIOPermission to allow read access to a specific directory outside of the application's virtual
directory hierarchy, complete the following steps:
2. Add the following <SecurityClass> tag after the <SecurityClasses> tag so that it appears
similar to the following:
<SecurityClasses>
<SecurityClass Name="FileIOPermission"
Description="System.Security.Permissions.FileIOPermission, mscorlib,
...
</SecurityClasses>
to the following:
Name="ASP.Net">
6
...
<IPermission class="FileIOPermission" version="1"
Read="C:\SomeDir;$AppDir$" Write="$AppDir$" Append="$AppDir$"
PathDiscovery="$AppDir$" />
...
</PermissionSet>
End-User License Agreement
All of the ComponentOne licensing information, including the ComponentOne end-user license agreements,
the ComponentOne licensing model, and frequently asked licensing questions, is available online at
http://www.componentone.com/SuperPages/Licensing/.
Licensing FAQs
This section describes the main technical aspects of licensing. It may help the user to understand and resolve
licensing problems he may experience when using ComponentOne .NET and ASP.NET products.
What is Licensing?
Licensing is a mechanism used to protect intellectual property by ensuring that users are authorized to use
software products.
Licensing is not only used to prevent illegal distribution of software products. Many software vendors,
including ComponentOne, use licensing to allow potential users to test products before they decide to purchase
them.
Without licensing, this type of distribution would not be practical for the vendor or convenient for the user.
Vendors would either have to distribute evaluation software with limited functionality, or shift the burden of
managing software licenses to customers, who could easily forget that the software being used is an evaluation
version and has not been purchased.
How does Licensing Work?
ComponentOne uses a licensing model based on the standard set by Microsoft, which works with all types of
components.
Note: The Compact Framework components use a slightly different mechanism for run-time licensing than the
other ComponentOne components due to platform differences.
When a user decides to purchase a product, he receives an installation program and a Serial Number. During
the installation process, the user is prompted for the serial number that is saved on the system. (Users can also
enter the serial number by clicking the License button on the About Box of any ComponentOne product, if
available, or by rerunning the installation and entering the serial number in the licensing dialog.)
When a licensed component is added to a form or web page, Visual Studio obtains version and licensing
information from the newly created component. When queried by Visual Studio, the component looks for
licensing information stored in the system and generates a run-time license and version information, which
Visual Studio saves in the following two files:
An assembly resource file which contains the actual run-time license
A "licenses.licx" file that contains the licensed component strong name and version information
These files are automatically added to the project by Microsoft Visual Studio.
7
In WinForms and ASP.NET 1.x applications, the run-time license is stored as an embedded resource in the
assembly hosting the component or control by Visual Studio. In ASP.NET 2.x applications, the run-time
license may also be stored as an embedded resource in the App_Licenses.dll assembly, which is used to store
all run-time licenses for all components directly hosted by WebForms in the application. Thus, the
App_licenses.dll must always be deployed with the application.
The licenses.licx file is a simple text file that contains strong names and version information for each of the
licensed components used in the application. Whenever Visual Studio is called upon to rebuild the application
resources, this file is read and used as a list of components to query for run-time licenses to be embedded in the
appropriate assembly resource. Note that editing or adding an appropriate line to this file can force Visual
Studio to add run-time licenses of other controls as well.
Note that the licenses.licx file is usually not shown in the Solution Explorer; it appears if you press the Show
All Files button in the Solution Explorer's toolbox, or from Visual Studio's main menu, select Show All Files
on the Project menu.
Later, when the component is created at run time, it obtains the run-time license from the appropriate
assembly resource that was created at design time and can decide whether to simply accept the run-time
license, to throw an exception and fail altogether, or to display some information reminding the user that the
software has not been licensed.
All ComponentOne products are designed to display licensing information if the product is not licensed. None
will throw licensing exceptions and prevent applications from running.
Common Scenarios
The following topics describe some of the licensing scenarios you may encounter.
Creating components at design time
This is the most common scenario and also the simplest: the user adds one or more controls to the form, the
licensing information is stored in the licenses.licx file, and the component works.
Note that the mechanism is exactly the same for Windows Forms and Web Forms (ASP.NET) projects.
Creating components at run time
This is also a fairly common scenario. You do not need an instance of the component on the form, but would
like to create one or more instances at run time.
In this case, the project will not contain a licenses.licx file (or the file will not contain an appropriate run-time
license for the component) and therefore licensing will fail.
To fix this problem, add an instance of the component to a form in the project. This will create the licenses.licx
file and things will then work as expected. (The component can be removed from the form after the
licenses.licx file has been created).
Adding an instance of the component to a form, then removing that component, is just a simple way of adding
a line with the component strong name to the licenses.licx file. If desired, you can do this manually using
notepad or Visual Studio itself by opening the file and adding the text. When Visual Studio recreates the
application resources, the component will be queried and its run-time license added to the appropriate
assembly resource.
Inheriting from licensed components
If a component that inherits from a licensed component is created, the licensing information to be stored in the
form is still needed. This can be done in two ways:
Add a LicenseProvider attribute to the component.
8
This will mark the derived component class as licensed. When the component is added to a form, Visual
Studio will create and manage the licenses.licx file, and the base class will handle the licensing process as
usual. No additional work is needed. For example:
[LicenseProvider(typeof(LicenseProvider))]
class MyGrid: C1.Win.C1FlexGrid.C1FlexGrid
{
// ...
}
Add an instance of the base component to the form.
This will embed the licensing information into the licenses.licx file as in the previous scenario, and the
base component will find it and use it. As before, the extra instance can be deleted after the licenses.licx
file has been created.
Please note, that C1 licensing will not accept a run time license for a derived control if the run time license is
embedded in the same assembly as the derived class definition, and the assembly is a DLL. This restriction is
necessary to prevent a derived control class assembly from being used in other applications without a design
time license. If you create such an assembly, you will need to take one of the actions previously described
create a component at run time.
Using licensed components in console applications
When building console applications, there are no forms to add components to, and therefore Visual Studio
won't create a licenses.licx file.
In these cases, create a temporary Windows Forms application and add all the desired licensed components to
a form. Then close the Windows Forms application and copy the licenses.licx file into the console application
project.
Make sure the licenses.licx file is configured as an embedded resource. To do this, right-click the licenses.licx
file in the Solution Explorer window and select Properties. In the Properties window, set the Build Action
property to Embedded Resource.
Using licensed components in Visual C++ applications
There is an issue in VC++ 2003 where the licenses.licx is ignored during the build process; therefore, the
licensing information is not included in VC++ applications.
To fix this problem, extra steps must be taken to compile the licensing resources and link them to the project.
Note the following:
1. Build the C++ project as usual. This should create an exe file and also a licenses.licx file with licensing
information in it.
2. Copy the licenses.licx file from the app directory to the target folder (Debug or Release).
3. Copy the C1Lc.exe utility and the licensed dlls to the target folder. (Don't use the standard lc.exe, it has
bugs.)
4. Use C1Lc.exe to compile the licenses.licx file. The command line should look like this:
c1lc /target:MyApp.exe /complist:licenses.licx /i:C1.Win.C1FlexGrid.dll
5. Link the licenses into the project. To do this, go back to Visual Studio, right-click the project, select
properties, and go to the Linker/Command Line option. Enter the following:
/ASSEMBLYRESOURCE:Debug\MyApp.exe.licenses
6. Rebuild the executable to include the licensing information in the application.
9
Using licensed components with automated testing products
Automated testing products that load assemblies dynamically may cause them to display license dialogs. This
is the expected behavior since the test application typically does not contain the necessary licensing
information, and there is no easy way to add it.
This can be avoided by adding the string "C1CheckForDesignLicenseAtRuntime" to the
AssemblyConfiguration attribute of the assembly that contains or derives from ComponentOne controls. This
attribute value directs the ComponentOne controls to use design time licenses at run time.
For example:
#if AUTOMATED_TESTING
[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime")]
#endif
public class MyDerivedControl : C1LicensedControl
{
// ...
}
Note that the AssemblyConfiguration string may contain additional text before or after the given string, so the
AssemblyConfiguration attribute can be used for other purposes as well. For example:
[AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime,BetaVersion")]
THIS METHOD SHOULD ONLY BE USED UNDER THE SCENARIO DESCRIBED. It requires a design
time license to be installed on the testing machine. Distributing or installing the license on other computers is a
violation of the EULA.
Common Scenarios in Mobile Applications
The following topics describe some of the licensing scenarios you may encounter when working with Mobile
components.
Updating or renewing a license
If you renew your subscription, the new license must be installed.
If the Mobile controls are licensed through a Studio subscription, then open the About Box of either an
ASP.NET control or a .NET Windows forms control and update the license by clicking the License button
and entering your serial number.
If the Mobile controls are licensed through a Studio for Mobile Devices subscription, then open the About Box
of the 1.x version of a Mobile control or run the setup again to enter your serial number. Presently, the 2.x
versions of the Mobile controls do not have the option to license or register from the About Box; therefore, it is
necessary to license through another component or the setup.
Licensing 2.x Mobile Controls through the Setup
To enter the serial number (license) through the Studio for Mobile Devices 2.0 setup, follow these steps:
1. Run the ComponentOne Studio for Mobile Devices 2.0 setup.
2. Follow the instructions in the setup, and enter the serial number when prompted.
There are cases where the setup may not prompt you. If you have a valid license installed already, or if you are
installing a version of the controls that has already been installed (Maintenance Mode), you will not be
prompted to enter your serial number. If you need to enter your serial number for an install, and the install is
running in Maintenance Mode, you will need to uninstall first. Once you uninstall, run the install again.
If you are still not prompted for a serial number by the time you get to the install screen, you must have a valid
license in the registry on your machine. If you still need to install a new serial number, remove the old license
and then run the setup again. There is a utility available that will remove the old license for you, which can be
found below.
10
License Remover
The license remover will search for the following licenses on your system: Studio Enterprise, Studio for Mobile
Devices, and individual Studio Mobile product licenses. Any licenses that are found will be populated into a
list so that you can select the ones that you would like to remove. To remove a Studio for Mobile Devices
license with the license remover, follow these steps:
1. Unzip and run the C1LicBomb.exe.
2. You will see an app with a list of the installed licenses on your machine. If you see both Studio Enterprise
and Studio for Mobile devices listed, select both for removal, otherwise select the one that you see. If the
new serial number that you wish to enter for Studio for Mobile Devices is not a Studio Enterprise serial
number, you will need to enter your Studio Enterprise serial number again, but this can be done through
any of the About Boxes for C1 controls with the exception of the Mobile Studio About Boxes.
3. Select any other licenses you wish to remove, then click the Remove Selected Licenses button.
4. You will be asked if you are sure that you want to delete each key; click OK when you get the dialog box.
5. There will also be a dialog box to let you know that a particular key was removed successfully; click OK
for that one also.
6. Now you can close the program and run your Studio for Mobile Devices setup again to enter your new
serial number.
Follow through with the setup, enter your serial number when prompted, and ComponentOne Studio for
Mobile Devices will be licensed on your machine.
Updating a project after renewing a license
Once you have installed a new license, each project must be updated in order to use the new control;
rebuilding the control is not sufficient. It is necessary for the control to regenerate the license embedded in its
SupportInfo property. To do this, it is necessary to force Visual Studio to update the control properties stored
in the form. The easiest way to do this is to simply modify a property. The simplest choice is to toggle a
Boolean property such as the Visible property, and then toggle it back to its original value. This results in no
changes or side effects in the control configuration, but it forces the IDE to update SupportInfo and embed the
new run-time license.
Instantiating a Mobile control at run time
The Mobile controls behave the same way as other ComponentOne controls when they are created at run time
and not placed on the form at design time. Because the IDE does not have an opportunity to obtain a run-time
license on its own in this case, it is necessary to force the IDE to include a run-time license. To accomplish
this, include at least one instance of the control on a form in the assembly that is instantiated BEFORE the
dynamically created instance is created. Once a control of the same type is licensed, all others on the formare
accepted as licensed.
Troubleshooting
We try very hard to make the licensing mechanism as unobtrusive as possible, but problems may occur for a
number of reasons.
Below is a description of the most common problems and their solutions.
I have a licensed version of a ComponentOne product but I still get the splash screen when I run my
project.
If this happens, there may be a problem with the licenses.licx file in the project. It either doesn't exist, contains
wrong information, or is not configured correctly.
11
First, try a full rebuild (Rebuild All from the Visual Studio Build menu). This will usually rebuild the correct
licensing resources.
If that fails follow these steps:
1. Open the project and go to the Solution Explorer window.
2. Click the Show All Files button on the top of the window.
3. Find the licenses.licx file and open it. If prompted, continue to open the file.
4. Change the version number of each component to the appropriate value. If the component does not
appear in the file, obtain the appropriate data from another licenses.licx file or follow the alternate
procedure following.
5. Save the file, then close the licenses.licx tab.
6. Rebuild the project using the Rebuild All option (not just Rebuild).
Alternatively, follow these steps:
2. Click the Show All Files button on the top of the window.
3. Find the licenses.licx file and delete it.
4. Close the project and reopen it.
5. Open the main form and add an instance of each licensed control.
6. Check the Solution Explorer window, there should be a licenses.licx file there.
For ASP.NET 2.x applications, follow these steps:
2. Find the licenses.licx file and right-click it.
3. Select the Rebuild Licenses option (this will rebuild the App_Licenses.licx file).
I have a licensed version of a ComponentOne product on my web server but the components still
behave as unlicensed.
There is no need to install any licenses on machines used as servers and not used for development.
The components must be licensed on the development machine, therefore the licensing information will be
saved into the executable (.exe or .dll) when the project is built. After that, the application can be deployed on
any machine, including web servers.
For ASP.NET 2.x applications, be sure that the App_Licenses.dll assembly created during development of the
application is deployed to the bin application bin directory on the web server.
If your ASP.NET application uses WinForms user controls with constituent licensed controls, the runtime
license is embedded in the WinForms user control assembly. In this case, you must be sure to rebuild and
update the user control whenever the licensed embedded controls are updated.
I downloaded a new build of a component that I have purchased, and now I'm getting the splash screen
when I build my projects.
Make sure that the serial number is still valid. If you licensed the component over a year ago, your
subscription may have expired. In this case, you have two options:
Option 1 - Renew your subscription to get a new serial number.
12
If you choose this option, you will receive a new serial number that you can use to license the new
components (from the installation utility or directly from the About Box).
The new subscription will entitle you to a full year of upgrades and to download the latest maintenance builds
directly from http://prerelease.componentone.com/.
Option 2 Continue to use the components you have.
Subscriptions expire, products do not. You can continue to use the components you received or downloaded
while your subscription was valid.
Technical Support
ComponentOne offers various support options. For a complete list and a description of each, visit the
ComponentOne Web site at http://www.componentone.com/Support.
Some methods for obtaining technical support include:
Online Support via HelpCentral
ComponentOne HelpCentral provides customers with a comprehensive set of technical resources in the
form of FAQs, samples, Version Release History, Articles, searchable Knowledge Base, searchable Online
Help and more. We recommend this as the first place to look for answers to your technical questions.
Online Support via our Incident Submission Form
This online support service provides you with direct access to our Technical Support staff via an online
incident submission form. When you submit an incident, you'll immediately receive a response via e-mail
confirming that you've successfully created an incident. This email will provide you with an Issue
Reference ID and will provide you with a set of possible answers to your question from our
Knowledgebase. You will receive a response from one of the ComponentOne staff members via e-mail in
2 business days or less.
Peer-to-Peer Product Forums and Newsgroups
ComponentOne peer-to-peer product forums and newsgroups are available to exchange information, tips,
and techniques regarding ComponentOne products. ComponentOne sponsors these areas as a forum for
users to share information. While ComponentOne does not provide direct support in the forums and
newsgroups, we periodically monitor them to ensure accuracy of information and provide comments
when appropriate. Please note that a ComponentOne User Account is required to participate in the
ComponentOne Product Forums.
Installation Issues
Registered users can obtain help with problems installing ComponentOne products. Contact technical
support by using the online incident submission form or by phone (412.681.4738). Please note that this
does not include issues related to distributing a product to end-users in an application.
Documentation
ComponentOne documentation is installed with each of our products and is also available online at
HelpCentral. If you have suggestions on how we can improve our documentation, please email the
Documentation team. Please note that e-mail sent to the Documentation team is for documentation
feedback only. Technical Support and Sales issues should be sent directly to their respective departments.
Note: You must create a ComponentOne Account and register your product with a valid serial number to obtain
support using some of the above methods.
Redistributable Files
ComponentOne Studio for ASP.NET is developed and published by ComponentOne LLC. You may use it to
develop applications in conjunction with Microsoft Visual Studio or any other programming environment that
enables the user to use and integrate the control(s). You may also distribute, free of royalties, the following
13
Redistributable Files with any such application you develop to the extent that they are used separately on a
single CPU on the client/workstation side of the network:
C1.Web.UI.2.dll
C1.Web.UI.Controls.2.dll
C1.Web.UI.3.dll
C1.Web.UI.4.dll
Site licenses are available for groups of multiple developers. Please contact Sales@ComponentOne.com for
details.
About This Documentation
Acknowledgements
Microsoft, Windows, Windows 7/Vista, and Visual Studio are either registered trademarks or trademarks of Microsoft
Corporation in the United States and/or other countries.
Firefox is a registered trademark of the Mozilla Foundation.
Safari is a registered trademark of Apple Inc.
ComponentOne
If you have any suggestions or ideas for new features or controls, please call us or write:
Corporate Headquarters
ComponentOne LLC
201 South Highland Avenue
3
rd
Floor
Pittsburgh, PA 15206 USA
412.681.4343
412.681.4384 (Fax)
http://www.componentone.com
ComponentOne Doc-To-Help
This documentation was produced using ComponentOne Doc-To-Help Enterprise.
Namespaces
Namespaces organize the objects defined in an assembly. Assemblies can contain multiple namespaces, which
can in turn contain other namespaces. Namespaces prevent ambiguity and simplify references when using
large groups of objects such as class libraries.
The general namespace for ComponentOne Web products is C1.Web.UI.Controls. The following code
fragment shows how to declare a C1Menu (which is one of the core Studio for ASP.NET classes) using the
fully qualified name for this class:
Visual Basic
Dim menu As C1.Web.UI.Controls.C1Menu
C#
C1.Web.UI.Controls.C1Menu menu;
14
Namespaces address a problem sometimes known as namespace pollution, in which the developer of a class
library is hampered by the use of similar names in another library. These conflicts with existing components
are sometimes called name collisions.
Fully qualified names are object references that are prefixed with the name of the namespace where the object
is defined. You can use objects defined in other projects if you create a reference to the class (by choosing Add
Reference from the Project menu) and then use the fully qualified name for the object in your code.
Fully qualified names prevent naming conflicts because the compiler can always determine which object is
being used. However, the names themselves can get long and cumbersome. To get around this, you can use
the Imports statement (using in C#) to define an alias an abbreviated name you can use in place of a fully
qualified name. For example, the following code snippet creates aliases for two fully qualified names, and uses
these aliases to define two objects:
Visual Basic
Imports C1Menu = C1.Web.UI.Controls.C1Menu
Imports MyMenu = MyProject.Objects.C1Menu
Dim wm1 As C1Menu
Dim wm2 As MyMenu
C#
using C1Menu = C1.Web.UI.Controls.C1Menu;
using MyMenu= MyProject.Objects.C1Menu;
C1Menu wm1;
MyMenu wm2;
If you use the Imports statement without an alias, you can use all the names in that namespace without
qualification provided they are unique to the project.
Creating an AJAX-Enabled ASP.NET Project
ComponentOne Menu for ASP.NET AJAX requires you to create an ASP.NET AJAX-Enabled project so
that Microsoft ASP.NET AJAX Extensions and a ScriptManager control are included in your project before
the C1Menu control is placed on the page. This allows you to take advantage of ASP.NET AJAX and certain
features such as partial-page rendering and client-script functionality of the Microsoft AJAX Library.
When creating AJAX-Enabled ASP.NET projects, Visual Studios 2008 and 2005 both give you the option of
creating a Web site project or a Web application project. MSDN provides detailed information on why you
would choose one option over the other.
If you are using Visual Studio 2008 with .NET Framework 2.0 or .NET Framework 3.0 or if you are using
Visual Studio 2005, you must install the ASP.NET AJAX Extensions 1.0, which can be found at
http://ajax.asp.net/. Additionally for Visual Studio 2005 users, creating a Web application project requires
installation of a Visual Studio 2005 update and add-in, which can be found at http://msdn.microsoft.com/;
however, if you have Visual Studio 2005 SP1, Web application project support is included and a separate
download is not required.
If you are using Visual Studio 2008 and .NET Framework 3.5, you can easily create an AJAX-enabled
ASP.NET project without installing separate add-ins because the framework has a built-in AJAX library and
controls.
Note: If you are using Visual Studio 2010, see http://www.asp.net/ajax/ for more information on creating an AJAX-
Enabled ASP.NET Project.
The following table summarizes the installations needed:
15
Visual Studio Version Additional Installation Requirements
Visual Studio 2008, .NET Framework 3.5 None
Visual Studio 2008 and .NET Framework 2.0 or 3.0
Visual Studio 2005 Service Pack 1
ASP.NET AJAX Extensions 1.0
http://www.asp.net/ajax/downloads/archive/
Visual Studio 2005 ASP.NET AJAX Extensions 1.0
Visual Studio update and add-in (2 installs for
Web application project support)
The following topics explain how to create both types of projects in Visual Studio 2008 and 2005.
Creating an AJAX-Enabled Web Site Project in Visual Studio 2008
To create a Web site project in Visual Studio 2008, complete the following steps:
1. From the File menu, select New | Web Site. The New Web Site dialog box opens.
2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you
choose .NET Framework 2.0 or 3.0, you must install the extensions first.
3. In the list of templates, select AJAX 1.0-Enabled ASP.NET 2.0 Web Site.
4. Click Browse to specify a location and then click OK.
Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If
you have IIS on your computer, you can specify http://localhost for the server.
A new AJAX-Enabled Web Site is created at the root of the Web server you specified. In addition, a
new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the
form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page
rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.
Creating an AJAX-Enabled Web Application Project in Visual Studio 2008
To create a new Web application project in Visual Studio 2008, complete the following steps.
1. From the File menu, select New | Project. The New Project dialog box opens.
2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you
choose .NET Framework 2.0 or 3.0, you must install the extensions first.
3. Under Project Types, choose either Visual Basic or Visual C# and then select Web. Note that one of
these options may be located under Other Languages.
4. Select AJAX 1.0-Enabled ASP.NET 2.0 Web Application from the list of Templates in the right
pane.
5. Enter a URL for your application in the Location field and click OK.
16
A new Web Forms project is created at the root of the Web server you specified. In addition, a new
Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the form.
The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page
Creating an AJAX-Enabled Web Site Project in Visual Studio 2005
To create a Web site project in Visual Studio 2005, complete the following steps:
1. From the File menu in Microsoft Visual Studio .NET, select New Web Site. The New Web Site
dialog box opens.
2. Select ASP.NET AJAX-Enabled Web Site from the list of Templates.
3. Enter a URL for your site in the Location field and click OK.
Creating an AJAX-Enabled Web Application Project in Visual Studio 2005
To create a new Web application project in Visual Studio 2005, complete the following steps.
1. From the File menu in Microsoft Visual Studio 2005, select New Project. The New Project dialog
box opens.
2. Under Project Types, choose either Visual Basic Projects or Visual C# Projects. Note that one of
these options may be located under Other Languages.
3. Select ASP.NET AJAX-Enabled Web Application from the list of Templates in the right pane.
4. Enter a URL for your application in the Location field and click OK.
Adding the C1Menu Component to a Project
When you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio
Toolbox Tab check box is checked, by default, in the installation wizard. When you open Visual Studio 2005,
you will notice a ComponentOne Studio for ASP.NET Projects tab containing the ComponentOne controls
that have automatically been added to the Toolbox.
17
If you decide to uncheck the Create a ComponentOne Visual Studio 2005 Toolbox Tab check box during
installation, you can manually add ComponentOne controls to the Toolbox at a later time.
To use C1Menu, add the C1Menu control to the form or add a reference to the C1.Web.UI.Controls.C1Menu
assembly in your project.
Manually Adding the Studio for ASP.NET AJAX controls to the Toolbox
When you install ComponentOne Studio for ASP.NET AJAX, the following C1Menu component will
appear in the Visual Studio Toolbox customization dialog box:
C1Menu
To manually add the Menu for ASP.NET AJAX control to the Visual Studio Toolbox:
1. Open the Visual Studio IDE (Microsoft Development Environment). Make sure the Toolbox is visible
(select Toolbox in the View menu if necessary) and right-click it to open the context menu.
2. To make the C1Menu component appear on its own tab in the Toolbox, select Add Tab from the context
menu and type in the tab name, C1Menu, for example.
3. Right-click the tab where the component is to appear and select Choose Items from the context menu.
The Choose Toolbox Items dialog box opens.
4. In the dialog box, select the .NET Framework Components tab. Sort the list by Namespace (click the
Namespace column header) and check the check boxes for the C1Menu component belonging to
namespace C1.Web.UI.Controls.C1Menu.
5. Click OK to close the dialog box.
The C1Menu control is added Visual Studio Toolbox.
Adding C1Menu to the Form
To add C1Menu to a form:
1. Add it to the Visual Studio toolbox.
2. Double-click each control or drag it onto your form.
Adding a Reference to the Assembly
To add a reference to the C1.Web.UI.Controls.C1Menu assembly:
1. Select the Add Reference option from the Website menu of your Web Site project or from the Project
menu of your Web Application project.
2. Select the most recent version of the ComponentOne Studio for ASP.NET assembly from the list on the
NET tab or browse to find the C1.Web.UI.Controls.2.dll file and click OK.
3. Select the Form1.vb tab or go to View|Code to open the Code Editor. At the top of the file, add the
following Imports directive (using in C#):
Imports C1.Web.UI.Controls
Note: This makes the objects defined in the C1.Web.UI.Controls.2 assembly visible to the project. See
Namespaces (page 13) for more information.
Key Features
The C1Menu control includes several unique features, including the following:
18
CSS Styling
C1Menu includes CSS supported styling so that you can use cascading style sheets to easily style the
C1Menu control to match the design of your current Web site.
Visual Styles
C1Menu provides several built-in themes, known as visual styles, that can be easily applied through the
C1Menu Tasks menu or they can be modified to create a new visual style. For more information on the
visual styles, see Visual Styles (page 49).
Built-In Animation Effects
C1Menu includes several different built-in animations that can be set when the menu items are expanded
or collapsed. Easily change animation effects by setting the ExpandAnimation and CollapseAnimation
properties.
Templates
Use the built-in template editing to change how the C1Menu control appears. Templates allow you to
easily add your own elements including text, images, and controls such as buttons to various menu
items. See Templates (page 50) for more information.
Design-time Support
C1Menu includes extensive design-time support, such as built-in designers and editors, so that you can
create and customize menus with little or no code. See C1Menu Smart Tag (page 33) and C1Menu
Designer Form (page 35) for more information.
Data Binding
Bind the C1Menu control to a data source you can bind to an XMLDataSource or SiteMapDataSource,
or you can even read data from AccessDataSource and create the C1Menu hierarchy dynamically. See
Applying Different Data Binding Methods (page 21) for more information.
Keyboard Support
Add access key support to give the C1Menu control focus with a chosen key combination. At run time
users can use the keyboard arrow keys to navigate through the menu and menu items and the ENTER key
to open a link in a menu item. For more information, see Adding Keyboard Support to C1Menu (page
31).
AJAX Support
Built-in AJAX support lets users interact with C1Menu without the control performing a postback
operation back to the server.
Set Postbacks
19
Use the AutoPostBack property to determine whether C1Menu should perform a postback to the server
each time the end user interacts with the control.
Browser Support
C1Menu includes support for the Internet Explorer (6.0 or later), Firefox (2 or later), and Safari Web
browsers.
XHTML Compliant
C1Menu provides complete XHTML compliance. The output that is generated is fully XHTML 1.1
compliant.
Client-Side Object Model
The C1Menu control's client-side object model is exposed so that you can easily customize the control
with client-side script.
Navigate to a Web Site
The C1Menu control's NavigateUrl property model lets you easily add Web site links to menu items.
Flexible Layout
Menus and its submenus can be rendered either horizontally or vertically and other layout options. See
Menu Layout (page 55) for more information.
Overlay Flash, ActiveX, and Windowed Objects
Unlike other menu controls, C1Menu can overlay any windowed objects, Flash, ActiveX and other
standard and 3rd party components so you're not limited in your Web site design (Internet Explorer 6 or
later and Firefox 2 or later).
Search Engine Optimization
Optimized for search engines, C1Menu uses semantic lists and <a> tags which are recognized and
indexed by web crawlers.
21
Menu for ASP.NET AJAX Quick Start
The C1Menu Quick Start describes how to get started with the ASP.NET control, C1Menu. In the quick start
you'll create an ASP.NET AJAX-Enabled Web Site, add a C1Menu control to the page, apply different
binding methods, add menu items and sub-menu items using the editor, change the menu's orientation, and
more!
We have made it easy for you so you can jump to any topic you like since they don't follow chronological
order.
Adding C1Menu to the Page
In this lesson you will learn how to create a new ASP.NET AJAX-Enabled Web site and add a C1Menu
control to your project. To begin the Quick Start, complete the following steps:
1. Begin by creating a new ASP.NET AJAX-Enabled Web Site. Note that as you've created an AJAX-
Enabled Web site, a ScriptManager control initially appears on the page.
2. While in Design view navigate to the Visual Studio Toolbox and double-click the C1Menu icon to add the
C1Menu control to your page.
The page will appear similar to the following:
Applying Different Data Binding Methods
In this lesson you'll learn how to bind C1Menu to a SiteMapDataSource, XMLDataSource, and an
AccessDataSource.
Bind C1Menu to an XMLDataSource
This lesson shows you how to create an XML file through Visual Studio 2008 installed templates, add the
XML Data Source component to the Web site, and assign it to C1Menu, and then set the binding for the
C1Menu.
The final application will appear like the following at run time:
To create an XML file and bind it to C1Menu, add the XMLDataSource component to the Web site, and
then assign it to the C1Menu control.
1. Start a new AJAX 1.0-Enabled ASP.NET 2.0 Web Site project.
2. Right-click on the App_Data in the Solution Explorer and select Add New Item. The Add New Item
dialog box appears.
22
3. Select the XML File and rename it Menu.xml.
4. Click on the Add button in the Add New Item dialog box.
5. Switch to the XML view and add the following data to the Menu.xml:
<?xml version="1.0" encoding="utf-8" ?>
<root>
<menuitem Text="Home" IsHeader=true>
</menuitem>
<menuitem Text="Products">
<menuitem Text="Hardware">
</menuitem>
<menuitem Text="Software">
</menuitem>
</menuitem>
<menuitem Text="Services" IsGroup=true>
<menuitem Text="Training">
</menuitem>
<menuitem Text="Consulting" IsSeparator=true>
</menuitem>
<menuitem Text="Support">
</menuitem>
</menuitem>
</root>
Note: Notice how the <menuitem> tags are indented for the sub-menu items.
6. Switch back to the .aspx page and select the Design tab to switch to Design view.
7. Expand the Data node in the Visual Studio Toolbox and double-click on the XmlDataSource component
to add it to the Web page.
8. Select the XmlDataSource1 on the Web Page and navigate to its Properties window.
9. Click on the ellipsis button next to the DataFile property to open the Select XML File dialog box. Select
the App_Data and click on the Menu.xml file. Click OK to add it to the XmlDataSource1.DataFile
property.
10. Set the XmlDataSource1.Xpath property to root/menuitem.
11. Double-click on the C1Menu control from the Visual Studio Toolbox to add it to your page.
12. Open the C1Menu control's Tasks menu and select XmlDataSource1 from the Choose Data Source drop-
down listbox
13. Click on the Source tab to switch to your source page and add the following DataBinding tags within the
C1Menu tags.
23
<DataBindings>
<cc1:C1MenuItemBinding DataMember="menuitem" TextField="Text"
GroupField=IsGroup HeaderField=IsHeader SeparatorField=IsSeparator/>
</DataBindings>
Note: Two key properties are the DataMember and TextField. The DataMember sets the data member
from the xml file to bind to the C1Menu. The TextField gets the value of the Text property of a
C1MenuItem object to which the C1MenuItemBinding object is applied.
14. Toggle back to the Design view and select Edit Menu Bindings from the C1Menu Tasks menu.
Notice the DataMember, menuitem, is added to the C1MenuItemBindingCollection and the
C1MenuItemBinding properties appear in the property grid so you can easily modify the settings for the
menuitem object.
15. Save and build your project. Observe the following at run time:
The data from the menu.xml file is reflected in the C1Menu control.
Bind C1Menu to a SiteMapDataSource
This lesson shows you how to create a Site Map through the Visual Studio 2005 installed templates, add the
SiteMapDataSource component to the Web page and assign it to C1Menu, then set the binding for the
C1Menu.
The SiteMapDataSource control enables you to view navigation information in your Web application. You
can use the C1Menu control with the SiteMapDataSource.
To create the Site Map and bind it to the C1Menu control, complete the following:
1. Create a new ASP.NET AJAX-Enabled Web Site.
2. Right-click on your project's name in the solution explorer and select Add New Item. The Add New Item
dialog box appears. Select Site Map from the list of templates, and then click Add to add the new
Web.sitemap item to the project.
The following default source code appears for the Web.sitemap file:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
24
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
3. Replace the default data with the following data for the Web.sitemap file:
<siteMap>
<siteMapNode title="Home" description="Home" url="~/default.aspx">
<siteMapNode title="Products" description="Our products"
url="~/Products.aspx">
<siteMapNode title="Hardware" description="Hardware choices"
url="~/Hardware.aspx" />
<siteMapNode title="Software" description="Software choices"
url="~/Software.aspx" />
</siteMapNode>
<siteMapNode title="Services" description="Services we offer"
url="~/Services.aspx">
<siteMapNode title="Training" description="Training classes"
url="~/Training.aspx" />
<siteMapNode title="Consulting" description="Consulting services"
url="~/Consulting.aspx" />
<siteMapNode title="Support" description="Supports plans"
url="~/Support.aspx" />
</siteMapNode>
</siteMapNode>
</siteMap>
4. Toggle back to the design view for the .aspx page. Select the Data tab in the Visual Studio Toolbox and
add the SiteMapDataSource component to the Web page using a drag-and-drop operation.
5. Double-click on the C1Menu control from the Visual Studio Toolbox to add it to your page.
6. Open the C1Menu control's Tasks menu and select New Data Source from the Choose Data Source
drop-down listbox. The Data Source Configuration Wizard dialog box appears.
7. Select the Site Map and keep the ID as SiteMapDataSource1. Click OK.
C1Menu automatically updates at design time with the data from the Web.sitemap file.
8. Save and build your project. Observe the following at run time:
The data from the Web.sitemap file is reflected in the C1Menu control.
Bind C1Menu to an AccessDataSource
This lesson shows you how to bind C1Menu to a DataView by using the AccessDataSource to connect the
Microsoft Access DataBase file to the C1Menu control and then using code to create the hierarchy for the
C1Menu control. The hierarchy is created by using ID->ParentID relation.
25
Once the C1Menu control is bound, the hierarchy is determined, you can set the Text, NavigateUrl, and
ToolTip properties.
Note: The menu uses data from the sample Access database, menu_structure.mdb, included in the
ControlExplorer Visual Studio 2005 sample project.
To bind the C1Menu control to the DataView, complete the following:
1. Create a new ASP.NET AJAX-Enabled Web Site.
2. Copy the menu_structure.mdb database file from the App_Data folder from the ControlExplorer sample
project to the App_Data folder in your project.
3. Save and close the project then reopen it so you'll see that the menu_structure.mdb file appears in your
App_Data folder.
4. Expand the Data node in the Visual Studio Toolbox and add the AccessDataSource component to the
Web page using a drag-and-drop operation.
5. Select the AccessSource1 from the drop-down listbox in the Properties window.
6. Click on the ellipsis button next to the DataFile property to open the Select Microsoft Access Database
dialog box. Select the App_Data and click on the menu_structure.mdb file. Click OK to add it to the
AccessSource1.DataFile property.
7. Toggle to Source view and add the SelectCommand to retrieve the data from the Menu_Items table.
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/menu_structure.mdb"
26
SelectCommand="SELECT * FROM
[MENU_ITEMS]"></asp:AccessDataSource>
8. Add the C1Menu control to your page.
9. To specify the namespaces used in this example, add the following statements before any declarations in
the Code Editor:
Visual Basic
Imports System.Data
Imports C1.Web.UI.Controls.C1Menu
C#
using C1.Web.UI.Controls.C1Menu;
10. Add the following code in your code behind page to connect the C1Menu control to the
AccessDataSource, select the DataView, establish hierarchy and set the Text, NavigateUrl, and ToolTip
properties:
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
CreateMenuItemsFromAccessDataSourceExample(C1Menu1,
Me.AccessDataSource1)
End Sub
Protected Sub CreateMenuItemsFromAccessDataSourceExample(ByVal menu As
C1Menu, ByVal dataSource As SqlDataSource)
' Select DataView:
Dim dsArgs As New DataSourceSelectArguments()
Dim dataView As DataView = TryCast(dataSource.[Select](dsArgs),
DataView)
' sort by parent ID:
dataView.Sort = "ParentMenuItemID"
' Clear old menu items:
menu.Items.Clear()
' Create Menu Items according MenuItemID/ParentMenuItemID
relationship.
Dim menuItemsDict As New Dictionary(Of String, C1MenuItem)()
For i As Integer = 0 To dataView.Count - 1
Dim row As DataRow = dataView(i).Row
Dim item As C1MenuItem = CreateMenuItem(row)
Dim itemID As String = row("MenuItemID").ToString()
Dim parentID As String = row("ParentMenuItemID").ToString()
menuItemsDict.Add(itemID, item)
If parentID = "" Then
' this is root menu item, add it to menu:
menu.Items.Add(item)
Else
If menuItemsDict.ContainsKey(parentID) Then
' this is child menu item, add it to parent menu item:
menuItemsDict(parentID).Items.Add(item)
End If
End If
Next
End Sub
Private Function CreateMenuItem(ByVal row As DataRow) As C1MenuItem
Dim c1MenuItem As New C1MenuItem()
c1MenuItem.Text = row("MenuItemText").ToString()
c1MenuItem.NavigateUrl = row("MenuItemUrl").ToString()
c1MenuItem.ToolTip = row("MenuItemToolTip").ToString()
27
Return c1MenuItem
End Function
C#
protected void Page_Load(object sender, EventArgs e)
{
CreateMenuItemsFromAccessDataSourceExample(C1Menu1,
this.AccessDataSource1);
}
protected void CreateMenuItemsFromAccessDataSourceExample(C1Menu
menu, SqlDataSource dataSource)
{
// Select DataView:
DataSourceSelectArguments dsArgs = new
DataSourceSelectArguments();
DataView dataView = dataSource.Select(dsArgs) as DataView;
// sort by parent ID:
dataView.Sort = "ParentMenuItemID";
// Clear old menu items:
menu.Items.Clear();
// Create Menu Items according MenuItemID/ParentMenuItemID
relationship.
Dictionary<string, C1MenuItem> menuItemsDict = new
Dictionary<string, C1MenuItem>();
for (int i = 0; i < dataView.Count; i++)
{
DataRow row = dataView[i].Row;
C1MenuItem item = CreateMenuItem(row);
string itemID = row["MenuItemID"].ToString();
string parentID = row["ParentMenuItemID"].ToString();
menuItemsDict.Add(itemID, item);
if (parentID == "")
{
// this is root menu item, add it to menu:
menu.Items.Add(item);
}
else
{
if (menuItemsDict.ContainsKey(parentID))
{
// this is child menu item, add it to parent
menu item:
menuItemsDict[parentID].Items.Add(item);
}
}
}
}
private C1MenuItem CreateMenuItem(DataRow row)
{
C1MenuItem c1MenuItem = new C1MenuItem();
c1MenuItem.Text = row["MenuItemText"].ToString();
c1MenuItem.NavigateUrl = row["MenuItemUrl"].ToString();
c1MenuItem.ToolTip = row["MenuItemToolTip"].ToString();
return c1MenuItem;
}
11. Run and save your project. Observe the following at run-time:
28
The data is bound to the C1Menu control.
Working with the C1Menu Designer Form
In this lesson you will learn how to use the C1Menu Designer Form editor to access the C1Menu Designer
Form, add menu items and sub-menu items, and set the Text, NavigateUrl, and Target properties for the menu
items.
1. Add C1Menu to your page.
2. Select the right arrow to open the C1Menu Tasks menu, click Edit Menu to open the C1Menu Designer
Form.
3. Right-click on C1Menu1, select Add Child and then Link Item.
4. Select LinkItem01 and select the Text property and enter "Menu Item 1".
5. Right click on Menu Item 1 and select Insert Item and then Link Item. Repeat this twice to add new
menu items. Each menu item will be added above the current one.
6. Select LinkItem01 and click on the down arrow button to move the item down once. Select LinkItem02
and click on the down arrow twice to move it down two positions.
9. Click OK to close and save the menus.
The C1Menu control updates with three new static menu items.
Next, we'll add dynamic menus to our C1Menu control.
Adding Sub Menu Items
1. Open the C1Menu Designer Form.
2. Right-click on Menu Item 1 and select Add Child then select Link Item.
A link item appears as a sub-menu of Menu Item 1.
3. Right-click on LinkItem01, select Add Child then select Link Item.
Another link item appears above LinkItem01 as a sub-menu of Menu Item 1.
To add more sub-menus to a specific menu item select the menu item where you want to place the sub-
menu and select Add Child.
4. Click OK to save and close the menus we added in the C1Menu Designer Form.
5. Press F5 to run the project.
29
6. Mouse over Menu Item 1 to expose the sub-menu items we added in the previous steps.
Notice how the menu items backcolor changes to blue and its forecolor to white when we mouse over
them. This is because the property, UseEmbeddedVisualStyles is set to True. If we set this property to
False, the style is removed from the C1Menu control.
Adding a URL to the Link Item
1. Select Menu Item 1 in the C1Menu Designer Form and locate the NavigateUrl property and enter the
text, "http://www.componentone.com".
2. Click OK to save and close the C1Menu Designer Form.
3. Build the project.
4. Click on Menu Item 1 and the Web Site for ComponentOne appears.
Specifying a target for the link items navigation
1. Select Menu Item 1 in the C1Menu Designer Form and enter, main, next to the Target property in the
property grid.
2. Click on the Source tab in your index.aspx Web page and add the iframe code in the body before the form
tag:
<iframe name="main" width="85%" height="50%">
</iframe>
3. Click on the Design tab and drag the Iframe below the C1Menu control.
5. Click on Menu Item 1 and the Web Site for ComponentOne appears below in the Iframe.
Changing the Menu Item's Position in the C1Menu Designer Form
In the previous lesson, Working with the C1Menu Designer Form(page 28), you learned how to add menu
items and sub-menu items using commands from the context menu in the editor and how to set the Text,
NavigateUrl, and LinkItem properties. In this lesson we'll work with the C1Menu Designer Form again, but
this time we'll show you the different methods you can use to move the menu items and sub-menu item's
position in the C1Menu Designer Form.
Drag and Drop Items
In the C1Menu Designer Form you can move items to a new location in the menu by dragging and dropping
the item from the treeview in the C1Menu Designer Form to the new location or by using the arrow buttons
show below.
To move an item using the arrow buttons
To move an item in the C1Menu Designer Form upward, click the up arrow button.
To move a sub-item outside the group of sub-items, click the left arrow button.
To move an item inside the group of sub-items, click the right arrow button.
To move an item in the C1Menu Designer Form downward, click the down button.
To move an item using the drag-and-drop method
Select the item you wish to move in the C1Menu Designer Form and drag it to the new location.
30
Changing Menu and Sub-menu Orientation
In this lesson you'll learn how easy it's to change the menu items and its sub-menu items orientation simply by
setting the Orientation and NestedGroupOrientation.
The default orientation for the C1Menu control is horizontal for the menu items and vertical for the sub-menu
items.
In this example we will use the same menu that we created in the preceding lesson, Working with the C1Menu
Designer Form (page 28).
31
To change the orientation for the sub-menus items to horizontal
1. Set the NestedGroupOrientation property to "Horizontal" for Menu Item 1.
3. Select Menu Item 1 and notice its submenu items appear horizontally.
To change the orientation for the menu items to vertical
Set the Orientation property to "Vertical".
To change the orienation for the sub-menu items to vertical
Set the NestedGroupOrientation property to "Vertical".
Adding Keyboard Support to C1Menu
In this lesson you will learn how easy it is to add an access key to the C1Menu. Access keys are used for
navigating the entire user interface and typically use the ALT key plus the specified access key.
Adding keyboard support to your menu
To add keyboard support to C1Menu, complete the following:
1. Select C1Menu1 in the C1Menu Designer Form and enter, "m", for the AccessKey property.
3. Press "alt+m" keys on your keyboard to bring the menu to focus. Use the arrow keys to navigate through
the menu and menu items. Press the ENTER key to open a link in the menu item. For example, pressing
ENTER for Menu Item 1 opens the Web Site.
32
Menu for ASP.NET AJAX Top Tips
The following top tips for Menu for ASP.NET will help you when you use the C1Menu control.
Tip 1: Use the ClickToOpen property to open submenu by mouse click event instead of mouse over.
Tip 2: You can use C1Menu as a context menu by setting the ContextMenu property.
The context menu can appear when the associated element is right-clicked or hovered.
To make the context menu appear when you right-click its associated element:
Set the ContextMenu property to True and specify the ContextElementID property. The menu will be shown
as a context menu when the associated element is right-clicked.
To make the context menu appear when you hover over its associated element:
Set the ContextMenu property to True and specify the HoverElementID property. The menu will be shown as
a context menu when the mouse is over the associated element.
Tip 3: Use the NestedGroupCheckable property to enable checkable child menu items.
To enable checkable child menu items set the NestedGroupCheckable property to True.
To disable checkable child menu items set the NestedGroupCheckable property to False.
To set the NestedGroupCheckable property at design time:
1. Open the C1Menu Tasks menu and select Edit Menu. The C1Menu Designer Form appears.
2. Select the Group item in the treeview and locate its NestedGroupCheckable property in the property grid.
3. Set the NestedGroupCheckable property to True.
Tip 4: Use WindowCollisionDetection property to allow the submenu to adjust its position to fit in the
window bounds.
Tip 5: Use the DisplayVisible property to set the C1Menu or C1MenuItem invisible.
When the controls Visible property is set to False, it will not render html code to the page. C1Menu supports
the client side object model (CSOM), it depends on the dom elements, so we dont suggest the user to set the
33
Visible property to hide the C1Menu or its items, we strongly recommend the user to use the DisplayVisible
property for showing/hiding the C1Menu or its items. If so, the entire DOM will be rendered and just set the
"display:none" to those items with DisplayVisible = False.
Design-Time Support
C1Menu provides smart tags, designer, and a bindings collection editor that offers rich design-time support
and simplifies working with the object model.
The following topics describe how to use C1Menus design-time environment to configure the C1Menu
control.
C1Menu Smart Tag
The C1Menu control includes a smart tag in Visual Studio. A smart tag represents a shortcut tasks menu that
provides the most commonly used properties in C1Menu.
To access the C1Menu Tasks menu, click on the smart tag in the upper-right corner of the C1Menu control.
This will open the C1Menu Tasks menu.
The C1Menu Tasks menu operates as follows:
Choose Data Source
Clicking on the Choose Data Source item opens a drop-down list where you can choose an existing data
source or select a new data source to bind to. See Applying Different Data Binding Methods (page 21) for
more information about data binding.
Configure Data Source
The Configure Data Source item only appears when C1Menu is bound to an XML data source. Clicking
on Configure Data Source opens a dialog box where you can indicate the XML data file and transform
file to use and specify an XPath expression.
Refresh Schema
The Refresh Schema item only appears when C1Menu is bound to a data source. Clicking on Refresh
Schema item refreshes the designer schema applied by the data source.
34
Edit Menu
Clicking on the Edit Menu item opens the C1Menu Designer Form where you can quickly configure
C1Menu's elements without having to scroll through its Properties window. You can load and save the
control's content and can add LinkItem, Header, Group, and Separator elements. For more information
on the C1 Menu Designer Form, see C1Menu Designer Form(page 35).
Edit Menu DataBindings
Clicking on the Edit Databindings itemopens the Bindings Collection Editor dialog box where you can
add and remove bindings and edit properties.
VisualStylePath
Displays the default path for the visual style.
UseEmbeddedVisualStyles
When the UseEmbeddedVisualStyles property is selected it enables you to use the embedded visual styles.
VisualStyle
Clicking the VisualStyle drop-down arrow enables you to select from different built-in visual styles. See
Visual Styles (page 49) for more information.
About
Clicking on the About item displays the About dialog box, which is helpful in finding the version number
of Menu for ASP.NET and online resources.
Edit Templates
Clicking on the Edit Templates itemswitches the C1Menu control to Template Editing Mode:
In Template Editing Mode, the C1Menu Tasks menu appears with different options:
Display
Selecting the Display drop-down arrow will open a list of template areas that can be customized:
35
Select a template from this list to open that template to be edited.
End Template Editing
Clicking the End Template Editing item will end Template Editing Mode and return you to the main
C1Menu Tasks menu.
C1Menu Designer Form
The C1Menu Designer Form dialog box lets you quickly configure C1Menu's elements without having to
scroll through the control's Properties window. Using the C1Menu Designer Form you can add, manipulate,
and delete LinkItem, Header, Group, and Separator elements in the C1Menu control and load and save the
control's content.
To access the C1Menu Designer Form dialog box select the Edit Menu item from the C1Menu Tasks menu
(see C1Menu Smart Tag (page 33) for details) or right-click on the C1Menu control at design time and select
Edit Menu. The designer, with items added, looks similar to the following:
36
The C1Menu Designer Form includes an Edit tab and a Preview tab. The Edit tab, pictured above, consists
of a left pane listing the order of added menu items. The right side of the Edit tab consists of a properties grid
allowing you to quickly customize added items.
The Preview tab allows you to view the C1Menu control and quickly preview any changes you are making:
C1Menu Designer Form Menu Bar
The C1Menu Designer Form menu lets you quickly configure C1Menu's elements. Using the C1Menu
Designer Form menu you can load and save the control's content and can add and remove LinkItem, Header,
Group, and Separator elements.
File Menu
The File menu looks like the following:
37
The File menu consists of the following options:
Button Name Description
Load from XML Opens an existing saved C1Menu layout XML file.
Save as XML Saves the current menu layout as an XML file.
Exit Closes the C1Menu Designer Form dialog box.
Edit Menu
The Edit menu looks similar to the following:
The Edit menu consists of the following options:
Insert Item Inserts a new item in the menu. Choices include the LinkItem ( ), Header
( ), Group ( ), and Separator ( ) elements.
Add Child Inserts a child item under the current item. Choices include the LinkItem
38
( ), Header ( ), Group ( ), and Separator ( ) elements.
Cut Cuts the currently selected item.
Copy Copies the currently selected item.
Paste Pastes a cut or copied item to the selected location.
Delete Deletes the currently selected item.
Rename Renames the currently selected item. Select this option and type in a new
name for the selected item.
Change to Type Changes the current item to an item of a different type. Choices include
the LinkItem ( ), Header ( ), Group ( ), and Separator ( ) elements.
C1Menu Designer Form Toolbar
Using the C1Menu Designer Form you can add and manipulate LinkItem, Header, Group, and Separator
elements. The C1Menu Designer Form toolbar looks the following image:
Note that if an option is not available for the particular item selected in the left Edit pane, that option will
appear grayed out. The following table describes the function of each item in the C1Menu Designer Form
toolbar.
Move Item Up Moves the current item up in the item order (so the second first-level item,
would become the first first-level item).
Move Item Down Moves the current item down (so the first first-level item, would become
the second first-level item).
Move Item Left Moves the current item up a level (so a second-level child item would
move up to become a first-level item).
Move Item Right Moves the current item down a level (so a first-level item would move
down to become a second-level child item).
Insert Child Item Inserts a child item under the current item. Choices include the LinkItem
39
C1Menu Designer Form Context Menu
The C1Menu Designer Form context menu lets you quickly configure C1Menu's elements. Using the
C1Menu Designer Form you can load and save the control's content and can add and remove LinkItem,
Header, Group, and Separator elements.
Access the C1Menu Designer Form context menu by right-clicking in the left pane of the Edit tab. The
context menu will look similar to the following:
The following table describes the function of each item in the C1Menu Designer Form context menu.
Add Child Inserts a child item under the current item. Choices include the LinkItem
Rename Renames the currently selected item. Select this option and type in a new
name for the selected item.
C1Menu Bindings Collection Editor
The Bindings Collection Editor dialog box lets you easily define the relationship between a data item and the
menu item it is bound to. You can access the Bindings Collection Editor dialog box by selecting the ellipses
button next to the DataBindings property in the Properties window, or by selecting the Edit Databindings
item from the C1Menu Tasks menu.
40
The Bindings Collection Editor dialog box will appear similar to the following:
The Bindings Collection Editor consists of a drop-down box where you can choose an existing item to add, a
left-side list box listing added items, and a right-side properties grid where you can change the data and
databinding properties for that item.
Note that any changes you make in the Bindings Collection Editor will be reflected in the <DataBindings>
tag in the Source view, for example:
<cc1:c1menu id="C1Menu1" runat="server" datasourceid="SiteMapDataSource1"
visualstyle="Default" visualstylepath="~/C1WebControls/C1Menu/VisualStyles">
<DataBindings>
<cc1:C1MenuItemBinding DataMember="SiteMapNode" Depth="5"
NestedGroupHeight="" NestedGroupWidth="" />
</DataBindings>
</cc1:c1menu>
For more information about data binding, see Applying Different Data Binding Methods (page 21).
Menu Types
Typically top-level or submenus are used to create a navigation system, but the C1Menu control extends the
menu functionality to create menus with groups so items can be organized into categories
This section details the common types of menus you can create using the C1Menu control.
41
Top-level menu
The top level menu is the main menu. It consists of menu items which are arranged on a horizontal or vertical
menu bar. Each menu item may or may not contain a list of submenu items. A top-level menu is always visible
on the form. Typically top-level menus have 15 menu items or less.
A typical top-level menu looks like the following:
Drop-down Menu
The menu bar contains all of the drop-down menus and submenus in your application. Each menu in the
menu bar is represented by its menu title.
Submenus or drop-down menus are additional menu items that appear within a menu item. Submenu items
appear when you hover or click on the menu item on the top-level menu or submenu level. Depending on the
style of the menu, an arrow or some other graphic is used to indicate when the menu item opens the submenu
items. A submenu can have a submenu and so on.
To see how to create submenus see, Create Submenus (page 74).
Group Menu
Grouped menus are multiple sets of menu items organized into one or more categories. The menu items in a
group share a common function. Each group may include a heading item type that represents the category
name for the group. For more information on the different kinds of heading items see, Header Items (page 44).
Typically group menus appear as drop-down menus with at least one heading item to label the grouped menu
items. Groupings can be separated by heading items or separator items.
A typical grouped menu looks like the following.
42
In the preceding grouped menu, it includes two header items; one for each group.
To see how to create a group menu, see Create a Group Menu (page 77).
Context Menu
The C1Menu control can be used to create a context menu by setting two simple properties:
ContextElementID and ContextMenu properties. When the ContextMenu property is set to true it has the
C1Menu control behave as a context menu (also known as shortcut menus).
Context menus appear on the screen in response to a right-click of the mouse. They commonly hold used
commands (menu items) for a specific area of an application.
Usage of the Context Menu Control
C1Menus context menu can be associated with any HTML or Web control by assigning the ID of the control
you wish to associate it with to the ContextElementID property.
Context Menu Layout
The default orientation for a context menu is vertical.
Context Menu Example
43
To see how to create a context menu and associate it with a control see, Create a Context Menu and Attach it
to a Control (page 79).
Menu Item Types
C1Menu control is made up of a tree of menu items represented by C1MenuItemBase and C1MenuItem
objects. The C1MenuItemBase object represents all menu item types: link items, header items, separator items,
and group items. The C1MenuItem object represents link type items and provides the following three
properties specific to link items: NavigateUrl property, Target property, and Text property.
Menu items at the top level hierarchy (level 0) are called menu items. A menu item that has a parent menu
item is called a child menu item. All menu items and child menu items are stored in the Items collection.
C1Menus items can be a link item, header item, group item, or separator item. The default menu item is a link
item. To create a group item, header item or separator item, the Group, Header, or Separator is set to true.
Link Items
Link items are menu items that contain links to help users move to other pages, within a document or within a
site, or to other pages on the web. When the link item is activated by a user action, it can navigate to another
Web page indicated by the NavigateUrl property or it can open a new window if the Target property is
specified. Elements such as Text, graphic/multimedia buttons or image maps can be associated with the link
items.
Use the NavigateUrl property to link menu item to a URL. You can assign the URL to the NavigateUrl
property in one of the following ways:
If the URL is within the same ASP.NET application use the "~" before the URL like the following:
NavigateUrl = "~/Default2.aspx"
If the URL is an external URL, then use the protocol, for example:
NavigateUrl = "http://www.componentone.com"
The Target property takes precedence over the NavigateUrl property so if both properties are specified, the
content of the specified URL page with be displayed in the specified window or frame when the user clicks on
the item. If the user only specifies the URL for the NavigateUrl property then when the user clicks on the item
the current page will transfer to the specified URL page.
Link items can be combined with heading items, group items, and separator items to create a well designed
navigational menu system. A link item can have submenu items. A link item type can have four states for the
link items: active, disabled, focus, and hover. Each state is defined by applying the appropriate CSS styles and
specifying whether or not the link item is enabled.
Link Item States and Styles
Link Item State CSS Selector Description
Active .C1Menu_VisualStyleName
a:active
The link item is in active state when its enabled
and the mouse pointer or other device isnt resting
on it.
Disabled .C1Menu_VisualStyleName
.disabled-item span.C1TextNode
The link item is in disabled state when enabled is
set to false.
Focus .C1Menu_VisualStyle a:focus, The link item is in focus state when the mouse
pointer is hovering over the C1Menu.
44
Hover .C1Menu_VisualStyleName
a:hover,
The link item is in focus state when the mouse
pointer is hovering over the C1MenuItem.
Link SubItem States and Styles
Link Item State CSS Selector Description
Active .C1Menu_VisualStyleName
.C1SubMenu .c1-h-flow a:hover,
The link item is in active state when its enabled
and the mouse pointer or other device isnt resting
on it.
Disabled .C1Menu_VisualStyleName
.C1SubMenu .c1-h-flow .disabled-
item span.C1TextNode
The link item is in disabled state when enabled is
set to false.
Focus .C1Menu_VisualStyle .C1SubMenu
.c1-h-flow a:focus
The link item is in focus state when the mouse
pointer is hovering over the C1Menu.
Hover .C1Menu_VisualStyleName
.C1SubMenu .c1-h-flow a:hover,
The link item is in hovering state when the mouse
pointer is hovering over the C1MenuItem.
Header Items
A header item helps define menu items into categories so it is easier to retrieve information from the menu. A
header item is typically used in grouped menus as a group title like the following example.
The header items heading tags h1-h6, ranging from large to small font size, can be specified using the
HeaderType property. The following image illustrates the different type of heading tags, h1-h6.
45
Each heading tag for header items can be styled by modifying its CSS style. The following table lists the CSS
selector style for each heading tag.
Header Item Style CSS Selector Description
h1 .C1Menu_VisualStyleName .c1-h-
flow h1.C1Heading
{
display: block;
margin: 0;
padding: 0;
line-height:1em;
font-size:1.5em;
width:auto;
background:#999
url(Images/arcticfox_header_bg.gif)
repeat-x top left;
}
Defines the display, margin, padding, line-
height, font-size, width, and background for
the heading 1 tag in a horizontal menu.
flow h2.C1Heading
{
display: block;
margin: 0;
padding: 0;
line-height:1em;
font-size:1.2em;
width:auto;
background:#999
repeat-x top left;
}
flow h3.C1Heading
{
display: block;
margin: 0;
46
padding: 0;
line-height:1em;
font-size:1.1em;
width:auto;
background:#999
repeat-x top left;
}
flow h4.C1Heading
{
display: block;
margin: 0;
padding: 0;
line-height:1em;
font-size:1.0em;
width:auto;
background:#999
repeat-x top left;
}
flow h5.C1Heading
{
display: block;
margin: 0;
padding: 0;
line-height:1em;
font-size:0.9em;
width:auto;
background:#999
repeat-x top left;
}
flow h6.C1Heading
{
display: block;
margin: 0;
padding: 0;
line-height:1em;
font-size:0.8em;
width:auto;
47
background:#999
repeat-x top left;
}
Horizontal header .C1Menu_VisualStyleName
.disabled-item span.C1TextNode
text .C1Menu_ArcticFoxNew .C1Heading
span.C1TextNode
{
padding:.5em .2em;
display:block;
font-weight:900;
color:#fff;
line-height:1em;
font-size:1em;
}
Defines the styles for the text in the heading
items.
Group Items
Group items are used for larger menus that include multiple lists of items with distinct categories. A group
item is defined when Group property is set to true. A group item acts like a container to hold related menu
items in a group. Unlike link items, the text doesnt appear on the group menu item. There are no styles or
states for group items.
A group item can contain group, link, separator, and header child items. Link items and header items are the
two common items used within a group item. Good usage of group items can help facilitate scanning and
memory.
The following table lists the elements that can be styled for the horizontal or vertical subgroup menu:
Separator Item Style CSS Selector Description
Vertical Subgroup .C1Menu_VisualStyleName .c1-v-flow
.C1SubGroup
Common styles such as height, width,
padding, background, and margin can
be applied to the vertical subgroup by
assigning its selector.
Horizontal Subgroup .C1Menu_VisualStyleName .c1-h-flow
.C1SubGroup
be applied to the horizontal subgroup
by assigning its selector.
Separator Items
Separator items are the horizontal or vertical dividing lines that visually separate groups of related items on a
drop-down menu, submenu, grouped menu, or context menu. A horizontal line is used on horizontal menus
and a vertical line is used on vertical menus. Separators are also known as delimiters. Proper use of separators
48
can help chunk the information on a menu and make it easier to memorize. Styling such as the height, width,
padding, etc, can be applied to horizontal or vertical separators through CSS styles.
To add a separator item between menu items, set the Separator property to True.
The following table lists the elements that can be styled for the horizontal or vertical separator:
Separator Item Style CSS Selector Description
Vertical Separator .C1Menu_VisualStyleName .c1-v-flow
span.C1Separator
be applied to the vertical separator by
assigning the .C1Menu_VisualStyle
.c1-v-flow span.C1Separator selector.
Horizontal Separator .C1Menu_VisualStyleName .c1-h-flow
span.C1Separator
be applied to the horizontal separator
by assigning the .C1Menu_VisualStyle
.c1-h-flow span.C1Separator selector.
Menu Creation
A menu system can be created using one of the following methods:
Static creation using declarative syntax
Dynamic creation using a constructor to create new instances of the C1MenuItem class.
Data source creation through binding C1Menu to a SiteMapDataSource, XMLDataSource, or an
AccessDataSource.
Static Menu Creation
A static menu is the simplest way to create the menu structure.
You can use the C1Menu Designer Form designer to build the menu system or you can use declarative syntax
in the .aspx file to specify the menu items. To display static menu items using declarative syntax, first nest
opening and closing <Item> tags between opening and closing tags of the Menu control. Next, create the
menu structure by nesting <asp:MenuItem> elements between opeing and closing <Items> tags. Each
<asp:MenuItem> element represents a menu item in the control and maps to a MenuItem object. For more
information about the menu designer, see Working with the C1Menu Designer Form(page 28). For more
information on how to create a static menu using the designer or using declarative syntax, see Create
Submenus (page 74).
Dynamic Menu Creation
Dynamic menus can be created on the server side or client side. When creating dynamic menus on the server
side, use a constructor to dynamically create a new instance of the C1MenuItem class. For client-side, the
CreateInstance constructor can be used to dynamically create a new instance of the C1Menu control. For
example the follow script creates a new menu control on the client side:
var aMenu = C1.Web.C1Menu.createInstance ();
document.body.appendChild(aMenu.element);
49
Data Source Menu Creation
Menu items can be created from a hierarchal data source control such as an XMLDataSource or
SiteMapDataSource. This allows you to update the menu items without having to edit code. Menu items can
also be bound to a non-hierarchal control such as an AccessDataSource component. To see how to use
different data binding methods with C1Menu, see Applying Different Data Binding Methods (page 21).
Menu Appearance
C1Menu is designed to make customization easy for you. Without writing any code, you can control the
menus appearance, layout, and content. C1Menu provides five different .css files and images that you can use
to modify to create a custom theme or you can customize each menu element through CSS styles. C1Menu
has one CSS class property, CssClass which is used to control the appearance of the item in all states.
Menu Styles
Different styles can be applied to the menu items to create a customized appearance. Any element in the
C1Menu control can be styled as well as the menu item states. C1Menu provides five different .css files that
you can use to help you quickly create a unique look for your menu. It is recommended to use either a separate
.css file or in line CSS styles, but not both. C1Menu has a CSSClass property that enables you to assign a style
sheet class to the C1Menu control.
Visual Styles
You can create your own custom theme or choose from one of the five built-in themes: ArcticFox, Vista,
Office2007Black, Office2007Blue, and Office2007Silver. The names of the themes are recognized by a
logical/readable visual style name. Each theme includes one .css file and a set of images used by the CSS
classes, for example, arrows, icons, buttons, etc. The theme name can be set by applying the appropriate theme
name to the VisualStyle property. When creating your own theme its recommended to use one of the five
existing styles and modify that. To see how to create a custom theme by modifying an existing theme see,
Creating a Custom Visual Style (page 85).
Note: Additional styles are installed with the product, but they must be added as custom visual styles at this time.
These styles include: BureauBlack, Evergreen, ExpressionDark, RanierOrange, RanierPurple, ShinyBlue,
and Windows7. See Creating a Custom Visual Style (page 85) for more information.
The themes can be defined as a resource theme or a file theme. The theme with the .CSS file in resource is
named Resource Theme. The theme with CSS in external file is named File Theme. All external file themes
are installed in C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles.
Custom external themes can be created using an existing theme and modifying its styles and images in the
appropriate .css file. The default location path for creating custom external themes is
\VisualStyles\CustomThemeName\C1Menu.
C1Menu includes a listbox of available visual styles in the C1Menu Tasks menu to quickly change C1Menus
theme. The C1Menu Tasks menu enables you to choose from one of the five themes to apply to the C1Menu
control. The visual styles can also be applied to the C1Menu control by setting its VisualStyle property in the
Properties window.
Accessing the Visual Styles at design time
The visual styles are accessible in one of two ways at design time:
Select Visual Styles drop-down listbox from C1Menu Tasks menu.
50
Select Visual Styles drop-down listbox from C1Menus Properties Window.
Available Visual Styles
The following visual styles are available for C1Menu:
Visual Style Preview
ArcticFox
Office2007Black
Office2007Blue
Office2007Silver
Vista
VistaBlack
Templates
Templates can be used to embed other HTML controls in a menu item or you can create custom tags. The
following C1Menu displays embedded HTML controls in the menu items:
C1Menu supports common and individual types of templates. It includes special template designers for
customizing the top level menu items, child menu items, and all menu items that do not include defined
templates. Creating templates of different types allows you to customize the appearance or layout of a menu
control or each element inside it.
Top-Level Menu Template
C1Menu includes a special designer for customizing the menu items in the top-level menu.
To add a template for the top-level menu items, complete the following:
1. Add menu items to C1Menu using the C1Menu Designer Form editor. Remove the default text for the
first menu item so your menu appears similar to the following:
51
2. Click OK to save and close the C1Menu Designer Form dialog box.
3. Switch to source view and add the following HTML markup right above the <Items> tag:
<TopItemsTemplate>
<%#Eval("Text") == "" ? ("<font color=\"green\">empty text</font>") :
("<i><b>" + Eval("Text") + "</b></i>")%>
</TopItemsTemplate>
4. Select the Design tab to switch to design view and notice the Databound items appear on the C1Menu
control.
5. Run you project and notice the new text and font style for the menu items.
Items Template
To add a template for all menu items that dont include other defined templates, complete the following:
1. Add menu items to C1Menu using the C1Menu Designer Form editor Remove the default text for the
first menu item so your menu appears similar to the following:
52
3. Switch to source view and add the following HTML markup right above the <Items> tag:
<ItemsTemplate>
<%#Eval("Text") == "" ? ("<font color=\"green\">empty text</font>") :
("<i><b>" + Eval("Text") + "</b></i>")%>
</ItemsTemplate>
4. Select the Design tab to switch to design view and notice the Databound items appear on the C1Menu
control.
5. Run you project and notice the new text and font style for the menu items.
Child Items Template
To add a template for all child menu items, complete the following:
1. Add a child item to the C1Menu control.
2. Open the C1Menu Tasks menu from the smart tag and select Edit Templates. The C1Menu Tasks menu
changes to Template Editing Mode.
3. Select ChildItemsTemplate from the Display drop-down list box.
53
4. Drag and drop two DropDownList controls into the ChildItemsTemplate box. If necessary adjust the
size of the DropDownList controls.
5. Select End Template Editing from C1Menu Tasks menu.
6. Run the project and select the child item.
The two embedded DropDownList controls appear in C1Menus sub menu item.
Individual Menu Items Template
If you would like to define a unique template for individual menu items you can assign the Template property
to the item you wish to customize. If a global template such as the ItemsTemplate is assigned to the C1Menu
control the per-item template overrides it.
The following image shows the same menus with the first one showing the unique templates used for the child
item in the first menu item and the second menu item.
54
To add a unique template for individual menu items, complete the following steps:
1. Open the C1Menu Designer Form and add a few link items with child link items so it appears similar to
the following:
3. Switch to source view and locate the child link item for LinkItem, add the <Template></Template>
tags and the HTML markup within the <Template></Template> so it appears like the following:
<cc1:C1Menu ID="C1Menu1" runat="server"
VisualStylePath="~/C1WebControls/VisualStyles">
<Items>
<cc1:C1MenuItem runat="server" Text="LinkItem1">
<Items>
<Template>
<fieldset>
<legend>Suppliers:</legend>
Supplier ID: <input type="text" size="20" /><br />
Company Name: <input type="text" size="17" /><br />
Contact Name: <input type="text" size="18" /><br />
Contact Title: <input type="text" size="20" /><br />
Address: <input type="text" size="20" /><br />
City: <input type="text" size="20" /><br />
55
Region: <input type="text" size="20" /><br />
Postal Code: <input type="text" size="20" /><br />
Country: <input type="text" size="20" /><br />
Phone: <input type="text" size="20" /><br />
Fax: <input type="text" size="20" />
</fieldset>
</Template>
</cc1:C1MenuItem>
This will assign the template to the first child item in LinkItem1.
4. In source view locate the child link item for LinkItem2 and add the <Template></Template> tags and
the HTML markup within the <Template></Template> so it appears like the following::
<Items>
<Template>
<fieldset>
<legend>Shippers:</legend>
Shipper ID: <input type="text" size="20" /><br />
Company Name: <input type="text" size="15" /><br
/>
Phone: <input type="text" size="15" />
</fieldset>
</Template>
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
5. Run the project and notice the field sets that appear for the first child item in the first menu item and the
first child item in the second menu item.
Menu Item Images
You can add images to the normal, hover, and disabled menu item states using the following properties:
ImageUrl, DisabledImageUrl, and MouseOverImageUrl.
To determine how the image is rendered, to the left or right of the menu item use the ImagePosition property.
Menu Layout
The C1Menu control can be rendered horizontally or vertically by setting its Orientation property. The layout
for the Submenu items can also be controlled using the NestedGroupOrientation property. For more
information on setting menu layout see, Changing Menu and Sub-menu Orientation (page 30).
Horizontal Menu Layout
In the following menu, the Orientation property is set to "Horizontal".
56
Vertical Menu Layout
In the following menu, the Orientation property is set to "Vertical".
Horizontal Menu and Horizontal Submenu Layout
In the following menu, the Orientation property is set to "Horizontal" and the NestedGroupOrientation
property is set to "Horizontal".
Horizontal Menu and Vertical Submenu Layout
In the following menu, the Orientation property is set to "Horizontal" and the NestedGroupOrientation
property is set to "Vertical".
Vertical Menu and Vertical Submenu Layout
In the following menu, the Orientation property is set to "Vertical" and the NestedGroupOrientation property
is set to "Vertical".
57
Vertical Menu and Horizontal Submenu Layout
In the following menu, the Orientation property is set to "Vertical" and the NestedGroupOrientation property
is set to "Horizontal".
Menu Behavior
The following topics discuss how you can change the way C1Menu behaves such as its animation, scrolling,
and navigation.
Animation
The following topics detail C1Menus animation and transition effects for collapsing and expanding menu
items.
Expand and Collapse Animation Effects
You can change how drop-down menus or submenu items expand or collapse by using one of the 25 built-in
animation effects. These animation effects are available through the CollapseAnimation and
ExpandAnimation properties. Expand and collapse animation effects are special visual effects that occur while
the menu items expand or collapse. For each expand or collapse effect you can specify how long the animation
lasts by specifying an integer value for the ExpandDuration and CollapseDuration properties. The duration is
measure in milliseconds. By default, the menu items expand and collapse without an animation effect.
Different animation effects can be applied to each drop-down menu, but it is recommended to use only two
animation effects: one for the collapsed menu items and one for the expanded menu items. Typically the
animations that scroll in, fade in, fold in, open, or drop in are used on expanding menu items and the
animations that scroll out, fade out, fold out, close, or drop out, are used on collapsing menu items. To disable
an animation effect for the collapsed menu items or expanded menu items, set the CollapseAnimation or
ExpandAnimation property to "None".
The following table lists and defines each animation effect:
Animation Name Animation Description
None(Default) Disables animation behavior for the expanding
or collapsing menu items.
FadeIn Performs a fade in from the current opacity to
the maximum opacity.
FadeOut Performs a fade out from the current opacity
to the maximum opacity.
ScrollInFromTop Scrolls down from the top to bottom.
ScrollInFromRight Scrolls in from the right end to the left end.
ScrollInFromBottom Scrolls in from bottom to top.
58
ScrollInFromLeft Scrolls in from the left end of the menu item
to the right end of the menu item.
ScrollOutToTop Scrolls out of view from the bottom to the top
of the menu.
ScrollOutToRight Scrolls out of view from left to right.
ScrollOutToBottom Its scrolls out of view from the top down to
the bottom.
ScrollOutToLeft Scrolls from the right side toward the left side
of the menu.
Fold Folds the menu.
UnFold Unfolds the menu.
OpenVertically Opens the menu vertically from the center of
the menu.
CloseVertically Closes the menu vertically from the center of
the menu.
OpenHorizontally Opens the menu horizontally from left to
right.
CloseHorizontally Closes the menu horizonally from right to left.
Shake Moves the menu back and fourth from left to
right.
Bounce Moves the menu items up and down.
DropInFromTop The menu items start moving upward from its
default location to near the top of the page.
The menu items opacity decreases as it
moves further upward away from its default
location.
DropInFromRight The menu items appear to the far left side of
the menu bar and move toward the right and
stop once it reaches its default location(the
location of its associated parent menu item).
The moving menu items opacity increases as
it moves closer to its default location.
DropInFromBottom Drops downward with the bottom of the menu
items appearing first. The menus opacity
increases as it moves down to meet with its
associated parent menu item.
DropInFromLeft For a horizontal menu bar, the vertical drop-
down menu drops in from the far right and
moves to the left of the screen to meet the
parent menu item.
DropOutToTop Moves upward from bottom to the top of the
menu bar and gradually fades out as its
moving upward.
DropOutToRight Moves to the right of the parent menu and
gradually fades as its moving to the right.
59
DropOutToBottom Drops downward and the opacity of the menu
gradually decreases as its moving further
down the page.
DropOutToLeft Drops out toward the left of the parent menu
and moves toward the left page. The menus
opacity gradually lessens as it moves further
to the left of the page.
Expand and Collapse Transitions
You can enhance your menus appeal by adding transition effects between expand or collapse animated states
to create a seamless flow between these states. C1Menu includes thirty-one transition effects that enable you to
make the transitions in the collapse or expand animations more visually compelling. Instead of expanding
menu items unfolding and collapsing menu items folding, the expanding menu items or collapsing menu items
might bounce in as they are unfolding and bounce out as they are folding. These transitions are special effects
that occur when a menu expands or collapses or stops expanding and collapsing, whereas the animation effects
occur while the menu is expanding and collapsing. To use a transition effect, the CollapseAnimation or
ExpandAnimation property must be set to an animation type before you set the CollapseEasing or
ExpandEasing properties. By default the CollapseEasing or ExpandEasing properties are set to EaseLinear
and the menu expands or collapses with a smooth linear transition effect.
The following transitions effects are available for you to animate the transition between states so it looks
smooth to help keep the user oriented while menus are expanding or collapsing:
Transition Name Transition Description
EaseLinear(default) Linear easing. Moves smoothly from start to
end without acceleration or deceleration
EaseOutElastic Elastic easing out. Begins quickly and then
decelerates.
EaseInElastic Elastic easing in. Begins slowly and then
accelerates.
EaseInOutElastic Elastic easing in and out. Begins slowly,
accelerates halfway, and then decelerates.
EastOutBounce Bouncing easing out. Begins quickly and then
decelerates. The number of bounces is related
to the duration: longer durations produce
more bounces.
EaseInBounce Bouncing easing in. Begins slowly and then
accelerates. The number of bounces is related
to the duration: longer durations produce
more bounces.
EaseInOutBounce Bouncing easing in and out. Begins slowly,
accelerates until halfway, and then
decelerates.
EaseOutExpo Exponential easing out. Begins quickly and
then decelerates.
EaseInExpo Exponential easing in. Begins slowly and then
accelerates.
EaseInOutExpo Exponential easing in and out. Begins slowly,
60
decelerates.
EaseOutQuad Quadratic easing out. Begins at full velocity
then decelerates to zero.
EaseInQuad Quadratic easing in. Begins at zero velocity
then slowly accelerates.
EaseInOutQuad Quadratic easing in and out. Begins slowly,
decelerates to zero velocity again.
EaseOutSine Sinusoidal easing out. Begins quickly and then
decelerates.
EaseInSine Sinusoidal easing in. Begins slowly and then
accelerates.
EaseInOutSine Sinusoidal easing in and out. Begins slowly,
decelerates.
EaseInOutCirc Circular easing in and out. Begins slowly,
decelerates.
EaseOutCirc Circular easing out. Begins quickly and then
decelerates.
EaseInCirc Circular easing in. Begins slowly and then
accelerates.
EaseInOutCubic Cubic easing in and out. Begins at zero
velocity, accelerates until halfway, and then
EaseInCubic Cubic easing in. Begins at zero velocity and
then accelerates.
EaseOutCubic Cubic easing in and out. Begins at full velocity
and then decelerates to zero.
EaseInQuint Quintic easing in. Begins at zero speed then
accelerates.
EaseInOutQuint Quintic easing in and out. Begins at zero
speed, accelerates until halfway, and then
decelerates to zero
EaseOutQuint Quintic easing out. Begins at full velocity and
then decelerates to zero.
EaseOutBack Back easing out. Begins quickly and then
decelerates.
EaseInBack Back easing in. Begins slowly and then
accelerates.
EaseInOutBack Back easing in and out. Begins slowly,
decelerates.
EaseOutQuart Quartic easing out. Begins quickly and then
decelerates.
61
EaseInQuart Quartic easing in. Begins slowly and then
accelerates.
EaseInOutQuart Quartic easing in and out. Begins at zero
velocity, accelerates until halfway, and then
Expand and Collapse Duration
Timing plays an important role for animation effects. You need to know when to start the animation and how
long the animation lasts. C1Menu provides duration and delay properties so you can specify the timing for
your menu animation effects. Both the duration and delay properties are set to measure in milliseconds.
You can control when the expand effect or collapse effect starts by specifying a delay time value for the
ExpandDelay and CollapseDelay properties. The default setting for both the ExpandDelay and CollapseDelay
properties is 100 milliseconds which is .1 seconds.
Once the expand or collapse process starts, the animation effect begins if the ExpandAnimation or
CollapseAnimationproperty is set to an animation type. You can control how long the animation and
transition effects last by specifying an integer value for the CollapseDuration and ExpandDuration. The
default delay time value for both properties is 500 milliseconds which is half of a second.
Menu Scrolling
Scrolling menus add stylish, animated scrolling behavior to overlong menus so they can contain more links
than would otherwise be possible.
C1Menu can scroll top level menus, sub menus, and sub groups. You can set the scroll mode option to button
click scrolling, button hover scrolling, edge hover scrolling, or scroll bars.
Scroll Menu Types
C1Menu can scroll top level menu, sub menu and sub group.
Top Level Horizontal Scrolling
Top-level horizontal scrolling can be applied to horizontal menus when the following properties are set for the
ScrollSettings property: ScrollMode property is set to a button type and a width is specified for the
ScrollContentWidth property.
The following menu illustrates top-level horizontal scrollbars.
Sub Menu Vertical Scrolling
Vertical scrolling can be applied to vertical menu items when the following properties are set for the
ScrollSettings property: ScrollMode property is set to button, buttonhover, hover, or scrollbar, and a height is
specified for the ScrollContentHeight property.
The following menu illustrates vertical submenu scrolling:
62
Sub Group Scrolling
You can add scrolling to groups if there are many submenu items to prevent the submenu items from taking up
content space in the page. Scrolling menus ensure all links in the menu remain accessible to mouse even in
very small windows. For more information on how to apply sub group scrolling see, Add Scrolling to Vertical
Group (page 83).
Scroll Mode Options
You can use the ScrollSettings property to specify the following settings for the menu scrollbars:
Scroll Button Types
You can use the ScrollMode property to specify the type of scroll button. The following scroll button types
are available:
None
The None setting disables the scroll behavior.
Buttons
The Buttons setting has two arrow buttons, one for the left and one for the right side of the menu bar
or menu item. An arrow button appears in focus when you click on the button.
Buttons Hover
The Buttons Hover setting has the same appearance as the Buttons setting. When you hover over the
arrow button the button appears in focus.
63
Hover
The Hover setting has no buttons. To make the menu scroll, hover on one of the end sides of the
menu bar or menu item.
ScrollBar
The ScrollBar setting includes a horizontal and vertical scrollbar by default.
Scroll Button Position
You can use the ScrollButtonAlign property to specify whether the buttons appear on both sides, the start
side, or the end side.
Both Sides
Start Side
End Side
64
Scroll Content Height and Width
You can use the ScrollContentHeight and ScrollContentWidth to specify the height for vertical
scrollbars and the width for horizontal scrollbars. To see how to use the ScrollContentHeight property,
see Add Scrolling to Vertical Top Level Menu (page 81). To see how to use the ScrollContentWidth
property, see Add Scrolling to Vertical Sub Menu (page 82).
Scroll Button Orientation
You can use the ScrollOrientation to specify whether the scrolling is horizontal or vertical. For a
horizontal menu you would set the ScrollOrientation property to "Horizontal" and for a vertical menu
you would set the ScrollOrientation property to "Vertical".
Scroll Step
The ScrollStep property controls how each menu item moves while scrolling. The lower the step the
slower the menu items move. The default scroll step is 4 which means four pixels move in sync while you
are scrolling. To make one menu item move at a time, set the ScrollStep to "1".
Scroll Button Styles
You can apply unique styles for each type of scroll button. Additionally, you can apply styles to the different
states of the scrollbar buttons.
The following table lists the available styles for each scrollbar button:
Scroll Button Style Description Example
BottomButtonActiveCssClass Gets the Css class for the
active scroll button.
.C1Menu_VisualStyleName_ScrollButtonActiveBot
tom
}
}
BottomButtonCssClass Gets the Css class for the
bottom scroll button.
.C1Menu_VisualStyleName_ScrollButtonBottom
{
margin:0 0 0 0;
background:#c7c7c7
url(images/arrow_scroll_bottom.gif) center
center no-repeat;
border-top:solid 1px #999999;
}
BottomButtonDisabledCssClass Gets the Css clss for the
bottom disabled scroll
button.
.C1Menu_VisualStyleName_ScrollButtonDisabled
Bottom
}
65
}
LeftButtonActiveCssClass Gets the Css class for the
left active scroll button.
.C1Menu_VisualStyleName_ScrollButtonActiveLef
t
}
}
LeftButtonCssClass Gets the Css class for the
left scroll button.
.C1Menu_VisualStyleName_ScrollButtonLeft
}
}
LeftButtonDisabledCssClass Gets the Css class for the
left disabled scroll button.
.C1Menu_VisualStyleName_ScrollButtonDisabledL
eft
}
}
RightButtonActiveCssClass Gets the Css class for the
right active scroll button.
.C1Menu_VisualStyleName_ScrollButtonActiveRig
ht
}
}
RightButtonCssClass Gets the Css class for the
right scroll button css
class.
.C1Menu_VisualStyleName_ScrollButtonLeft
}
}
RightButtonDisabledCssClass Gets the Css class for the
disabled scroll button.
.C1Menu_VisualStyleName_ScrollButtonDisabledL
eft
}
}
TopButtonActiveCssClass Gets the Css class for the
active scroll button.
.C1Menu_VisualStyleName_ScrollButtonActiveTop
}
}
TopButtonCssClass Gets the Css class for the
top scroll button.
.C1Menu_VisualStyleName_ScrollButtonTop
}
}
TopButtonDisabledCssClass Gets the Css class for the
disabled scroll button.
.C1Menu_VisualStyleName_ScrollButtonDisabledT
op
}
}
Menu Navigation and Shortcuts
The two common approaches for navigating menu systems are:
Point and click using the mouse
66
Arrow keys using the keyboard
Mouse Navigation
When the user clicks a menu item, the Menu control can either navigate to a linked Web page or simply post
back to the server. If the NavigateUrl property of a menu item is set, the Menu control navigates to the linked
page; otherwise, it posts the page back to the server for processing. By default, a linked page is displayed in the
same window or frame as the Menu control. To display the linked content in a different window or frame, use
the Target property of the Menu control.
Keyboard Navigation
C1Menu supports access keys to enhance the users navigation of your menu items. Access keys are used for
navigating through the menu and typically use the ALT key plus the specified key.
You can add access keys to any of the menu items and submenu items using the AccessKey property. One
character should be used when you assign access keys to menu items.
Working with the Client-Side Menu
C1Menu client side has a very rich client-side object mode since most of its members are identical to the
members in the server-side control.
When a C1Menu control is rendered, an instance of the client-side menu will be created automatically. This
means that you can enjoy the convenience of accessing properties and methods of the C1Menu control
without having to postback to the server.
For example, suppose a C1Menu control with the name, C1Menu1 is hosted on the Web page, when the page
is rendered, a corresponding client menu object with the name C1Menu1_Client will be created.
You can get the reference for a C1Menu using the following client-side code:
var menu = $find("<%= C1Menu1.ClientID %>");
Using C1Menus client-side code, you can implement many features in your Web page without the need to
send information to the Web server which takes time. Thus, using C1Menus client-side object model can
increase the efficiency of your Web site.
The following topics describe the available client-side properties, methods, and events.
Client-Side Properties
The following conventions are used when accessing the client object properties:
Server properties on the client are implemented as a pair of Get- and Set- methods.
Method names must start with "get_" (Get-method) and "set_" (Set-method) followed with the server
property name. The first letter of the server property name must be lowercase (camel case).
Client-Side Methods
C1Menu includes a rich client-side object model in which several properties can be set on the client side. For
information about these client-side methods and what properties can be set on the client side, see the
C1Menu1 Reference.
Client-Side Events
C1Menu includes several client-side events that allow you to manipulate the menu items in the C1Menu
control when an action such as clicking the item, hovering over or out of the menu item occurs. You can
access these client-side events from the Properties window. To create a new client-side event using the
67
Properties window, select the drop-down arrow next to a client-side event and select Add new client side
handler.
Once you've added the client-side handler, Visual Studio will add a script to the Source view. That script will
resemble the following:
<script id="ComponentOneClientScript" type="text/javascript">
function C1Menu1_OnClientItemMouseDown(item, domEvent){
//
// Put your code here.
//
};
</script>
Each of the client-side events requires two parameters: the ID that identifies the sender C1Menu, in this
example, C1Menu1, and an eventArgs that contains the data of the event.
You can use the sever-side properties, listed in the Client Side Event table, to specify the name of the
JavaScript function that will respond to a particular client-side event. For example, to assign a JavaScript
function called "ItemClick" to respond to the clicked item, you would set the OnClientItemClick property to
"ItemClick".
68
The following table lists the events that you can use in your client scripts. These properties are defined on the
server side, but the actual events or the name you declare for each JavaScript function are defined on the client
side.
Client Side Event table
Event Server-Side Property Name Event Name Description
OnClientItemBlur ItemBlur Fires on client side when menu item
looses focus.
OnClientItemChecked ItemChecked Fires on client side when menu item
is checked.
OnClientItemClick ItemClick Fires on client side when menu item
is clicked.
OnClientItemFocus ItemFocus Fires on client side when menu item
is focused.
OnClientItemMouseDown ItemMouseDown Fires on client side when mouse is
down on menu item.
OnClientItemMouseOut ItemMouseOut Fires on client side when mouse
becomes out of a menu item.
OnClientItemMouseOver ItemMouseOver Fires on client side when mouse is
over menu item.
OnClientItemUnChecked ItemUnChecked Fires on client side when menu item
is unchecked.
69
These events are useful for providing client-side interactivity. With these events you can provide more control
over C1Menu by controlling how the users interact with C1Menu. For example you can use the
ItemMouseOver event to prevent submenu items from expanding when the user mouses over menu items or
the ItemClick event to add, remove, or disable menu items when the user clicks on an existing menu item.
71
Menu for ASP.NET Samples
Please be advised that this ComponentOne software tool is accompanied by various sample projects and/or
demos which may make use of other development tools included with the ComponentOne Studios.
Samples can be accessed from the ComponentOne Sample Explorer. On your desktop, click the Start button
and then click ComponentOne | Studio for ASP.NET | Palomino Samples.
C# Sample
The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET
AJAX detail the C1Menu control's functionality:
Sample Description
Animation Showcases the different collapse and expand animation effects for
the C1Menu control.
Databinding Shows how to databind C1Menu to a SiteMapDataSource or
XMLDataSource.
Orientation Demonstrates how to change the menu and submenu orientation
for the C1Menu control on the client-side.
Scrolling Shows how to scroll top-level menus, submenu, and sub group.
Templates Demonstrates how to use templates with the C1Menu control.
VisualStyles Displays the built-in C1Menu control Visual Styles including
ArcticFox, Office2007Black, Office2007Blue, Office2007Silver, and
Vista.
Menu for ASP.NET Task-Based Help
The task-based help section assumes that you are familiar with programming in the Visual Studio ASP.NET
environment, and know how to use the C1Menu control in general. Each topic provides a solution for specific tasks
using the C1Menu control. Each task-based help topic also assumes that you have created a new ASP.NET project.
Adding Collapse and Expand Animation Effects
C1Menu contains 27 animation and thirty-one transition effects that allow you to customize interaction with
the control. In this topic, you will set the CollapseAnimation, ExpandAnimation, CollapseEasing,
ExpandEasing, CollapseDuration, and ExpandDuration properties to create an animation effect while
expanding or collapsing menu items.
Setting Animation Effects Using the Designer
Complete the following steps to set animation effects:
1. Click C1Menu's smart tag to open the C1MenuTasks menu and select Edit Menu. The C1Menu
Designer Form appears.
2. Use the Add Child Item ( ) button to add two link items to your C1Menu.
3. In treeview, select LinkItem01 and click on the Add Child Item button to add two link items to
LinkItem01.
4. In treeview, select LinkItem01 and navigate to the ExpandAnimation property and set it to "Unfold".
72
5. Set the ExpandEasing property to "EaseOutBounce". This property determines the animation transition
effect while the menu items are expanding.
6. Locate the ExpandDuration property and enter "1500" into its textbox. This will lengthen the duration of
the animation effect, guaranteeing that you will notice the effect when you build the project.
7. Set the CollapseAnimation property and set it to "Fold".
8. Set the CollapseEasing property to "EaseInBounce". This property determines the animation transition
effect while the menu items are collapsing.
9. Locate the CollapseDuration property and enter "1500" into its textbox.
11. Build the project and observe that the expanding child link items unfold and bounce in before settling into
its natural state and the collapsing child link items fold and then bounce in before settling into its natural
state.
Setting Animation Effects in Source View
In Source view add ExpandAnimation="Unfold", ExpandDuration="1500",
ExpandEasing="EaseOutBounce", CollapseAnimation="Fold", CollapseDuration="1500", and
CollapseEasing="EaseInBounce" into the <cc1:C1MenuItem> tag so that it appears similar to the following:
<cc1:C1MenuItem runat="server" CollapseAnimation="Fold"
CollapseDuration="1500" CollapseEasing="EaseInBounce"
ExpandAnimation="UnFold" ExpandDuration="1500"
ExpandEasing="EaseOutBounce" Text="LinkItem01">
<Items>
</cc1:C1MenuItem>
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
Setting Animation Effects Programmatically
Complete the following steps to set animation effects programmatically:
1. Import the following namespace into your project:
Visual Basic
C#
using C1.Web.UI.Controls.C1Menu;
2. Add the following code to the Page_Load event to set the animation effects for the expanding and
collapsing menu items:
Visual Basic
If Not Page.IsPostBack Then
'create menu item
Dim item1 As New C1MenuItem()
item1.Text = "LinkItem01"
'add item 1 to the main menu bar
C1Menu1.Items.Add(item1)

'Set the expand animation effect
item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold
'Set the transition for the expand animation effect
item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce
73
'Set the duration for the expand animation effect
item1.ExpandDuration = 2500

'Set the collapse animation effect
item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold
'Set the transition for the collapse animation
item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce
'Set the duration for the collapse animation effect
item1.CollapseDuration = 2500

'set item 1 submenu width
item1.NestedGroupWidth = 120

'create submenu item
Dim item1child1 As New C1MenuItem()
item1child1.Text = "LinkItem01"
item1child2.Text = "LinkItem02"

'add submenu item to menu Item 1
item1.Items.Add(item1child1)

End If
C#
if (!Page.IsPostBack)
{
//create menu item
C1MenuItem item1 = new C1MenuItem();
item1.Text = "LinkItem01";
//add item 1 to the main menu bar
C1Menu1.Items.Add(item1);
//Set the expand animation effect
item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold;
//Set the transition for the expand animation effect
item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce;
//Set the duration for the expand animation effect
item1.ExpandDuration = 2500;
//Set the collapse animation effect
item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold;
//Set the transition for the collapse animation
item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce;
//Set the duration for the collapse animation effect
item1.CollapseDuration = 2500;
//set item 1 submenu width
item1.NestedGroupWidth = 120;
//create submenu item
C1MenuItem item1child1 = new C1MenuItem();
item1child1.Text = "LinkItem01";
item1child2.Text = "LinkItem02";
74

//add submenu item to menu Item 1
item1.Items.Add(item1child1);

}
3. Run the programand observe that the expanding child link items unfold and bounce in before settling into
its natural state and the collapsing child link items fold and then bounce in before settling into its natural
state.
Creating Different Menu Types
The following topics show how to create a submenu, group menu, and context menu.
Create Submenus
A menu system with menu items and submenu items can be created at design time using the designer,
declaratively in the.aspx/ascx file, programmatically using the server-side API, or dynamically using the
client-side object model. Click on either of the following links to expand the steps for the designer, HTML
Markup, or code.
Add Menu Items and Submenu Items to C1Menu Using the Designer
1. Create an ASP.NET AJAX enabled website.
3. Right-click on the control and select Edit Menu.
The C1Menu Designer Form appears. For conceptual information about the elements in the C1Menu
Designer Form see, C1Menu Designer Form (page 35).
4. Right-click on C1Menu1 and select Add Child | Link Item to add a root item to the menu bar.
5. Select LinkItem01 and press the F3 key and enter "Item 1" inside the box.
6. Right-click on Item 1 and select Add Child | Link Item to add a child item to Item 1.
7. Right-click on LinkItem01 and select Rename. Rename it to "Submenu Item 1".
8. Right-click on Submenu Item 1 and select Insert Item. A new submenu item is inserted before Submenu
Item 1.
9. Select LinkItem01 and click the down arrow button to move it one item down.
75
10. Rename LinkItem01 to "Submenu Item 2".
11. Right-click on C1Menu1 and select Add Child | Link Item to add a new root item to the menu bar that
will appear next to Item 1.
12. Rename LinkItem01 to "Item 2".
13. Right-click on C1Menu1 and select Add Child | Link Item to add a new root item to the menu bar that
will appear next to Item 2.
14. Rename LinkItem01 to "Item 3".
15. Click the OK button to save and close the changes you made to the C1Menu control.
16. Run the project and notice the new menu items and submenu items appear on the C1Menu control.
Add Menu Items and Submenu Items to C1Menu Declaratively
Select the source tab to switch to source view and add the following HTML markup within the <body> tags.
<form id="form1" runat="server">
<cc1:C1Menu ID="C1Menu1" runat="server"
VisualStylePath="~/C1WebControls/VisualStyles">
<Items>
<cc1:C1MenuItem runat="server" Text="Item 1"
NestedGroupWidth="120px">
<Items>
<cc1:C1MenuItem runat="server" Text="Submenu Item 1">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="Submenu Item 2">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="Item 2">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="Item 3">
76
</cc1:C1MenuItem>
</Items>
</cc1:C1Menu>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
Add Menu Items and Submenu Items to C1Menu Programmatically
To add menu items and submenu items to C1Menu programmatically in the code behind, complete the
following:
2. Declare the C1.Web.UI.Controls.C1Menu namespace at the top of your code behind file:
Visual Basic
C#
Using C1.Web.UI.Controls.C1Menu;
3. Enter the following code in the Page_Load event handler:
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not Page.IsPostBack Then
'create menu item
item1.Text = "Item 1"
'add item 1 to the main menu bar

'set item 1 submenu width
item1.NestedGroupWidth = 120

'create submenu item
item1child1.Text = "Submenu Item 1"
'add submenu item to menu Item 1

item1child2.Text = "Submenu Item 2"


End If
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
77
if (!Page.IsPostBack)
{
//create menu item
item1.Text = "Item 1";
//add item 1 to the main menu bar
//set item 1 submenu width
item1.NestedGroupWidth = 120;

//create submenu item
item1child1.Text = "Submenu Item 1";
//add submenu item to menu Item 1
item1child2.Text = "Submenu Item 2";
}
}
Create a Group Menu
To create a grouped menu, complete the following:
1. Select Edit Menu from C1Menus Tasks menu to open the C1Menu Designer Form.
2. Select the menu item where you want to add a group menu. Click the Add Child button and select Group.
78
3. Select Group and click the Add Child button. Select Header to add a child Header item to the group. Set
the Text property for the Header item to a meaningful name that categorizes the group items, for example
"Developer Tools".
4. Select Group01 and click the Add Child button. Select Link Item. Repeat this 5 times so you have 5 link
items in Group01.
To create link items within the submenu, but outside the group you just created complete the following:
1. Select the link item that is not in the group and click on the Add Child button.
2. Select Link Item from the Add Child button.
3. Run your project.
The link item appears outside of the group.
79
4. Add a new group within the same menu item, Products. Select Produts and click Add Child| Group.
Group02 is added below the first group we added.
5. Select the new group, Group02, and add a child header item. Set the Text property to "Content
Authoring".
6. Select Group02 and insert child link items so they appear within the group.
Create a Context Menu and Attach it to a Control
To create context menu and associate it with a control at design time
1. Add C1Menu control to your page.
2. Add a Textbox control to your page.
3. Right-click on C1Menu and select Edit Menu. The C1Menu Designer Form appears.
4. Add three link menu items and name them cut, copy, and paste.
5. Select C1Menu1 in the menu tree and set the ContextMenu property to True and the ContextElementID
to TextBox1.
Setting the ContextElementID to TextBox1 associates the C1Menu control with the TextBox control.
6. Run your project. Right-click on the TextBox control. The context menu appears.
Saving and Loading C1Menu as an XML File
You can save your C1Menu control as an .xml file and then load it to another project or an existing one using
the C1Menu Designer Form. The following topics show you how to first save and load the C1Menu control.
80
Save C1Menu as an XML File
To save C1Menu as an XML using the designer, complete the following:
1. Create a C1Menu system using the C1Menu Designer Form.
2. Open the C1Menu Designer Form and select File | Save as XML.
The Save As dialog box appears.
3. Click the down arrow button in the Save in drop-down box to browse to a location where you would like
to save your C1Menu.
4. Click OK.
Your C1Menu is saved as an XML file so you can use it to load the menu into other Web sites.
Load C1Menu from an XML File
You can load menu items from an XML source using the designer or programmatically through the
LoadLayout method.
To populate a C1Menu object from an XML source using the designer:
1. Create an ASP.NET AJAX-Enabled Web Site.
2. Add the C1Menu control to the page.
3. Right-click the C1Menu control and select MenuDesignerForm.
The MenuDesignerForm appears.
4. Select File | Load from XML.
5. Browse to the location of the save XML menu file.
6. Click Open and the C1Menu content items appear in the C1Menu Designer Form pane.
To load a C1Menu object from an XML source programmatically using the LoadLayout (string):
81
1. Add C1Menu to the page.
2. Create an XML file for the C1Menu structure.
3. Call the LoadLayout method to load the items, passing in the path to the file:
Visual Basic
C1Menu1.LoadLayout("c:\\Visual Studio
2005\\WebSites\\LoadLayoutEX\\App_Data\\C1Menu.xml")
C#
C1Menu1.LoadLayout("c:\\Visual Studio
2005\\WebSites\\LoadLayoutEX\\App_Data\\C1Menu.xml");
You can also populate C1MenuItems using an XMLDataSource component. For an example of how to bind
C1Menu to an XMLDataSource see, Applying Different Data Binding Methods (page 21).
Adding Scrolling to Menus
The following tasks show you how to apply scrolling to various types of C1Menus.
Add Scrolling to Vertical Top Level Menu
To create a scrollable vertical top level menu at design time, complete the following:
2. Add 9 menu items to the C1Menu control.
3. Open the C1Menu Designer Form and expand the ScrollSettings located in the properties window.
4. Set the ScrollMode to buttons, ScrollContentHeight to 100 pixels, and ScrollOrientation to vertical.
5. Set the Orientation to "Vertical".
6. Click OK to close the designer.
7. Run your project and click on the down arrow button to scroll down the menu items.
Add Scrolling to Horizontal Top Level Menu
To create a scrollable horizontal top level menu at design time, complete the following:
2. Add 9 menu items to the C1Menu control
3. Open the C1Menu Designer Form and expand the ScrollSettings located in the properties window.
4. Set the ScrollMode to buttons, ScrollContentWidth to 500 pixels, and ScrollOrientation to horizontal.
82
Add Scrolling to Vertical Sub Menu
To add scrolling to sub menu items at design time, complete the following:
2. Add several sub menu items to the C1Menu control.
3. Select Edit Menu from the C1Menu Tasks menu to open the C1Menu Designer Form.
4. Select the submenu item in the treeview of the designer.
5. Expand the ScrollSettings in the properties window of the C1Menu Designer Form.
6. Set the ScrollMode to buttons, ScrollContentWidth to 100 pixels, and ScrollOrientation to vertical.
83
Add Scrolling to Vertical Group
2. Create a Group menu. For more information see, Create a Group Menu (page 77).
3. In the C1Menu Designer Form, select the Group you wish to add the scrolling to.
4. Scroll down to the ScrollSettings in the Properties pane.
5. Expand the ScrollSettings and set its ScrollMode property to "ButtonsHover".
This will add one or two buttons depending on the setting for the ScrollButtonAlign property.
84
6. Set the ScrollOrientation to "Vertical" since in this example we have a vertical group so we will be
scrolling vertically.
7. Set the ScrollContentHeight to "100px".
8. Click OK to save the changes you made in the C1Menu control and to close the C1Menu Designer Form.
9. Run your project.
Click on the up arrow button to scroll up the menu items or the down arrow button to scroll down the
menu items.
Creating a Click Event for a Menu Item
To create a click event for a menu item, complete the following:
1. Add C1Menu control to your page.
2. Add two menu link items using the C1Menu Designer Form. For more information on adding menu
items using the C1Menu Designer Form see, Working with the C1Menu Designer Form(page 28).
3. Add a Label control to your page.
4. Add the following code to the Page_Load event:
Visual Basic
Protected Sub C1Menu1_ItemClick(ByVal sender As Object, ByVal e As
C1.Web.UI.Controls.C1Menu.C1MenuEventArgs) Handles C1Menu1.ItemClick
C1.Web.UI.Controls.C1Menu.C1MenuItem itemclicked = e.Item

Label1.Text = "You selected " + itemclicked.Text
End Sub
C#
protected void C1Menu1_ItemClick(object sender,
C1.Web.UI.Controls.C1Menu.C1MenuEventArgs e)
{
C1.Web.UI.Controls.C1Menu.C1MenuItem itemclicked = e.Item;

Label1.Text = "You selected " + itemclicked.Text;
}
5. Run the project and the menu item looks like the following:
85
6. Click on the first link item.
The C1Menu1_ItemClick event fires and adds the text to the label.
Creating a Custom Visual Style
To create a custom visual style for the C1Menu control based on the Arctic visual style, complete the
following:
1. Copy the theme folder C:\Program Files\ComponentOne\Studio for
ASP.NET\C1WebUI\VisualStyles to a new folder in your Visual Studio project.
~/VisualStyles/ArcticFoxNew/C1Menu
2. Open the styles.css file inside the new folder, rename all the classes name to make sure they end with the
new visual style name "ArcticFoxNew".
3. Replace all instances of _ArcticFox with _ArcticFoxNew.
Suppose the original class name is .C1Menu_ArcticFox, then rename it to .C1Menu_ArcticFoxNew.
4. Save the modified .css file.
Note: Make sure the read-only attribute is unchecked for the styles.css file.
5. Save and close your Visual Studio project.
6. Reopen your Visual Studio project.
7. Set the VisualStylePath to" ~/VisualStyles".
86
8. Set UseEmbeddedVisualStyles to "False".
9. Set the VisualStyle to the new external custom theme, "ArcticFoxNew".
10. Now you can open the new styles.css file and edit the correspondent CSS classes. In this example, we
modify the background colors for the main menu and submenu items.
11. Open the new styles.css file and locate the selector name, .C1Menu_ArcticFoxNew .C1Link
.C1TextNode for the text in the link menu item types. Replace the color: #333333 with the
color:#330066. This will change the menu items text.
.C1Menu_ArcticFoxNew .C1Link .C1TextNode
{
color:#330066;
}
12. Locate the .C1Menu_ArcticFoxNew-C1Horizontal selector and set the background color to #CCCCFF
for the C1Menu control. This will change the containers background color for the C1Menu control.
.C1Menu_ArcticFoxNew-C1Horizontal {
display: block;
padding: 0;
margin: 0;
background: #C7C7C7 url(Images/menu-horizontal.png) repeat-x 0 -120px;
border:solid 1px #999999;
width:100%;
/* min-height:32px; */
background: #CCCCFF;
}
13. Set the background color for the hover state of the link item in the C1Menu control to #CC99FF This will
change the background color when you hover over a link item in the C1Menu control.
.C1Menu_ArcticFoxNew .C1Active,
.C1Menu_ArcticFoxNew .C1Hover,
.C1Menu_ArcticFoxNew .C1Focus,
.C1Menu_ArcticFoxNew .C1Opened
{
display: block;
background:#FDFDFD url(Images/menu-horizontal.png) repeat-x 0 -210px;
text-decoration: none;
background:#CC99FF;
}
14. Save and run your project.
87

Aspnet Menu

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aspnet Menu

Uploaded by

Copyright:

Available Formats

ComponentOne

Menu for ASP.NET AJAX

You might also like