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.
Complete the following steps:
1. Add a C1Splitter control to your Web project.
2. In Solution Explorer, right-click on the project name and select Add New Item.
The Add New Item dialog box appears.
3. In the Add New Item dialog box, complete the following tasks:
a. From the Templates pane, select Style Sheet.
b. Enter "GradientStyles.css" into the Name field.
c. Press Add to close the Add New Item dialog box.
GradientStyles.css is added to your project.
4. In Solution Explorer, double-click GradientStyles.css to open the file in Visual Studio. The CSS body style appears by default:
body {
}
5. Place the following CSS code after the right bracket of the body style:
.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.
6. 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 "Panel1_Gradient".
7.
c. Expand Panel2's node and set the CSSClass property to "Panel2_Gradient".
8. 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:
9.
<link href="GradientStyles.css" type="text/css" rel="stylesheet"/>
10. Press F5 to run the program. Observe that Panel1 and Panel2 feature gradient backgrounds specified in the GradientStyles.css style sheet.
This Topic Illustrates
the Following:
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:
|
