If you choose to completely customize the appearance of the C1Expander control you may not wish to use any of the available built-in Visual Styles. In that case, you can create a custom visual style based on an existing ComponentOne Expander for ASP.NET AJAX visual style. In the following steps you'll use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1Expander control. For more information on custom visual styles, see Customizing the Control's Appearance.
Step 1: Setting up Folders
In order to create a custom visual style, you must first add new folders to your project to create the appropriate directory structure for visual style files. You'll add style sheet and image files to the style folder you create.
To add set up the application, complete the following steps:
1. Navigate to the Solution Explorer, right-click on your project's name, and select New Folder.
2. Rename the new folder "VisualStyles".
3. Right-click on the VisualStyles folder in the Solution Explorer and select New Folder.
4. Name this folder "CustomStyle".
5. Right-click on the CustomStyle folder in the Solution Explorer and select New Folder.
6. Name this folder "C1Expander". The folder hierarchy will now appear similar to the following image:
In general, Expander for ASP.NET AJAX visual styles should be placed in a C1Expander folder within a folder named for the style, here CustomStyle, which is in a VisualStyles folder in the project.
Step 2: Adding Files to the Folder
Once you've created the folder hierarchy, you will need to add a style sheet and image folder to create your custom style. In this example, you'll use the existing ArcticFox style
To add a custom visual style, complete the following steps:
1. In the Solution Explorer, right-click the C1Expander folder and select New Folder. Rename the new folder "Images". In this example you will not need to add images to the folder, but you can use this folder as a placeholder for image files.
2. Right-click the C1Expander folder and select Add New Item.
3. In the Add New Item dialog box choose Style Sheet from the list of installed templates, name the style sheet, "styles.css", and click the Add button to close the dialog box and add the file to your project.
4. If it did not automatically open, open the styles.css file by double-clicking the item in the Solution Explorer.
5. Replace the existing body style in the styles.css file with the following CSS styles:
/* =========== CustomStyle C1Expander =========================================== */
.C1Expander_CustomStyle
{
border: solid 1px #999;
}
.C1Expander_CustomStyle .C1eContentPanel .C1eOuter,
.C1Expander_CustomStyle .C1eContentPanel .C1eInner,
.C1Expander_CustomStyle .C1eContentPanel .C1eContent
{
height: 100%;
position: relative;
float: none;
display: block;
}
/* Common definitions */
.C1Expander_CustomStyle .C1eContentPanel {
background: #fff;
display:block;
margin:0;
padding:0;
}
.C1Expander_CustomStyle .C1eContentPanel .C1eOuter .C1eInner
{
padding:0;
margin:0;
}
/* C1Top, C1Bottom */
.C1Expander_CustomStyle-C1Bottom .C1eHeaderPanel,
.C1Expander_CustomStyle-C1Top .C1eHeaderPanel,
.C1Expander_CustomStyle-C1Right .C1eHeaderPanel,
.C1Expander_CustomStyle-C1Left .C1eHeaderPanel
{
border: solid 1px #fff;
}
.C1Expander_CustomStyle-C1Top .C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1eHeaderPanel
{
background: #C6C6C6;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
min-height:20px;
}
.C1Expander_CustomStyle-C1Top .C1Opened-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1eHeaderPanel
{
background: #ffffff;
color: #000;
}
.C1Expander_CustomStyle-C1Top .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel
{
background: #ffffff;
color: #000;
}
.C1Expander_CustomStyle-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
background: #666;
color: #fff;
}
.C1Expander_CustomStyle-C1Top .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel
{
background: #ffffff;
}
.C1Expander_CustomStyle-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
background: #999;
}
/* C1Right, C1Left */
.C1Expander_CustomStyle-C1Right .C1eHeaderPanel,
.C1Expander_CustomStyle-C1Left .C1eHeaderPanel
{
background: #C6C6C6;
display:block;
float:left;
clear:none;
margin:0;
padding:0;
min-width:20px;
}
.C1Expander_CustomStyle-C1Right .C1Opened-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Left .C1Opened-C1eHeaderPanel
{
background: #ffffff;
}
.C1Expander_CustomStyle-C1Right .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Left .C1Opened-C1Hover-C1eHeaderPanel
{
background: #ffffff;
}
.C1Expander_CustomStyle-C1Right .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Left .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
background: #666;
}
.C1Expander_CustomStyle-C1Right .C1eHeaderPanel .C1eOuter,
.C1Expander_CustomStyle-C1Left .C1eHeaderPanel .C1eOuter
{
background: none;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
}
.C1Expander_CustomStyle-C1Left .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Right .C1Closed-C1Hover-C1eHeaderPanel
{
background: #ffffff;
}
.C1Expander_CustomStyle-C1Left .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_CustomStyle-C1Right .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
background: #666;
}
.C1Expander_CustomStyle-C1Left .C1eHeaderPanel .C1eOuter,
.C1Expander_CustomStyle-C1Right .C1eHeaderPanel .C1eOuter
{
background: none;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
}
.C1Expander_CustomStyle .C1eHeaderPanel .C1eInner
{
display:block;
float:none;
clear:both;
margin:0;
padding:0;
}
.C1Expander_CustomStyle-C1Bottom .C1eHeaderPanel .C1eContent
{
background: #66FF33;
color: #000000;
display:block;
float:none;
clear:both;
margin:0;
padding:5px;
vertical-align:middle;
}
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_CustomStyle-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
color: #fff;
}
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1eHeaderPanel .C1eContent,
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_CustomStyle-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Top .C1eHeaderPanel .C1eContent
{
background: #66FF33;
color: #000000;
display:block;
float:none;
clear:both;
margin:0;
padding:5px;
vertical-align:middle;
}
.C1Expander_CustomStyle-C1Top .C1Opened-C1eHeaderPanel .C1eContent,
.C1Expander_CustomStyle-C1Top .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Right .C1eHeaderPanel .C1eContent
{
background: #66FF33;
color: #000000;
display:block;
float:none;
clear:both;
margin:0;
padding:0 5px;
vertical-align:middle;
}
.C1Expander_CustomStyle-C1Right .C1Opened-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Right .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Left .C1eHeaderPanel .C1eContent
{
background: #66FF33;
color: #000000;
display:block;
float:none;
clear:both;
margin:0;
padding:0 5px;
vertical-align:middle;
}
.C1Expander_CustomStyle-C1Left .C1Opened-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Left .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
background: #66FF33;
}
.C1Expander_CustomStyle-C1Bottom .C1eContentPanel
{
}
.C1Expander_CustomStyle-C1Top .C1eContentPanel
{
}
.C1Expander_CustomStyle-C1Right .C1eContentPanel
{
}
.C1Expander_CustomStyle-C1Left .C1eContentPanel
{
}
/*----DISABLED STATE----*/
.C1Expander_CustomStyle-C1Disabled-C1Top .C1eHeaderPanel
{
border:solid 1px #999;
background: #C6C6C6;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
min-height:20px;
border-top: none;
}
.C1Expander_CustomStyle-C1Disabled-C1Bottom .C1eHeaderPanel
{
border:solid 1px #999;
background: #C6C6C6;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
min-height:20px;
border-bottom: none;
}
.C1Expander_CustomStyle-C1Disabled-C1Right .C1eHeaderPanel
{
border:solid 1px #999;
background: #C6C6C6;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
min-height:20px;
border-bottom: none;
}
.C1Expander_CustomStyle-C1Disabled-C1Left .C1eHeaderPanel
{
border:solid 1px #999;
background: #C6C6C6;
display:block;
float:none;
clear:both;
margin:0;
padding:0;
min-height:20px;
border-top: none;
}
.C1Expander_CustomStyle-C1Disabled-C1Bottom .C1eHeaderPanel
{
border: solid 1px #999;
border-bottom: none;
}
.C1Expander_CustomStyle-C1Disabled-C1Bottom .C1eHeaderPanel .C1eOuter .C1eInner .C1eContent
{
padding: 5px;
}
.C1Expander_CustomStyle-C1Disabled-C1Top .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_CustomStyle-C1Disabled-C1Bottom .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_CustomStyle-C1Disabled-C1Right .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_CustomStyle-C1Disabled-C1Left .C1eContentPanel .C1eOuter .C1eInner .C1eContent
{
border:1px solid #6f7074;
}
/* end of CustomStyle C1Expander =========================================== */
Step 3: Applying the Custom Style
Once you've created the custom style, you will need to apply the style to the C1Expander control. In this step you'll learn how to apply a style in Design view, in code, and in Source view.
In Design View
To apply a custom visual style in Design view, complete the following steps:
1. Select the C1Expander control on your form and click the smart tag to open the C1Expander Tasks menu.
2. Deselect UseEmbeddedVisualStyles check box to set the UseEmbeddedVisualStyles property to False.
3. Set the VisualStylePath property is to ~/VisualStyles.
4. Select CustomVisualStyle (external) from the VisualStyle property drop-down list.
5. Click on the page to close the Tasks menu and apply the styles.
In Source View
To add a custom visual style in Source view, complete the following steps:
1. Switch to Source view by right-clicking the Default.aspx page in the Solution Explorer and selecting View Markup.
2. Enter Source view and enter VisualStyle="CustomStyle", VisualStylePath="~/VisualStyles", and UseEmbeddedVisualStyles="False" into the <cc1:C1Expander> tag.
The control's markup will appear similar to the following:
<cc1:C1Expander ID="C1Expander1" runat="server" Expanded="False" HeaderSize="25px" Height="200px" VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles" UseEmbeddedVisualStyles="False" Width="100px">
In Code
To add a custom visual style, complete the following steps:
1. Double-click the page in Design view to switch to Code view and create the Page_Load event handler.
2. Set the UseEmbeddedVisualStyles property to False by adding the following code to the Page_Load event:
C1Expander1.UseEmbeddedVisualStyles = False
• C#
C1Expander1.UseEmbeddedVisualStyles = false;
3. Set the VisualStylePath property to the folder you created:
C1Expander1.VisualStylePath = "~/VisualStyles"
• C#
C1Expander1.VisualStylePath = "~/VisualStyles";
4. Apply the custom visual style to the control:
C1Expander1.VisualStyle = "CustomStyle"
• C#
C1Expander1.VisualStyle = "CustomStyle";
Run the program and observe that the C1Expander control has adopted your custom visual style.
|
