You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1Accordion. This topic assumes you have already added a C1Accordion control to your page. For more information on custom visual styles, see Custom Visual Styles.
To add a custom visual style, best practice is to copy one of the existing visual styles and customize it. In this example we will use the C1Accordion ArcticFox style.
Adding Custom Visual Styles in Design View
To add a custom visual style, complete the following steps:
1. Copy the theme folder C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles\ArcticFox\C1Accordion to a new folder in your Visual Studio project so the folder structure is: ~\VisualStyles\CustomStyle\C1Accordion.
2. Open the styles.css file in the ~/VisualStyles/CustomStyle/C1Accordion folder and replace any instance of "ArcticFox" with "CustomStyle". You can modify the CSS definition to customize the appearance.
3. Locate the first instance of .C1Accordion_CustomStyle and change the border attribute so it looks like the following:
/* =========== CustomStyle C1Accordion =========================================== */
.C1Accordion_CustomStyle
{
border: solid 5px #900;
}
4. Save and close the styles.css file.
5. Select the C1Accordion control on your form and click the smart tag to open the C1Accordion Tasks menu.
1. Uncheck the UseEmbeddedVisualStyles property to set it to False.
2. Make sure the VisualStylePath property is set to ~/VisualStyles.
3. Select CustomVisualStyle (external) from the VisualStyle property drop-down list.
6. Press F5 to run your project and notice the C1Accordion control has a red border.
Adding Custom Visual Styles in Source View
To add a custom visual style in Source view, complete the following steps:
1. Complete steps 1 through 4 under Adding Custom Visual Styles in Design View.
2. Click the Source tab to open the Source source view and enter VisualStyle="CustomStyle", VisualStylePath="~/VisualStyles", and UseEmbeddedVisualStyles="False" into the <cc1:C1Accordion> tag. Your XHTML will resemble the following:
<cc1:C1Accordion ID="C1Accordion1" runat="server" Height="22px"
VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles" UseEmbeddedVisualStyles="False" Width="155px" />
Adding Custom Visual Styles in Code
To add a custom visual style, complete the following steps:
1. Complete steps 1 through 4 under Adding Custom Visual Styles in Design View.
2. Double-click the Web project to place a Page_Load event in the code editor.
3. Set the UseEmbeddedVisualStyles property to False by adding the following code to the Page_Load event:
C1Accordion1.UseEmbeddedVisualStyles = False
• C#
C1Accordion1.UseEmbeddedVisualStyles = false;
4. Change the VisualStylePath property:
C1Accordion1.VisualStylePath = "~/VisualStyles"
• C#
C1Accordion1.VisualStylePath = "~/VisualStyles";
5. Select the custom visual style:
C1Accordion1.VisualStyle = "CustomStyle"
• C#
C1Accordion1.VisualStyle = "CustomStyle";
6. Run the program and observe that the C1Accordion control has adopted your custom visual style.
|
