ComponentOne Splitter for ASP.NET AJAXprerelease.componentone.com/help/Legacy/ASPNET/ASPNET.Splitte… · normal use, for a period of 90 days from the date of purchase. If a defect

ComponentOne

Splitter for ASP.NET AJAX

Copyright 1987-2010 ComponentOne LLC. All rights reserved.

Corporate HeadquartersComponentOne LLC201 South Highland Avenue3rd FloorPittsburgh, PA 15206 ∙ USA

Internet: [email protected] site: http://www.componentone.com

SalesE-mail: [email protected]: 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. ComponentOne’s 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™.

mailto:[email protected]

http://www.componentone.com/

iii

Table of ContentsComponentOne Splitter for ASP.NET AJAX Overview ................................................................ 1

What's New in Splitter for ASP.NET AJAX.............................................................................................1Installing Splitter for ASP.NET AJAX .....................................................................................................1Splitter for ASP.NET AJAX Setup Files ...................................................................................................1System Requirements ...............................................................................................................................2Uninstalling Splitter for ASP.NET AJAX.................................................................................................2Deploying your Application in a Medium Trust Environment ..................................................................2End-User License Agreement ...................................................................................................................6Licensing FAQs .......................................................................................................................................6What is Licensing? ...................................................................................................................................6How does Licensing Work? ......................................................................................................................6Common Scenarios ..................................................................................................................................7Troubleshooting .......................................................................................................................................8Technical Support ..................................................................................................................................10Redistributable Files ...............................................................................................................................10About This Documentation ....................................................................................................................11Namespaces ...........................................................................................................................................11Creating an AJAX-Enabled ASP.NET Project........................................................................................12Adding the ASP.NET Components to a Project......................................................................................14

Key Features.......................................................................................................................15

Splitter for ASP.NET AJAX Quick Start...................................................................................16Step 1 of 4: Adding C1Splitter to the Page..............................................................................................16Step 2 of 4: Changing the Behavior and Appearance of the C1Splitter Control ........................................17Step 3 of 4: Adding Content to the C1Splitter Control............................................................................18Step 4 of 4: Manipulating the C1Splitter Control at Run Time ................................................................19

Top Tips ............................................................................................................................21

Design-Time Support............................................................................................................22C1Splitter Smart Tag ..............................................................................................................................22C1Splitter Context Menus ......................................................................................................................23

C1Splitter Objects................................................................................................................24Splitter Bar .............................................................................................................................................25Splitter Panels.........................................................................................................................................26Expander Button Styles ..........................................................................................................................26Splitter Control Visual Styles ..................................................................................................................27Splitter Bar CSS Styling ..........................................................................................................................28Splitter Bar Image States.........................................................................................................................29Splitter Bar Width and Position ..............................................................................................................29Splitter Bar ToolTip................................................................................................................................30Splitter Bar Animation Effects ................................................................................................................30Animation Effect Descriptions................................................................................................................30Animation Effect Duration .....................................................................................................................32

Splitter Panel's Appearance and Behavior..................................................................................32Panel Layout ..........................................................................................................................................32Panel CSS Styling...................................................................................................................................32Collapsible and Expandable Panels.........................................................................................................33Panel Scrolling .......................................................................................................................................34Panel Sizing ...........................................................................................................................................35

iv

Panel Previewing....................................................................................................................................35

Split Types .........................................................................................................................36Horizontal Split ......................................................................................................................................36Vertical Split...........................................................................................................................................37Compound Split .....................................................................................................................................37Full-Size Split .........................................................................................................................................38

Client-Side Functionality.......................................................................................................39Client-Side Properties .............................................................................................................................39Working with Client-Side Events............................................................................................................39

Splitter for ASP.NET AJAX Samples .......................................................................................40

Splitter for ASP.NET AJAX Task-Based Help............................................................................41Adding Content to the Splitter Panels .....................................................................................................41Adding Arbitrary Controls to C1Splitter .................................................................................................41Adding Text to a Splitter Panel...............................................................................................................43Applying CSS Styles to C1Splitter ..........................................................................................................44Adding a Background Image to an Individual Panel ...............................................................................45Adding a Border to a Panel.....................................................................................................................46Adding a Border to the C1Splitter Control ..............................................................................................48Adding a Font Style to Each Panel .........................................................................................................50Adding Gradient Backgrounds to Individual Panels................................................................................52Changing the Appearance of a C1Splitter Control...................................................................................54Changing the Background Color of Panels..............................................................................................55Changing the Border Color.....................................................................................................................56Changing the Size of a C1Splitter ...........................................................................................................57Changing the Visual Style.......................................................................................................................59Changing Splitter Bar Location...............................................................................................................60Changing the Splitter Bar Style ...............................................................................................................62Changing the Splitter Width ...................................................................................................................63Client-Side Tasks....................................................................................................................................64Setting the Height and Width at Run Time .............................................................................................64Setting the Splitter Bar Distance at Run Time .........................................................................................66Creating Different Split Types ................................................................................................................67Creating a Horizontal Split .....................................................................................................................67Creating a Vertical Split..........................................................................................................................68Creating a Compound Split ....................................................................................................................69Creating a Full-Size Split ........................................................................................................................71Setting C1Splitter Behaviors ...................................................................................................................72Adding a ToolTip to the Splitter Bar.......................................................................................................72Setting a Minimum Size for a Splitter Panel............................................................................................73Setting a Collapsed Splitter Panel ...........................................................................................................74Using Animation Effects ........................................................................................................................75Using the Ghost Effect ...........................................................................................................................77Using Incremental Resizing ....................................................................................................................79

1

ComponentOne Splitter for ASP.NET AJAX OverviewCreate highly sophisticated resizable panels in your applications without using any resizing code with ComponentOne Splitter™ for ASP.NET AJAX(C1Splitter). C1Splitter's WYSIWYG designer, support for Cascading Style Sheets (CSS), and wide range of appearance properties gives you a customizable and flexible splitter control that is very easy to use. The rich client-side object model enables you to use client-side events for more interactivity. For example, you can manipulate the embedded items in the panels of the splitter control when an action such as sizing, collapsing, and expanding occurs. Now you can enhance the functionality and ease-of-use to your Web site by adding C1Splitter to your pages.

Splitter 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

Getting Started

- Splitter for ASP.NET AJAX Quick Start (page 16)

- Design-Time Support(page 22)

- C1Splitter Objects (page 24)

What's New in Splitter for ASP.NET AJAXNo new features have been added to the C1Splitter control in its 2010 v2 release.

Tip: A version history containing a list of new features, improvements, fixes, and changes for each product is available at HelpCentral at http://helpcentral.componentone.com/VersionHistory.aspx.

Installing Splitter for ASP.NET AJAXThe following sections provide helpful information on installing Splitter for ASP.NET AJAX:

Splitter for ASP.NET AJAX Setup Files

The ComponentOne Studio for ASP.NET AJAX installation program will create the following directory: C:\Program Files\ComponentOne\Studio for ASP.NET AJAX. This directory contains the following subdirectories:

bin Contains copies of all binaries (DLLs, Exes) in the ComponentOne Visual Studio ASP.NET package.

H2Help Contains documentation for Studio for ASP.NET AJAXcomponents.

C1WebUi Contains files (at least a readme.txt) related to the product.

C1WebUi\VisualStyles Contains all external file themes.

Samples

http://helpcentral.componentone.com/VersionHistory.aspx



2

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.

Studio for ASP.NET\C1WebUi

Contains a readme.txt file and the folders that make up the Control Explorer and other samples.

You can access samples from the ComponentOne Control Explorer. To view samples, click the Start button and then click ComponentOne | Studio for ASP.NET | Control Explorer.

System Requirements

System requirements for ComponentOne Studio for ASP.NET AJAX components include the following:

Operating Systems: Windows® 2000

Windows Server® 2003

Windows Server 2008

Windows XP SP2

Windows Vista™

Windows 7

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

Disc Drive: CD or DVD-ROM drive if installing from CD

Uninstalling Splitter for ASP.NET AJAX

To uninstall Studio for ASP.NET AJAX:

1. Open the Control Panel and select the Add or Remove Programs (Programs and Features in Vista/7).

2. Select ComponentOne Studio for ASP.NET AJAX and click the Remove button.

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.

3

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>

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.

4

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:

<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> <IPermission class="ReflectionPermission" version="1" Flags="ReflectionEmit,MemberAccess" /> ... </PermissionSet></NamedPermissionSets>

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.

5

To add OleDbPermission, complete the following steps:



<SecurityClasses> <SecurityClass Name="OleDbPermission" Description="System.Data.OleDb.OleDbPermission, System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>...</SecurityClasses>


<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> <IPermission class="OleDbPermission" version="1" Unrestricted="true"/> ... </PermissionSet></NamedPermissionSets>


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:



<SecurityClasses> <SecurityClass Name="FileIOPermission" Description="System.Security.Permissions.FileIOPermission, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/>...</SecurityClasses>


<NamedPermissionSets> <PermissionSet class="NamedPermissionSet" version="1" Name="ASP.Net"> ... <IPermission class="FileIOPermission" version="1" Read="C:\SomeDir;$AppDir$" Write="$AppDir$" Append="$AppDir$" PathDiscovery="$AppDir$" /> ...</PermissionSet></NamedPermissionSets>


6

End-User License AgreementAll of the ComponentOne licensing information, including the ComponentOne end-user license agreements, frequently asked licensing questions, and the ComponentOne licensing model, is available online at http://www.componentone.com/SuperPages/Licensing/.

Licensing FAQsThis 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.

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.

http://www.componentone.com/SuperPages/Licensing/

http://www.componentone.com/SuperPages/Licensing/

7

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.

This will mark the derive 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.

8

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.

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.

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.

9

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 AJAX 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 AJAX 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 run-time 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.

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.

http://prerelease.componentone.com/

10

Subscriptions expire, products do not. You can continue to use the components you received or downloaded while your subscription was valid.

Technical SupportComponentOne 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 HelpCentralComponentOne 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 FormThis 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 NewsgroupsComponentOne 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 IssuesRegistered 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.

DocumentationComponentOne 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 FilesComponentOne Studio for ASP.NET AJAX 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 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

http://www.componentone.com/Support

http://helpcentral.componentone.com/

http://helpcentral.componentone.com/ProductResources.aspx?View=FAQs

http://helpcentral.componentone.com/ProductResources.aspx?View=SAMPLES

http://helpcentral.componentone.com/ProductResources.aspx?View=VersionHistory

http://helpcentral.componentone.com/Articles.aspx

http://helpcentral.componentone.com/Search.aspx



http://helpcentral.componentone.com/Forums.aspx

http://helpcentral.componentone.com/Documentation.aspx

http://helpcentral.componentone.com/Documentation.aspx




http://www.componentone.com/support


11


C1.Web.UI.4.dll

C1.Web.UI.Design.4.dll


Site licenses are available for groups of multiple developers. Please contact [email protected] for details.

About This DocumentationAcknowledgements

Microsoft, Windows, Windows 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 trademark of Apple Inc., registered in the U.S. and other countries.

ComponentOne

If you have any suggestions or ideas for new features or controls, please call us or write:

Corporate Headquarters

ComponentOne LLC201 South Highland Avenue3rd FloorPittsburgh, PA 15206 • USA412.681.4343412.681.4384 (Fax)

http://www.componentone.com

ComponentOne Doc-To-Help

This documentation was produced using ComponentOne Doc-To-Help® Enterprise.

NamespacesNamespaces 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. The following code fragment shows how to declare a C1TreeView (which is one of the core Studio for ASP.NET AJAX classes) using the fully qualified name for this class:

Visual BasicDim TreeView As C1.Web.UI.Controls.C1TreeView

C#C1.Web.UI.Controls.C1TreeView TreeView;

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.





http://www.doctohelp.com/

12

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 BasicImports C1TreeView = C1.Web.UI.Controls.C1TreeViewImports MyTreeView = MyProject.Objects.C1TreeView

Dim wm1 As C1TreeViewDim wm2 As MyTreeViewMenu

C#using C1TreeView = C1.Web.UI.Controls.C1TreeView;using MyTreeView = MyProject.Objects.C1TreeView;

C1TreeView wm1;MyTreeView 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.

When creating AJAX-Enabled ASP.NET projects, Visual Studio 2005 gives you the option of creating a Web site project or a Web application project.

Creating an AJAX-Enabled ASP.NET Project requires installation of Microsoft ASP.NET AJAX Extensions, which can be found at http://ajax.asp.net/. For more information about Microsoft ASP.NET AJAX Extensions, see Microsoft's ASP.Net AJAX Web site. 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/. See Microsoft's Web site for more detailed information and comparisons on Web site and Web application projects.

The steps for creating both types of projects have been provided for your convenience in the Creating an AJAX-Enabled ASP.NET Project (page 12) topic.

Creating an AJAX-Enabled ASP.NET ProjectComponentOne Splitter 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 C1Splitter 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.

http://ajax.asp.net/


http://msdn.microsoft.com/


http://msdn.microsoft.com/en-us/default.aspx



13

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:

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.

http://www.asp.net/ajax/




http://www.asp.net/ajax/downloads/archive/


http://msdn.microsoft.com/en-us/default.aspx


14


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 rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.

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 ASP.NET Components to a ProjectWhen you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio2005/2008 Toolbox Tab check box is checked, by default, in the installation wizard. When you open Visual

15

Studio 2005, you will notice a ComponentOne Studio for ASP.NET AJAX Projects tab containing the ComponentOne controls that have automatically been added to the Toolbox.

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.

Manually Adding the Studio for ASP.NET AJAX controls to the Toolbox

When you install ComponentOne Studio for ASP.NET AJAX, the C1Splitter control will be added to the Visual Studio Toolbox customization dialog box.

To manually add the Studio for ASP.NET AJAX controls 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 Studio for ASP.NET AJAX components appear on their own tab in the Toolbox, select Add Tab from the context menu and type in the tab name, Studio for ASP.NET AJAX, 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 all components belonging to namespace C1.Web.UI.Controls.2.dll. Note that there may be more than one component for each namespace.

5. Click OK to close the dialog box.

The controls are added to the Visual Studio Toolbox.

Adding Studio for ASP.NET AJAX Controls to the Form

To add Studio for ASP.NET AJAX controls to a form:

1. Add them 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.Conttrols.2 assembly:

3. Select the Add Reference option from the Website menu of your Web Site project or from the Project menu of your Web Application project.

4. Select the most recent version of the ComponentOne Studio for ASP.NET AJAX assembly from the list on the NET tab or browse to find the C1.Web.UI.Controls.2.dll file and click OK.

5. 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 11) for more information.

Key FeaturesThe following are some of the main features of C1Splitter that you may find useful:

Expand and Collapse Panels

16

Just set one property to expand or collapse panels. Add visual effects such as images and mouse over styles to the splitter bar to represent a collapsed or expanded panel. See Collapsible and Expandable Panels (page 33) for more information.

Unlimited Nesting

Organize massive amounts of data into one page using Splitter for ASP.NET AJAX's nesting feature. Splitter for ASP.NET AJAX enables you to nest multiple splits of any orientation type as well accommodate the resizing for the nested splitters when you resize the panel. See Compound Split (page 37) for more information.

CSS Support

Match the Splitter for ASP.NET AJAX controls to your organization's standards. Use a cascading style sheet (CSS) style to define custom skins. You have complete control over the splitter panels' and splitter bars' background, colors, borders, styles, and more. For further customization, you can define individual CSS styles for the splitter bar's image states (collapsed normal, collapsed hover, expanded normal, and expanded hover).

Splitter Bar ToolTip

Create a more user-friendly Web application by adding a ToolTip to the splitter bar. The ToolTip can let end-users know how to drag the splitter bar when they move their cursor over it. See Splitter Bar ToolTip(page 30) for more information.

Rich client-side object model

Make your Web applications more efficient by using C1Splitter's rich client-side object model. C1Splitterprovides client-side properties, methods, and events.

Browser support

C1Splitter includes browser support for Netscape, Internet Explorer 6 or later , and Safari.

Section 508 compliance

The C1Splitter control meets Section 508 federal regulations.

XHTML 1.1 Compliance

C1Splitter provides complete XHTML compliance. The output that is generated is fully XHTML 1.1 compliant.

Search Engine Optimization

Optimized for search engines, C1Splitter uses semantic lists and <a> tags, which are recognized and indexed by Web crawlers.

Splitter for ASP.NET AJAX Quick StartThe goal of this quick start guide is to get you acquainted with Splitter for ASP.NET AJAX. In the first step of this Quick Start guide, you will add a C1Splitter control to your Web project. This quick start guide will also explain how to set common properties of C1Splitter, add arbitrary content to its panels, and how to manipulate the control at run time.

Step 1 of 4: Adding C1Splitter to the PageIn this step, you will create a Web site project and add a C1Splitter control to it.

17

Complete the following steps:

1. Begin by creating an ASP.NET AJAX-Enabled Web Site. Note that as you've created an ASP.NET 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 C1Splitter control to add it to your form. The C1Splitter appears with two empty panes and a splitter bar:

In the next step, you will modify the behavior and appearance of the C1Splitter control.

Step 2 of 4: Changing the Behavior and Appearance of the C1Splitter ControlIn this step, you will customize the appearance and behavior of the C1Splitter control.


1. With the C1Splitter control selected on the Web page, set the following properties in the Propertieswindow:

Set the Width property to "250px".

Set the Height property to "250px".

Set the SplitterDistance to "75px".

Set the SplitterStyle property to Thick.

Set the Orientation property to Horizontal.

2. Expand the Panel1 node to reveal its list of properties and then complete the following:

Set the BackColor property to "PaleTurquoise".

Set the Collapsed property to True; this will set the top panel to be collapsed upon page load.

3. Expand the Panel2 node to reveal its list of properties and then complete the following:

Set the BackColor property to “Lavender”.

Set the MinSize property to "82". This will prevent the bottom panel from being resized to a height of less than 82 pixels at run time.

18

The appearance settings will be updated at design time, and your control will resemble the following image:

In the next step, you'll add content to the C1Splitter control.

Step 3 of 4: Adding Content to the C1Splitter ControlIn this step, you will add content to the C1Splitter using both the Designer and markup. You can easily drop controls from the Visual Studio Toolbox into the panels, or you can achieve the same result by switching to Source view and adding the elements in markup code.


1. Click the Source tab to enter Source view and enter the following markup between the <Panel2> tags:

<ContentTemplate> <asp:RadioButton ID="RadioButton1" runat="server" Text="Option 1" /> <br /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Option 2" /> <br /> <asp:RadioButton ID="RadioButton3" runat="server" Text="Option 3" /> <br /> <asp:RadioButton ID="RadioButton4" runat="server" Text="Option 4" /></ContentTemplate>

2. Click the Design tab to return to Design view and observe that four radio buttons have been added to Panel2. The result resembles the following image:

19

3. In Panel2, place your cursor after Option 4 and then press Enter.

4. Navigate to the Visual Studio Toolbox and double-click the TextBox icon to add a TextBox control to the panel. The result will resemble the following:

In the next step, you'll run the program and walk through some of the behavioral features of the C1Splitter control.

Step 4 of 4: Manipulating the C1Splitter Control at Run TimeNow that you've customized the C1Splitter and added content to it, you are going to run the project and observe some of the changes that you've made to the control.


1. Press F5 to build the project. The C1Splitter control appears similar to the image below:

20

Observe that only Panel2 appears; Panel1 is collapsed, which is what you specified when you set the Collapsed property to True.

2. Click the expander button.

Panel1 expands into view.

3. Click the splitter bar to activate it and then attempt to drag the splitter bar to the bottom of the control.

21

As you've probably noticed by now – and as you can see in the image above – you can't expand the bar to the bottom of the control. This is because you set the MinSize to 82 in step 2 so that users wouldn't be able to minimize Panel2 to a height of less than 82 pixels. Thus, upon releasing your cursor, the result will resemble the following image:

What You've Accomplished

Congratulations! You have successfully completed the C1Splitter quick start. In this topic, you added a C1Splittercontrol to your Web page, customized its behavior and appearance, added content to its panels, and manipulated the control at run time.

Top TipsThis section provides tips and tricks for using the C1Splitter control.

Remember to always use the ScriptManager control.

Use image sprites in your custom visual styles to increase performance and decrease load times.

22

Use the SplitterDistance property to set the location of the splitter, in pixels, from the left or top edge of the splitter.

The following code sets the SplitterDistance property to 100:

o Visual Basicme.C1Splitter1.SplitterDistance = 100

o C#this.C1Splitter1.SplitterDistance = 100;

You can set the FullSplit property to determine whether or not the C1Splitter control fills the entire Web page or Web application.

The following code sets the FullSplit property to True:

o Visual BasicMe.C1Splitter1.FullSplit = True

o C#this.C1Splitter1.FullSplit = True;

this.C1Splitter1.FullSplit = true;Set visual styles on your Studio for ASP.NET AJAX control to add rich themes to your application. For task-based help, see Changing the Visual Style. For a list of visual styles, see Splitter Control Visual Styles (page 27).

Update the client-side model properties and events when you don't need to perform server-side processing. The C1Splitter control can be coded on both the client side and server side.

Design-Time SupportC1Splitter provides customized context menus, smart tags, and a designer that offers rich design-time support and simplifies working with the object model.

The following topics describe how to use C1Splitter's design-time environment to configure C1Splitter's controls.

C1Splitter Smart TagIn Visual Studio 2005 and 2008, each control in C1Splitter for ASP.NET AJAX includes a smart tag. A smart tagrepresents a short-cut tasks menu that provides the most commonly used properties in each control.

To access the C1Splitter Tasks menu, click the smart tag ( ) in the upper right corner of the C1Splitter control.This will open the C1Splitter Tasks menu.

23

The C1Splitter Tasks menu operates as follows:

Orientation

Selecting the Orientation drop-down box provides different splitter bar orientations (Vertical and Horizontal).

Border Color

Selecting the Border Color drop-down box opens up the Custom, Web, and System color tabs for adding a border color to the splitter. The default border color is orange.

SplitterStyle

Selecing a SplitterStyle from the drop-down list changes the styling of the splitter bar.

VisualStylePath

Sets the path to the built-in or custom visual style.

UseEmbeddedVisualStyles

Selecting a VisualStyle from the drop-down list changes the visual scheme of the control.

About

Clicking About reveals the About ComponentOne dialog box. This dialog box displays the version number and licensing information for the ComponentOne product.

C1Splitter Context MenusC1Splitter has designer verbs displayed in the shortcut menu or context menu associated with the C1Splitter and C1UpdateSplitter controls.

C1Splitter Context Menu

Right-click anywhere on the C1Splitter control to display its context menu.

24

The following command has been added to this context menu by Splitter for ASP.NET AJAX:

Show Smart Tag

Click Show Smart Tag to open the C1Splitter Tasks menu.

C1Splitter ObjectsThe C1Splitter container control consists of three basic objects: a SplitterBar, a SplitterPanel, and an expander button. The SplitterBar represents the divider that separates the two panels. The SplitterPanel object defines the appearance and behavior for Panel1 and Panel2.

The following image shows how the default vertical C1Splitter appears once it is added to the Web form:

25

Splitter BarC1Splitter's divider is a bar that can be resized or formatted through the SplitterBar object, which allows for the following customizations:

Changing the divider's width between the two panes.

Adding a collapsed or expanded image to the bar to indicate collapsed or expanded panes.

Applying a hover mouse-over style to the divider.

Setting the location of the splitter bar.

Applying custom CSS styles to further mark the distinction of a collapsed, dragged, or hovered divider.

To achieve these customizations, you can use any of the properties in the SplitterBar object:

Property Description

CollapsedCssClass Gets or sets the CSS class name for rendering the splitter bar while it is collapsed.

CollapseHoverImageUrl Gets or sets the URL of the image that will be displayed on the splitter bar when it is collapsed and the mouse is over it.

CollapseImageUrl Gets or sets the URL of image that will be displayed on splitter bar when it is collapsed.

CssClass Gets or sets the CSS class name for rendering the splitter bar.

DragCssClass Gets or sets the CSS class name for rendering the splitter bar while it is being dragged.

ExpandHoverImageUrl Gets or sets the URL of image that will be displayed on splitter bar when it is expanded and the mouse is over it.

26

ExpandImageUrl Gets or sets the URL of image that will be displayed on splitter bar when it is expanded.

HoverCssClass Gets or sets the CSS class name for rendering the splitter bar while mouse is over it.

Tooltip Gets or sets the ToolTip when mouse is over the splitter bar.

Width Gets or sets the width of the splitter bar in pixels.

Splitter PanelsC1Splitter consists of two panels separated by a splitter bar. The panels appear to the left and right of the splitter bar for vertical splits and top and bottom for horizontal splits. C1Splitter refers to the left/top panel in the designer as Panel1 and the right/bottom panel as Panel2. In the designer, you can control each panel's appearance and behavior through Panel1 and Panel2 properties. Both panels contain the same properties from the SplitterPanelobject. You can apply different behaviors and styles to each panel since you can set each panel individually.

To achieve these customizations, you can use any of the properties in the SplitterPanel object:


BackColor Gets or sets the background color for the splitter panel it is applied to.

BackImageUrl Gets or sets the background image url for the splitter panel it is applied to.

Collapsed Gets or sets a value determining whether the panel is collapsed or expanded.

CssClass Gets or sets the css class name for the splitter panel.

MinSize Gets or sets the minimum size of a splitter panel.

ScrollBars Gets or sets the type of scroll bars to display for splitter panel. There are four options: None, Horizontal, Vertical, Both, and Auto.

In the object model for C1Splitter, both panels are referred as the SplitterPanel. The SplitterPanel object contains properties and methods for Panel1 and Panel2.

Splitter Bar's Appearance and Behavior

C1Splitter's bar includes a variety of appearance and behavior properties to customize the bar's look and feel.

You can use the CssClass property to customize the look and feel of the splitter bar by defining general styles for its appearance. Additionally, you can provide further customization by defining individual styles for its different rendering states such as how the splitter bar appears when it is collapsed/expanded, while the mouse hovers over it, or when it is being moved.

The following section details the splitter bar's appearance and behavior properties used to control the look and feel of the splitter bar.

Expander Button StylesC1Splitter includes four styles that can be applied to the expander button: None, Thin, Thick, and Arrow. Three of those styles – Thin, Thick, and Arrow – provide unique images for the expander button (page 24); however, the None setting appears without an expander button (page 24) image. The expander button image and the splitter bar will appear different depending on the visual style applied to the control. The default setting is Thin, but you can easily set it to another style using the SplitterStyle property.

27

To learn how to set the SplitterStyle property, see Changing the Splitter Bar Style.

Appearance of the Splitter Bar Styles

The following table illustrates the four splitter bar styles as they appear for each visual style.

None Thin Thick Arrow

ArcticFox

Office2007Black

Office2007Blue

Office2007Silver

Vista

Splitter Control Visual StylesC1Splitter provides five built-in visual styles for the control – ArcticFox, Office2007Black, Office2007Blue , Office2007Silver, and Vista - that can be easily applied to the control by setting the VisualStyle property. The visual styles change the appearance of the border and splitter bar but will not affect the appearance of the panels.

The visual style does not affect the appearance of the expander button. For information on how to change the appearance of the expander button, see Expander Button Styles (page 26).

To learn how to set the VisualStyle property, see Changing the Visual Style.

Appearance of the Built-In Tab Schemes

The following table illustrates each of the five built-in visual schemes.

Formatting Appearance

ArcticFox

28

Office2007Black

Office2007Blue

Office2007Silver

Vista

Splitter Bar CSS StylingYou can apply CSS styling to modify the styling of a C1Splitter''s elements. C1Splitter offers four properties that allow you to alter the splitter bar with CSS styles. The properties are named and described in the table below.


CssClass Gets or sets the css class name for rendering the splitter bar in its default state.

CollapsedCssClass Gets or sets the css class name for rendering the splitter bar while it is collapsed.

DragCssClassGets or sets the css class name for rendering the splitter bar while it is being dragged.

29

HoverCssClassGets or sets the css class name for rendering the splitter bar while mouse is over it.

You can add CSS styles to the control by adding a CSS style sheet to your project and setting an element's property to one of the CSS classes specified in your style sheet. To change the color of the default splitter bar, for example, you would add a class similar to the following to the style sheet:

.SplitterResting{ Background-color:Red;}

Once the class is added to the style sheet, you can assign the SplitterResting class to the CssClass property to apply the background color to the splitter bar.

CSS style sheets are particularly useful if you have numerous controls that you want to add the same styles to. For example, you can create one style sheet that specifies the characteristics of a control's border and apply it to both a C1Splitter control and a C1TabControl control.

For information about applying CSS styles to the splitter panels, see Panel CSS Styling (page 32).

For task-based help on CSS styling, see Applying CSS Styles to C1Splitter.

Splitter Bar Image StatesTo create collapsible and expandable panels, the splitter bar requires either the CollapseImageUrl and ExpandImageUrl properties or a built-in splitter image applied to the splitter bar to generate the expand/collapse functions.

When a collapsible and expandable splitter is created it can have four states. Each state is determined by its property setting and user action.

The following table lists the four available image states:

Image State Property Setting Description

Collapsed Normal CollapseImageUrl = ~/Images/imagename.gif

Mouse does not hover over collapsed image bar.

Collapsed Hover CollapseHoverImageUrl = ~/Images/imagename.gif

Mouse hovers over collapsed image bar.

Expanded Normal ExpandImageUrl = ~/Images/imagename.gif

Mouse does not hover over expanded image bar.

Expanded Hover ExpandHoverImageUrl = ~/Images/imagename.gif

Mouse hovers over expanded image bar.

Splitter Bar Width and PositionYou can specify the width of your divider through the Width property. To create a more defined split, you can increase the width of your splitter bar.

You can determine the location of the splitter, in pixels, from the left or top edge of the C1Splitter through the SplitterDistance property. This property is also useful when determining the splitter bar's position at run time.

30

Splitter Bar ToolTipThe splitter bar has a ToolTip property that you can use to create user-friendly Web pages or applications. You can set the ToolTip property to a string that provides a description or instructions regarding the splitter bar. For more information on adding a ToolTip to the splitter bar, see Adding a ToolTip to the Splitter Bar.

Splitter Bar Animation EffectsThe following topics provide information about Splitter for ASP.NET AJAX's animation and transition effects.

Animation Effect Descriptions

C1Splitter contains thirty-one built-in animation effects that change the reaction of the splitter bar when it is moved. The default transition is EaseLinear, but you can set it to another effect using the Easing property.

For task-based help on using transition effects, see Using Animation Effects.

31

The table below describes each animation effect:

Name Description

FadeIn Expands body of the control so that it appears to fade in.

FadeOut Collapses the body of the control, so that it appears to fade out.

ScrollInFromTop Expands the body of the control, scrolling into view from the top.

ScrollInFromRight Expands the body of the control, scrolling into view from the right.

ScrollInFromBottom Expands the body of the control, scrolling into view from the bottom.

ScrollInFromLeft Expands the body of the control, scrolling into viewfrom the left.

ScrollOutToTop Collapses the body of the control, scrolling out of view to the top.

ScrollOutToRight Collapses the body of the control, scrolling out of view to the right.

ScrollOutToBottom Collapses the body of the control, scrolling out of view to the bottom.

ScrollOutToLeft Collapses the body of the control, scrolling out of view to the left.

Fold Collapses the body of control vertically and then horizontally so it appears to unfold.

UnFold Expands the body of control horizontally and then vertically so it appears to unfold.

OpenVertically Expands the body of control vertically from the center of the body area.

CloseVertically Collapses the body of control vertically from the center of the body area.

OpenHorizontally Expands the body of control horizontally from the center of the body area.

CloseHorizontally Collapses the body of control horizontally from the center of the body area.

Shake Expands or Collapses the body of control with a horizontal shaking motion.

Bounce Expands or Collapses the body of control with a vertical bouncing motion.

DropInFromTop Expands the body of the control from below the control to the top.

DropInFromRight Expands the body of the control from the left of the control to the right.

DropInFromBottom Expands the body of the control from above the control to the bottom.

DropInFromLeft Expands the body of the control from the right of the control to the left.

DropOutToTop Collapses the body of the control out to above the control.

32

DropOutToRight Collapses the body of the control out to the right of the control.

DropOutToBottom Collapses the body of the control out to below the control.

DropOutToLeft Collapses the body of the control out to the left of the control.

Animation Effect Duration

You can set the length of C1Splitter's animation effect takes using the Duration property. The unit of time used for specifying animation effect duration is in milliseconds, and the default setting for the Duration property is 500milliseconds (or half a second). Increase this value for longer animation effect, and decrease this number for a shorter animation effect.

For task-based help on using the Duration property, see Using Animation Effects.

Splitter Panel's Appearance and BehaviorC1Splitter''s panels include several appearance properties to visually enhance and customize the control. The panel's style and layout can easily be customized by using the SplitterPanel''s appearance properties.

C1Splitter''s panels also include several useful behavioral properties for controlling the panel's minimum size and determining if the panel is collapsed.

The following section details the appearance and behavior properties used to control the style and behavior of the splitter panels.

Panel LayoutC1Splitter has a WYSIWYG editor that allows you to view the end result without having to run the project. With the WYSIWYG designer interface C1Splitter supports, it makes it simple to arrange child controls in the containers of the panels because C1Splitter displays them as it would at run time.

You can add as many child controls to each panel by dragging and dropping each control into the desired panel. When you add a child control to the C1Splitter, it places the child control in the top left corner of the panel by default.

Panels can be selected on the Web form by clicking anywhere inside the rectangular box.

The WYSIWYG designer interface makes it simple to add child controls to a specific splitter panel via drag and drop. You also can add child controls programmatically to a specific splitter panel through the SplitterPanel object since it is a control.

Panel CSS StylingYou can apply CSS styling to modify the styling of a C1Splitter''s elements. C1Splitter offers two properties that allow you to alter the splitter panel with CSS styles. The properties are named and described in the table below.


C1Splitter.CssClass Sets the CSS class that is applied to the entire control.

mk:@MSITStore:C:%5CDocuments%20and%20Settings%5Ckaraj%5CDesktop%5CC1Expander.chm::/XMLDocuments/C1ExpanderRef/html/P_C1_Web_UI_Controls_C1Expander_C1Expander_ExpandDuration.htm

33

CssClass Gets or sets the CSS class for the splitter panel.

You can add CSS styles to the control by adding a CSS style sheet to your project and setting an element's property to one of the CSS classes specified in your style sheet. To change the font of one of the panels, for example, you would add a class similar to the following to the style sheet:

.Font{ font-family:Comic Sans MS;

font-size:x-large; color:Purple; }

Once the class is added to the style sheet, you can assign the class ("Font") to the CssClass property to apply the new font to the splitter panel. If you want to apply the styles to the entire control, set the C1Splitter.CssClassproperty to the class name instead.

CSS style sheets are particularly useful if you have numerous controls that you want to add the same styles to. For example, you can create one style sheet that specifies the characteristics of a control's border and then apply it to both a C1Splitter control and a C1TabControl control.

To add a style sheet to your project, select Website | Add New Item from the Visual Studio's toolbar to open the Add New Item dialog box. Select Style Sheet from the box and click Add to add it to your Web project.

Note: You will have to link your style sheet to your project by adding the following line of code between the <head></head> tags in your .aspx page: <link href="StyleSheet.css" type="text/css"

rel="stylesheet"/>

For information about applying CSS styles to the splitter panels, see Splitter Bar CSS Styling (page 28).

For task-based help on CSS styling, see Applying CSS Styles to C1Splitter.

Collapsible and Expandable PanelsYou can use the Collapsed property to specify a collapsed or expanded panel. The panels in C1Splitter can easily be collapsed or expanded by setting the Collapsed property to True or False (see Setting a Collapsed Splitter Panel). Once the property is set, you can click on the expander button to collapse or expand the panels.

The following image illustrates Panel1's Collapsed property set to True:

34

You may want to provide visual feedback, such as an image that represents a collapsed or expanded panel. The C1Splitter control provides additional properties for applying collapsible and expandable images - and, in addition,hover styles - to splitter bar, which enables you to create a friendlier user interface. You can use the CollapseImageUrl and ExpandImageUrl to apply collapsible and expandable images.

The CollapseHoverImageUrl and ExpandImageUrl properties can be used to apply hover styles to collapsible and expandable images.

Panel ScrollingC1Splitter provides different types of scrollbars to use for the panels. You can specify whether you would like horizontal or vertical scrollbars to appear on the panel through the ScrollBars property. The ScrollBars property includes the following values for you to choose from: None, Horizontal, Vertical, Both, and Auto. Auto, the default setting for the ScrollBars property, enables C1Splitter to automatically add vertical and/or horizontal scrollbars when the content information is larger than the panel's size. If you prefer not to use scrollbars, then you can set both panels' ScrollBars property to None.

Each panel can have a different type of scrollbar. This is beneficial when each panel contains different controls that take up more horizontal space and vice-versa in the panel. This also gives you more flexibility in how you set up the layout in your splitter panels.

The following image illustrates a C1Splitter with a vertical scrollbar in the first panel and a horizontal and vertical scrollbar in the second.

35

Panel SizingYou can determine the panel's minimum size as well as determine how the panels size when you move the splitter bar.

Controlling the Panel Size

You have complete control over the size of the panels in the C1Splitter control. You can specify the minimum width or height of each panel to prevent the user from resizing it too small through the MinSize property (see Setting a Minimum Size for a Splitter Panel). This allows more flexibility in the interface for the designer and prevents important information from being hidden.

Incremental Resize Mode

In incremental sizing mode, the panels change to a particular integral span to prevent items in the panel from being partially displayed. The integral span can be specified by the Increment property. For task-based help on the Increment property, see Using Incremental Resizing.

In incremental sizing mode, the panels size in a particular span to prevent images in the panel from being partially displayed.

Panel PreviewingC1Splitter contains a property, Ghost, which determines whether or not a preview of a panel's contents will be displayed when users drag the splitter bar to resize one of the panels. When Ghost is set to True, users will see a translucent preview of a panel's content while they are moving the splitter bar. When Ghost is set to False, users will only see a dotted line indicating the placement of the splitter bar; the content of the panel will not be revealed until after the splitter bar is released. The Ghost property is set to False by default.

The table below illustrates the two settings of the Ghost property:

Ghost = False Ghost = True

36

For task-based help on using the ghosting effect, see Using the Ghost Effect.

Split TypesThe default C1Splitter has a simple vertical layout. The vertical layout has a left and right panel separated by a divider. The divider is referred to as the bar.

C1Splitter contains four basic types of splits:

Horizontal Split

Vertical Split

Compound Split

Full Split

Horizontal SplitA horizontal split divides the panels into two or more rows and is represented in the Web page by one or more C1Splitter bars.

The following image illustrates a horizontal split:

37

For task-based help on creating a horizontal split, see Creating a Horizontal Split.

Vertical SplitA vertical split is the default split type for C1Splitter. It divides the panels into two or more columns and is represented in the Web page by one or more C1Splitter bars.

The following image illustrates a vertical split:

For task-based help on creating a vertical split, see Creating a Vertical Split.

Compound SplitA compound split is a nested split, meaning that the initial C1Splitter control contains one or more C1Splittercontrols. A compound split can contain two or more vertical splitters, two or more horizontal splitters, or a combination of vertical and horizontal splitters.

A compound split can be created by directly dropping a child C1Splitter into the panel of the parent C1Splitter. For more information on creating a compound split, see Creating a Compound Split.

38

The most common usage of a compound splitter is full-cover nesting. To create full cover nesting, set the nested splitter control's width or height to 100% to make it fully extend to the size of the parent's panel. The following image illustrates a full-cover nesting in a compound splitter:

For task-based help on creating a compound split, see Creating a Compound Split.

Full-Size SplitA full-size split is a horizontal or vertical split that stretches to fill the content area of a Web browser. The following image illustrates a full-size splitter in an Internet Explorer browser:

39

To create a full-size split, set the C1Splitter.FullSplit property to True. For task-based help on creating a full-size split, see Creating a Full-Size Split.

Client-Side FunctionalityC1Splitter includes a rich and flexible client-side object model. Several server-side properties and methods can be used on the client-side. Client-side events can be accessed from the Properties window.

When a C1Splitter control is added to a Web project, an instance of the client-side splitter will be created automatically. For example, if you have a splitter control with the server-side ID of "C1Splitter1", you can use the following script to acquire a reference to its client object:

var newSplitter = $find("<%= Splitter1.ClientID %>");

Using C1Splitter's client-side functionality, you can implement many features in your Web page without having to post back to the server. Thus, using client-side methods and properties will increase the efficiency of your Web site.

The following topics describe the available client-side properties, methods, and events.

Client-Side PropertiesThe 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).

The following JavaScript example sets the width of a C1Splitter:

<script id="ScriptSample" type="text/javascript">function SetSplitterWidth (){ $find("<%=C1Splitter1.ClientID%>").set_width(150);};</script>

For a task-based help topic that illustrates how to set the width and height of a C1Splitter control on the client side, see Setting the Height and Width at Run Time.

Working with Client-Side EventsC1Splitter includes several client-side events that allow you to manipulate the embedded items in the panels of the splitter control when an action such as sizing, collapsing, and expanding occurs.

By using client-side code such as JavaScript you can implement many features to your Web page without the need to send information to the Web server, which takes time. Thus, using client-side code can increase the efficiency of your Web site.

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.


40

OnClientSize Gets or sets the JavaScript function name that would be called at client side when starting to drag the splitter.

OnClientSized Gets or sets the JavaScript function name that would be called at client side when completing a drag operation on the splitter.

OnClientSizing Gets or sets the JavaScript function name that would be called at client side when dragging the splitter.

OnClientCollapse Gets or sets the JavaScript function name that would be called before Panel1 is collapsed.

OnClientCollapsed Gets or sets the JavaScript function name that would be called when Panel1 is collapsed by clicking the collapse/expand image.

OnClientExpand Gets or sets the JavaScript function name that would be called before Panel1 is expanded out.

OnClientExpanded Gets or sets the JavaScript function name that would be called when Panel1 is expanded out by clicking the collapse/expand image.

These events are useful for providing client-side interactivity. With these events you can provide more control over C1Splitter by controlling how the users interact with C1Splitter. For example you can restrict sizing of the panels, collapsing, or expanding on the client side.

To process these events, you must add JavaScript functions to your Web form's source page, then have the control call these functions in response to the C1Splitter client-side events. Each of the client-side events requires two parameters: the ID that identifies the sender C1Splitter and an eventArgs that contains the data of the event.

You can use the server-side properties, listed in the preceding 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 "ClientSizing" to respond to the mouse dragging the splitter bar, you would set the OnClientSizing property to "ClientSizing".

Splitter for ASP.NET AJAX SamplesPlease 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.

You can access samples from the ComponentOne Control Explorer. To view samples, click the Start button and then click ComponentOne | Studio for ASP.NET | Control Explorer. The following table provides a short overview of each sample.

Sample Description

Visual Styles Illustrates C1Splitter's five built-in visual styles.

Animation Demonstrates the animation and transition effects that can be applied to the control.

Sizing Demonstrates the various resizing actions that can be used in the splitter control. This also demonstrates vertical, horizontal, and compound splits.

41

Splitter for ASP.NET AJAX Task-Based HelpThe task-based help section assumes that you are familiar with programming in the Visual Studio ASP.NET environment and have a general understanding of the ComponentOne Splitter control.

Each topic provides a solution for specific tasks using the C1Splitter control. By following the steps outlined in each topic, you will be able to create projects using a variety of C1Splitter features.

This task-based help section assumes that you have created a new AJAX-enabled ASP.NET project. ComponentOne Splitter 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 C1Splitter 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. For additional information on this topic, see Creating an AJAX-Enabled ASP.NET Project (page 12).

Adding Content to the Splitter PanelsA C1Splitter control can hold arbitrary controls or display text. The following topics will instruct you on adding content to the pages of your C1Splitter control.

Adding Arbitrary Controls to C1Splitter

You can add arbitrary controls to each panel of the C1Splitter control using a simple drag-and-drop operation or HTML. In this topic, you will add a Button control to Panel1 and a TextBox control to Panel2.

In Design View


1. Add a C1Splitter control to your Web project.

2. Select a Button control from the Visual Studio Toolbox and drag it into the Panel1.

3. Select a TextBox control from the Visual Studio Toolbox and drag it into Panel2.

42

In Source View



2. Click the Source tab to enter Source view.

3. Locate the <Panel1> tags and place the following tag between them:

<ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" />

</ContentTemplate>

4. Locate the <Panel2> tags and place the following tag between them:

<ContentTemplate><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</ContentTemplate>

In Code



2. Select a PlaceHolder control from the Visual Studio Toolbox and drag it into the Panel1.

PlaceHolder1 appears in Panel1.

3. Select a PlaceHolder control from the Visual Studio Toolbox and drag it into the Panel2.

PlaceHolder2 appears in Panel2.

4. In the Solution Explorer window, right-click on the project and select View Code to enter the code editor.

5. Create a Button control and add text to it by entering the following code to the Page_Load event:

Visual BasicDim nuButton As Button = New Button()nuButton.Text = "Hello World!"

C#Button nuButton = new Button();nuButton.Text = "Hello World!";

6. Create a TextBox control:

Visual BasicDim nuTextBox As TextBox = New TextBox()

C#

43

TextBox nuTextBox = new TextBox();

7. Add the Button control to the PlaceHolder1:

Visual BasicPlaceHolder1.Controls.Add(nuButton)

C#PlaceHolder1.Controls.Add(nuButton);

8. Add the TextBox control to PlaceHolder2:

Visual BasicPlaceHolder2.Controls.Add(nuTextBox)

C#PlaceHolder2.Controls.Add(nuTextBox);

9. Run the program.

This Topic Illustrates the Following:

The following graphic depicts a C1Splitter control with a Button control in Panel1 and a TextBox control in Panel2.

Adding Text to a Splitter Panel

In this topic, you will learn how to add text to a C1Splitter control using the designer and HTML markup.

In Design View

To add text to a panel, simply place your cursor inside the panel and type (or copy) the text into the panel.

44

Once you've added text to the page, you can use Visual Studio's Formatting toolbar (to view this toolbar, use the following path: View | Toolbars | Formatting) to format the text. The image below features a C1PageView with formatted text:

In Source View

You can add text to a C1Splitter panel in Source view by placing text between the <Panel1> or <Panel2> tags. To format the text, you would use HTML markup.


10. Add a C1Splitter to your project.

11. Switch to Source view and paste the following markup and text between the <Panel1> tags:

<ContentTemplate>You can also add text to a <b>C1Splitter</b> control in Source view. Simply place the text between the <span style="color: #0000ff; font-family: Courier New"><Panel></span> tags and use HTML markup to format the text.

</ContentTemplate>

12. Click the Design tab to enter Design view and observe that text has been added to Panel1 of your C1Splitter control. The result will resemble the following image:

Applying CSS Styles to C1SplitterIn situations where you need to apply the same style settings to several controls, you might want to use CSS style sheets to keep the intricacy and repetition of your code to a minimum. With a CSS style sheet, you can create classes specifying layout, border types, color, and typographic characteristics; once those classes are created, you can apply them to numerous controls, thus eliminating the need for code duplication.

45

You can add CSS styles to the C1Splitter control by adding a CSS style sheet to your project and setting an element's property to one of the CSS classes specified in your style sheet. In the following topics, you will learn how to apply CSS styles to the different areas (C1Splitter, Panel1, Panel2, and SplitterBar) and states (collapsed, expanded, and hover) of the C1Splitter control.

These topics only cover CSS styling of a control. For information on how to style the C1Splitter control using the designer, HTML, or code, see Changing the Appearance of a C1Splitter control (page 54).

For more information on CSS Styling, see Splitter Bar CSS Styling (page 28) and Panel CSS Styling (page 32).

Adding a Background Image to an Individual Panel

This topic illustrates how to apply a border style to the first panel of a C1Splitter control using CSS styles. To accomplish this task, you'll create a CSS style sheet, add a class specifying the background image, and then call that class by setting CSSClass property.



2. Add an image to your project by completing the following steps:

a. Right-click on the project and select Add Existing Item.

The Add Existing Item dialog box appears.

b. Navigate to the folder where your image is located and select your image.

c. Press Add to add the image to the project.

3. In Solution Explorer, right-click on the project name and select Add New Item.

The Add New Item dialog box appears.

4. In the Add New Item dialog box, complete the following tasks:a. From the Templates pane, select Style Sheet.

b. Enter "BackgroundStyles.css" into the Name field.

c. Press Add to close the Add New Item dialog box.

BackgroundStyles.css is added to your project.

5. In Solution Explorer, double-click BorderStyle.css to open the file in Visual Studio. The CSS body style appears by default:

body {}

6. Place the following CSS code after the right bracket of the body style, replacing YourImage.gif with the name of the image you added in step 2:

46

.BackgroundStyles{

background-image:url(YourImage.gif);}

7. Return to the Design view of your .aspx page and complete the following tasks:

a. Right-click the C1Splitter control to open its context menu and select Properties.

C1Splitter''s properties take focus in the Properties window.

b. Expand Panel1's node and set the CSSClass property to "BackgroundStyles".

8. Now you will have to link the Web project to the BorderStyle.css style sheet by calling it in the project's Source code. To link the style sheet to the project, click the Source tab to switch to Source view and place the following line of code between the <head> tags:

<link href="BackgroundStyles.css" type="text/css" rel="stylesheet"/>

9. Click the Design tab to return to Design view. Observe that your background image has been added to Panel1.


The following image depicts Panel1 of a C1Splitter control with a rainbow background image:

Adding a Border to a Panel

The following topic illustrates how to apply a border style to the first panel of a C1Splitter control using CSS styles. At the completion of this topic, Panel1 of the C1Splitter control will have a thick, inset border that is lime green in color. To accomplish this task, you'll create a CSS style sheet, add a class specifying border styles to that style sheet, and then call that class by setting Panel1's CSSClass property.






47

b. Enter "BorderStyle.css" into the Name field.


BorderStyle.css is added to your project.


5.body {}

6. Place the following CSS code after the right bracket of the body style:

7..C1Splitter_Border

{border-style:inset;border-width:thick;border-color:Lime;

}




b. Expand Panel1's node and set the CSSClass property to "C1Splitter_Border".


<link href="BorderStyle.css" type="text/css" rel="stylesheet"/>

48

10. Press F5 to run the program. Observe that Panel1 has adopted the border styles specified in the BorderStyle.css style sheet.


By completing the steps in this topic, you have added a thick, lime green inset border to Panel1 of the C1Splittercontrol. The final product will resemble the following image:

Adding a Border to the C1Splitter Control

This topic illustrates how to apply a border style to the entire C1Splitter control using CSS styles. At the completion of this topic, the C1Splitter control will be surrounded by a thick, dotted border that is fuchsia in color. To accomplish this task, you'll add a CSS style sheet to the project, create a CSS class specifying the border styles, and then call that class by setting the CSSClass property.

To add a border to the C1Splitter control, complete these steps:








BorderStyle.css is added to your project.

49


5.body {}


.C1Splitter_Border{

border-color:Fuchsia;border-style:dotted;border-width:thick;

}

7. Return to the Design view of your .aspx page.

8. Right-click the C1Splitter control to open its context menu and select Properties.


9. Locate C1Splitter''s CSSClass property and enter "C1Splitter_Border" into its text box.


11.<link href="BorderStyle.css" type="text/css" rel="stylesheet"/>

12. Press F5 to run the program. Observe that Panel1 has adopted the border styles specified in the BorderStyle.css style sheet.


50

By completing the steps in this topic, you have added a thick, fuchsia, dotted border to the C1Splitter control. The final product will resemble the following image:

Adding a Font Style to Each Panel

In this topic, you will learn how to apply different font styles to the two panels of a C1Splitter control using CSS styles. To apply a different font style and color to each panel, you will create a separate CSS class for Panel1 and Panel2 and apply values to the font-style, font-family, font-size, and color properties.








FontStyles.css is added to your project.

4. In Solution Explorer, double-click FontStyles.css to open the file in Visual Studio. The CSS body style appears by default:

5.

51

body {}


.Panel1_Font{ font-family:Georgia; font-style:oblique; font-size:medium; color:Red; text-align:center;}.Panel2_Font{ font-family:Arial; font-style:italic; font-size:large; color: #4169E1; text-align:left;}


a. Place your cursor in Panel1 and enter "This is what the text in Panel1 looks like."

b. Place your cursor in Panel2 and enter "This is what the text in Panel2 looks like."

c. Right-click the C1Splitter control to open its context menu and select Properties.


d. Expand Panel1's node and set the CSSClass property to "Panel1_Font".

e. Expand Panel2's node and set the CSSClass property to "Panel2_Font".

8. Now you will have to link the Web project to the FontStyles.css style sheet by calling it in the project's Source code. To link the style sheet to the project, click the Source tab to switch to Source view and place the following line of code between the <head> tags:

52

<link href="FontStyles.css" type="text/css" rel="stylesheet"/>

9. Press F5 to run the program and observe that each panel has a distinctive font style.


In this topic, you've added font styles to each panel of the C1Splitter control. The final product will resemble the following image.

Adding Gradient Backgrounds to Individual Panels

The following topic demonstrates how to apply gradient backgrounds to the splitter panels using CSS styles. Upon completion of this topic, Panel1 and Panel2 of the C1Splitter control will have distinctive gradient backgrounds, with Panel1 featuring a horizontal gradient and Panel2 featuring a vertical gradient. To accomplish this task, you'll create a CSS style sheet with two classes and assign each class to a panel using the CSSClass property.






b. Enter "GradientStyles.css" into the Name field.


GradientStyles.css is added to your project.

53

4. In Solution Explorer, double-click GradientStyles.css to open the file in Visual Studio. The CSS body style appears by default:

body {}


.Panel1_Gradient{ filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#FF0000', EndColorStr='#FFB6F1')}

.Panel2_Gradient{ filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#F0F0F0', EndColorStr='#000000')}

Observe that you are adding two CSS classes to the style sheet: Panel1_Gradient and Panel2_Gradient. Panel1_Gradient specifies a horizontal gradient that starts out red and blends into white. Panel2_Gradient specifies a vertical gradient that starts with white and blends into black.




b. Expand Panel1's node and set the CSSClass property to "Panel1_Gradient".

54

c. Expand Panel2's node and set the CSSClass property to "Panel2_Gradient".

7. Now you will have to link the Web project to the GradientStyles.css style sheet by calling it in the project's Source code. To link the style sheet to the project, click the Source tab to switch to Source view and place the following line of code between the <head> tags:

8.<link href="GradientStyles.css" type="text/css" rel="stylesheet"/>

9. Press F5 to run the program. Observe that Panel1 and Panel2 feature gradient backgrounds specified in the GradientStyles.css style sheet.


In this topic, you added horizontal and vertical gradient backgrounds to the panels of the C1Splitter control by linking each panel's CSSClass property to a CSS class. The final product will resemble the following image:

Changing the Appearance of a C1Splitter ControlThe following topics detail how to modify the appearance of a C1Splitter control using the Designer, HTML, and code. For information on styling the control with CSS style sheets, see Applying CSS Styles to C1Splitter (page 44).

55

Changing the Background Color of Panels

You can quickly set the background color of Panel1 or Panel2 using the BackColor property. In this topic, you'll learn how to apply different colors to each panel of the C1Splitter control in Design view, in Source view, and in code.

In Design View


1. Add C1Splitter to the Web form.

2. Right-click on the control to open its context menu and select Properties.

3. Expand the Panel1 node to reveal its list of properties.

4. Set Panel1’s background color by completing one of the following:

In Visual Studio 2005: Click the BackColor drop-down arrow, select the Web tab, and choose PowderBlue from the list.

OR

In Visual Studio 2008: Click the BackColor ellipsis button to open the More Colors dialog box and then, in the Value text box, enter “Hex={B0,E0,E6}”.

5. Expand the Panel2 node to reveal its list of properties.

6. Set Panel2’s background color by completing one of the following:

In Visual Studio 2005: Click the BackColor drop-down arrow, select the Web tab, and choose PapayaWhip from the list.

OR

In Visual Studio 2008: Click the BackColor ellipsis button to open the More Colors dialog box and then, in the Value text box, enter “Hex={FF,EF,D5}”.

Panel1 appears with PowderBlue background, while Panel2 appears with a PapayaWhipbackground.

In Source View

To add a background color to Panel1 and Panel2, place the following markup between the <cc1:C1Splitter>and </cc1:C1Splitter> tags: <Panel2 BackColor="PapayaWhip"></Panel2><Panel1 BackColor="PowderBlue"></Panel1>

In Code


1. Import the following namespace into your project:

Visual BasicImports C1.Web.UI.Controls.C1Splitter

C#using C1.Web.UI.Controls.C1Splitter;

56

2. Place the following code to the Page_Load event to set the BackColor properties of Panel1 and Panel2:

Visual BasicC1Splitter1.Panel1.BackColor = System.Drawing.Color.PowderBlueC1Splitter1.Panel2.BackColor = System.Drawing.Color.PapayaWhip

C#C1Splitter1.Panel1.BackColor = System.Drawing.Color.PowderBlue;C1Splitter1.Panel2.BackColor = System.Drawing.Color.PapayaWhip;

3. Run the program.


The image below shows Panel1 with a PowderBlue background and Panel2 with a PapayaWhip background.

Changing the Border Color

By default, the color of the C1Splitter border is determined by its visual style (page 27); however, you can change the color of that border using the BorderColor property. In this topic, you will learn how to set the BorderColorproperty in Design view, in Source view, and in code.

In Design View:


1. Click C1Splitter''s smart tag ( ) to open the C1Splitter Tasks menu.

2. To set the border color, complete one of the following:

In Visual Studio 2005: Click the Border Color drop-down arrow, select the Web tab, and choose LawnGreen from the list.

OR

In Visual Studio 2008: Click the Border Color ellipsis button to open the More Colors dialog box and then, in the Value text box, enter "Hex={7C,FC,00}".

The C1Splitter control adopts a green border.

In Source View

Add BorderColor="LawnGreen" to the <cc1:C1Splitter> so that it resembles the following:

57

<cc1:C1Splitter ID="C1Splitter2" runat="server" BorderColor="LawnGreen"UseEmbeddedVisualStyles="True" VisualStyle="Office2007Silver">

Switch to Design view and observe that the C1Splitter control has adopted a green border.

In Code





2. Place the following code to the Page_Load event to set the BorderColor property:

Visual BasicC1Splitter1.BorderColor = System.Drawing.Color.LawnGreen;

C#C1Splitter1.BorderColor = System.Drawing.Color.LawnGreen;

3. Run the program and observe that the C1Splitter control has adopted a green border.


The image below shows a C1Splitter control with a green border.

Changing the Size of a C1Splitter

By default, the size of a C1Splitter control is 250 pixels high and 400 pixels wide. The C1Splitter control can be resized using a click-and-drag operation or by setting the Height and Width properties. In this topic, you will learn how to set the Height and Width properties in Design view, in Source view, and in code.

In Design View


58

In the Properties window, set the Height property to "150" and the Width property to "250".

OR

Grab the sizing handle at the bottom-right corner of the control and then drag your cursor upward and leftward until the Height is set at 150 and the Width is set at 250.

In Source View

Add Height="150px" and Width="250px" to the <cc1:C1Splitter> tag so that the tag resembles the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="150px" Width="250px">

Adjusting the Size in Code





2. Place the following code to the Page_Load event to set the Height and Width properties:

Visual BasicC1Splitter1.Height = 150C1Splitter1.Width = 250

C#C1Splitter1.Height = 150;C1Splitter1.Width = 250;

59

3. Run the program.


The image below depicts a C1Splitter control with a height of 150 pixels and a width of 250 pixels:

Changing the Visual Style

C1Splitter features five embedded visual styles that you can apply to the control with just a few clicks. This topic illustrates how to change the control's visual style in Design view, Source view, and in code.

For more information on visual styles, see Splitter Control Visual Styles (page 27).

In Design View


1. Click C1Splitter's smart tag to open the C1Splitter Tasks menu.

2. Click the VisualStyle drop-down arrow and then select a visual style from the list. For this example, choose Office2007Blue.

The C1Splitter control adopts the Office2007Blue visual style.

In Source View

To change the visual style of your C1Splitter to Office2007Blue in Source view, addVisualStyle="Office2007Blue" to the <cc1:C1Splitter> tag so that the tag resembles the following:

60

<cc1:C1Splitter ID="C1Splitter1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles">

In Code



Visual BasicImports C1.Web.UI.Controls

C#using C1.Web.UI.Controls;

2. Add the following code to the Page_Load event:

Visual BasicMe.C1Splitter1.VisualStyle = "Office2007Blue"

C#this.C1Splitter1.VisualStyle = "Office2007Blue";

3. Run the program.


The following image shows a C1Splitter with the Office2007Blue visual scheme:

Changing Splitter Bar Location

The default location of the splitter bar is 100 pixels from the left for a vertical split and 100 pixels from the top for a horizontal split. You can adjust the initial location of the splitter bar using the SplitterDistance property. In this topic, you will learn how to set the SplitterDistance property in Design view, in Source view, and in code.

61

In Design View



2. Right-click on the control and select Properties.

3. In the Properties window, locate the SplitterDistance property and specify a number to represent the location of the splitter bar from the left edge of the splitter bar. For this example, we'll set it to "50".

4. Run the program.

In Source ViewTo set the splitter bar location, place SplitterDistance="50" within the <cc1:C1Splitter> tag. Once the SplitterDistance property has been set, the markup will resemble the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="251px" Width="217px" SplitterDistance="50">

In Code





2. Add the following code to the Page_Load event to set the SplitterDistance property:

Visual BasicC1Splitter1.SplitterDistance = 50

C#C1Splitter1.SplitterDistance = 50;

3. Run the program.


The following image depicts a C1Splitter with a splitter set 50 pixels from the left side of the control:

62

Changing the Splitter Bar Style

C1Splitter features four built-in splitter bar styles that you can apply to your splitter bar using the SplitterStyleproperty. This topic illustrates how to change the splitter bar style in Design view, Source view, and in code.

For more information on splitter bar themes, see Expander Button Styles (page 26).

In Design View


1. Click C1Splitter's smart tag to open the C1Splitter Tasks menu.

2. Click the SplitterStyle drop-down arrow and then select a visual style from the list. For this example, choose Thick.

The splitter bar adopts the Thick splitter style.

In Source View

To change the style of the splitter bar to Thick in Source view, add SplitterStyle="Thick" to the<cc1:C1Splitter> tag so that it resembles the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" VisualStyle="ArcticFox" SplitterStyle="Thick" VisualStylePath="~/C1WebControls/VisualStyles">

In Code

63





2. Add the following code to the Page_Load event to change the SplitterStyle setting to Thick:

Visual BasicC1Splitter1.SplitterStyle = SplitterStyle.Thick

C#C1Splitter1.SplitterStyle = SplitterStyle.Thick;

3. Run the program.


The image below displays a C1Splitter control with its SplitterStyle setting set to Thick. Note that this image depicts the Thick setting as it appears in the ArcticFox scheme; the styling of the splitter bar will vary depending on the theme you are using. To view a table comparing the theme variations of each splitter bar style, see Expander Button Styles (page 26).

Changing the Splitter Width

You can easily widen the splitter bar using the Width property. In this topic, you will learn how to set the Widthproperty in Design view, in Source view, and in code.

For more information on the splitter width, see Splitter Bar Width and Position (page 29).

In Design View



2. Right-click on the control to open its context menu and select Properties.

3. In the Properties window, click the Bar node to reveal the Width property.

4. Set the Width property to "40".

In Source View

To increase the width of the splitter bar, place <Bar Width="40" /> between the <cc1:C1Splitter> tag. Once the Width property has been set, the markup will resemble the following:

<cc1:C1Splitter ID="C1Splitter6" runat="server" Height="251px" Width="217px"><Bar Width="40" />

</cc1:C1Splitter>

64

In Code





2. Add the following code to the Page_Load event to set the Width property:

Visual BasicC1Splitter1.Bar.Width = 40

C#C1Splitter1.Bar.Width = 40;

3. Run the program.

This topic illustrates the following:

The following image displays a horizontal C1Splitter with its Width property set to 40 pixels:

Client-Side TasksThe following topics illustrate how to code various client-side tasks.

Setting the Height and Width at Run Time

C1Splitter includes a rich and flexible client-side object model that allows you to set the control's properties without postback. In this topic, you'll use this feature to create a client-side script that allows users to seamlessly resize the C1Splitter control at run-time.


65

1. Add a C1Splitter control to your Web page or application.


3. Add two TextBox controls and a Button control to the project by placing the following markup beneath the </cc1:C1Splitter> tag:

<br />

Splitter Height: <input id="Height" type="text" size="3" value="150"/> Splitter Width: <input id="Width" type="text" size="3" value="150"/> <input id="InputButton" type="button" value="Set Splitter Size" onclick="SetSplitterSize()"/> <br />

Observe that the onclick event of the button control calls a function named "SetSplitterSize()". We will write this function in the next step.

4. Add the following JavaScript code above the <BODY> tag:

<script id="newScript" type="text/javascript">function SetSplitterSize(){ $find("<%=C1Splitter1.ClientID%>").set_height(parseInt(document.getElementById('Height').value)); $find("<%=C1Splitter1.ClientID%>").set_width(parseInt(document.getElementById('Width').value));};</script>

5. Click the Design tab to return to Design view. The result resembles the following:

66

6. Press F5 to run the program.


Once your project is built, click Set Splitter Size and observe that the C1Splitter control has been resized to 150 by 150 pixels without postback. Now enter different numbers in the Splitter Height and Splitter Width boxes and click Set Splitter Size again to reset the control to your specifications.

Setting the Splitter Bar Distance at Run Time

C1Splitter includes a rich and flexible client-side object model that allows you to set the control's properties without postback. In this topic, you'll use this feature to create a client-side script that allows users to seamlessly change the location of the splitter bar at run-time.


1. Add a C1Splitter control to your Web page or application.


3. Add one TextBox control and a Button control to the project by placing the following markup beneath the </cc1:C1Splitter> tag:

Splitter Bar Distance: <input id="Distance" type="text" size="3" value="25"/> <input id="InputButton" type="button" value="Set" onclick="SetSplitterDistance()"/>

Observe that the onclick event of the button control calls a function named "SetSplitterDistance()". You will write this function in the next step.

4. Add the following JavaScript code above the <BODY> tag:

<script id="newScript" type="text/javascript">function SetSplitterDistance(){ $find("<%=C1Splitter1.ClientID%>").set_splitterDistance(parseInt(document.getElementById('Distance').value));};</script>

5. Click the Design tab to return to Design view. The result resembles the following:

67


Once your project is built, click Set; the splitter bar will be repositioned at 25 pixels from the left side of the control. Now enter different numbers in the Splitter Bar Distance box and click Set again to place the splitter bar in a different location.

Creating Different Split TypesThere are four types of splits that can be created with the C1Splitter control: horizontal split, vertical split, compound split, and full-size split. This section contains procedures for creating each type of split.

For more information on split types, see Split Types (page 36).

Creating a Horizontal Split

Creating a horizontal split is as simple as setting one property. In this topic, you'll learn how to set the Orientationproperty in Design view, Source view, and in code.

For more information on horizontal splits, see Horizontal Split (page 36).

In Design View


1. Add the C1Splitter control to the form.

2. In the Properties window, set the splitter's Orientation to Horizontal.

In Source View

To create a horizontal split, place Orientation="Horizontal" within the <cc1:C1Splitter> tag. Once the Orientation property has been set, the markup will resemble the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="212px" Orientation="Horizontal"Width="221px">

In Code



68



2. Add the following code, which sets the Orientation property, to the Page_Load event:

Visual BasicC1Splitter1.Orientation = Orientation.Horizontal

C#C1Splitter1.Orientation = Orientation.Horizontal;

3. Run the program.

This Topic Illustrates the Following:The splitter bar is now horizontal. The result of this topic will resemble the following image:

Creating a Vertical Split

Creating a vertical split is as simple as setting one property. In this topic, you'll learn how to set the Orientationproperty in Design view, Source view, and in code.

For more information on vertical splits, see Vertical Split (page 37).

In Design View



2. In the Properties window, set the splitter's Orientation to Vertical.

In Source View

To create a vertical split, place Orientation="Vertical" within the <cc1:C1Splitter> tag. Once the Orientation property has been set, the markup will resemble the following:

69

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="212px" Orientation="Vertical"Width="221px">

In Code






Visual BasicC1Splitter1.Orientation = Orientation.Vertical

C#C1Splitter1.Orientation = Orientation.Vertical;

3. Run the program.


The splitter bar is now vertical. The final result of this topic will resemble the following image:

Creating a Compound Split

You can use combine multiple C1Splitter objects to create compound splits. In this topic, you will learn how to nest a horizontal split within the first panel of a vertical split.

For more information on compound splits, see Compound Split (page 37).


70


The default vertical split layout appears for C1Splitter.

2. Select C1Splitter1, navigate to the Properties window, and set both the Height and Width properties to "212".

3. Drag another C1Splitter control from the Visual Studio Toolbox and drop it into the right panel (Panel1) of C1Splitter1. C1Splitter2 is added to right panel. Observe that vertical and horizontal scrollbars appear to accommodate for the large size of the control.

4. Now you will need to resize C1Splitter2 so that it fits in the right panel of C1Splitter1. You can do this using either of the following techniques:

Select C1Splitter2 and navigate to the Properties window. Adjust the Width property to "97" and its Height property to "210".

OR

Starting from the bottom-right corner of C1Splitter2, drag C1Splitter2's container leftward and upward until it fits snugly into the left panel (Panel1) of C1Splitter1.

5. Once C1Splitter2 is positioned correctly in the right panel, set its Orientation property to Horizontal.


The following image displays C1Splitter1 nested within the left panel of C1Splitter2:

71

Creating a Full-Size Split

A full-size split is a horizontal or vertical split that stretches to fill the content area of a Web browser. You can create a full-size split by setting one property: FullSplit. In this topic, you'll learn how to set the FullSplit property in Design view, Source view, and in code.

For more information on full-size splits, see Full-Size Split (page 38).

In Design View



2. In the Properties window, set the splitter's FullSplit property to True.

3. Run the program and observe that the control expands to the width and height of your Web browser.

In Source View


1. Click the Source button to enter Source view.

2. Place FullSize="True" within the <cc1:C1Splitter> tag so that the markup resembles the following:<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="212px" FullSize="True"Width="221px"


In Code






Visual BasicC1Splitter1.FullSplit = True

C#C1Splitter1.FullSplit = true;


72

Setting C1Splitter BehaviorsThe C1Splitter control has a list of properties that affect how the control behaves at run time. Some of the properties affect how the control acts when loaded, whereas others affect the users' interactions with the control. The following topics will instruct you on how to modify the run-time actions of the control.

Adding a ToolTip to the Splitter Bar

To add a ToolTip to display text when you hover over the splitter, simply set Tooltip property. In this topic, you will learn how to set the Tooltip property in Design view, in Source view, and in code.

For more information on ToolTips, see Splitter Bar ToolTip (page 30).

In Design View


1. Add a C1Splitter control to your Web form.

2. Right-click the C1Splitter control to open its context menu, then select Properties.

The Properties window appears with C1Splitter''s property list in focus.

3. In the Properties window, expand the Bar node.

4. Locate the Tooltip property and enter "Drag the bar to resize the viewing area" into its text box.

5. Save and run the project.

In Source View

To add a ToolTip to the splitter bar, place ToolTip="Drag the bar to resize the viewing area"within the <cc1:C1Splitter>tag. Once the Tooltip property has been set, the markup will resemble the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="212px" Orientation="Vertical" ToolTip="Drag the bar to resize the viewing area" Width="221px">

In Code





2. Add the following code, which sets the ToolTip property, to the Page_Load event:

Visual BasicC1Splitter1.ToolTip = "Drag the bar to resize the viewing area"

C#C1Splitter1.ToolTip = "Drag the bar to resize the viewing area";

73

3. Run the program.


After you've built the project, hover over the splitter bar and observe that a ToolTip has been added to the splitter bar. The result will resemble the following image:

Setting a Minimum Size for a Splitter Panel

In some instances, you might want to keep users from resizing a panel past a certain point. In Panel1, for example, you may have a stack of buttons that you want visible at all times. When confronted with that sort of situation, you can use the MinSize property to specify, in pixels, the size of the area that you don't want users to drag past. In this topic, you will learn how to set the MinSize property in Design view, in Source view, and in Code.

For more information on panel sizing, see Panel Sizing (page 35).

In Design View



2. Right-click on the control and select Properties. In the Properties window, expand the Panel1 node.

3. Set the MinSize property for Panel1 to "30".

4. Save and run your project.

In Source View

To make Panel1 a fixed-size panel, place <Panel1 MinSize="30"></Panel1> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags. Once the MinSize property has been set, the markup will resemble the following:


<Panel1 MinSize="30"></Panel1>

</cc1:C1Splitter>

In Code



74



2. Add the following code, which sets the MinSize property, to the Page_Load event:

Visual BasicC1Splitter1.Panel1.MinSize = 30

C#C1Splitter1.Panel1.MinSize = 30;

3. Run the program.


Once you've built the project, drag the splitter bar to the left and observe that it sticks at 30 pixels.

Setting a Collapsed Splitter Panel

To create a collapsed panel, use the Collapsed property. In this topic, you will learn how to set the Collapsedproperty in Design view, in Source view, and in code.

For more information on collapsed and expanded panels, see Collapsible and Expandable Panels (page 33).

In Design View



2. Right-click on the control and select Properties. In the Properties window, expand the Panel1 node and locate the Collapsed property.

3. Set the Collapsed property to True.

In Source View

To make Panel1 a collapsed panel, place <Panel1 MinSize="30"></Panel1> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags. The final markup will resemble the following:


<Panel1 Collapsed=True></Panel1>

</cc1:C1Splitter>

In Code




75


2. Add the following code, which sets the Collapsed property, to the Page_Load event:

Visual BasicC1Splitter1.Panel1.Collapsed = True

C#C1Splitter1.Panel1.Collapsed = true;

3. Run the program.

This topic illustrates the following:

Panel1 is collapsed.

To expand the panel, simply click the expand button.

Using Animation Effects

C1Splitter contains thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the Easing and Duration properties to create an animation effect that occurs when the splitter bar is moved. This topic illustrates how to set each of these properties in Design view, in Source view, and in code.

In Design View


1. Select C1Splitter on the Web page and then navigate to the Properties window.

2. Expand the ResizeSettings node to reveal another list of properties and then complete the following:

Set the Easing property to EaseOutBounce. This property determines the animation transition effect.

Set the AnimationDuration property to 1000. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you run the program.

76

3. Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

In Source View

In Source view place <ResizeSettings AnimationDuration="1500" Easing="EaseOutBounce" /> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags so that the markup appears similar to the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="298px" SplitterDistance="75" VisualStylePath="~/C1WebControls/VisualStyles" Width="390px">

<Bar Width="14" /><Panel2></Panel2><Panel1></Panel1><ResizeSettings AnimationDuration="1000" Easing="EaseOutBounce" />

</cc1:C1Splitter>

Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

In Code



Visual BasicImports C1.Web.UI

C#using C1.Web.UI;

2. Set the duration of the animation:

Visual BasicC1Splitter1.ResizeSettings.AnimationDuration = 1000

C#C1Splitter1.ResizeSettings.AnimationDuration = 1000;

3. Select an animation transition effect:

Visual Basic C1Splitter1.ResizeSettings.Easing = Easing.EaseOutBounce

C# C1Splitter1.ResizeSettings.Easing = Easing.EaseOutBounce;

77

4. Run the program and then use your cursor to drag the splitter bar. Release the splitter bar and observe that it bounces for a few seconds before settling into a resting state.

Using the Ghost Effect

By default, users will only see a dotted line indicating the placement of the splitter bar when they attempt to resize panes. You can, however, set up C1Splitter so that a preview of the pane is shown as the user slides the splitter bar. To achieve this effect, you set the Ghost property to True. In this topic, you will learn how to set the Ghostproperty in Design view, in Source view, and in code.

For more information on the Ghost property, see Panel Previewing (page 35).

In Design View



2. Add text to Panel1 and Panel2 (page 43) of the C1Splitter control.



4. Expand the ResizeSettings node.

The properties of the ResizeBehaviorSettings class are revealed.

5. Set the Ghost property to True.

6. Run the program and resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.

In Source View




3. Click the Source button to enter Source view.

4. In Source view, place <ResizeSettings Ghost="True" /> between the <cc1:C1Splitter>and </cc1:C1Splitter> tags so that the markup appears similar to the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="150px" Width="250px"> <ResizeSettings Ghost="True" /></cc1:C1Splitter>

5. Run the program and resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.

In Code




3. Double-click the Web page to enter Code view. Observe that a Page_Load event has been added to the page.

78




5. Set the Ghost property to True by placing the following code in the Page_Load event:

Visual BasicC1Splitter1.ResizeSettings.Ghost = True

C#C1Splitter1.ResizeSettings.Ghost = true;

6. Run the program resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.


The images below, Figure 1 and Figure 2, illustrate the final result of this topic. Figure 1 shows the translucent preview that is created when the Ghost property is set to True; Figure 2 depicts what the control looks like after thesplitter bar is released and Panel1 is resized. Note that the text in Figure 2 adopts the form that was revealed in the preview.

For a visual comparison of the Ghost property's settings, see Panel Previewing (page 35).

79

Using Incremental Resizing

This topic illustrates how to use the incremental resizing feature of the C1Splitter control. By default, the Increment property is set to 1 pixel, which allows users more control over the placement of the splitter bar. In some instances – for example, when you want to prevent the partial display of tables or images - you may want to restrict the movement of the splitter bar. In this topic, you will learn how to set the Increment in Design view, in Source view, and in code.

In Design View





3. Expand the ResizeSettings node to reveal the properties of the ResizeBehaviorSettings class.

4. Locate the Increment property and enter "30" into its text box.

5. Run the program and use your mouse to slowly drag the splitter bar to the left or right. As you drag the splitter bar across the control, observe that the bar jumps ahead 30 pixels with each movement.

In Source View

In Source view, place <ResizeSettings Increment="30" /> between the <cc1:C1Splitter> and</cc1:C1Splitter> tags so that the markup appears similar to the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server" Height="150px" Width="250px"> <ResizeSettings Increment="30" /></cc1:C1Splitter>

Run the program and use your mouse to slowly drag the splitter bar to the left or right. As you drag the splitter bar across the control, observe that the bar jumps ahead 30 pixels with each movement.

In Code





2. Set the Increment property to 30 by placing the following code in the Page_Load event:

Visual BasicC1Splitter1.ResizeSettings.Increment = "30"

C#C1Splitter1.ResizeSettings.Increment = "30";

80

3. Run the program and use your mouse to slowly drag the splitter bar to the left or right. As you drag the splitter bar across the control, observe that the bar jumps ahead 30 pixels with each movement.