You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1ComboBox. This topic assumes you have already added a C1ComboBox 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 C1ComboBox 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\C1ComboBox to a new folder in your Visual Studio project so the folder structure is: ~\VisualStyles\CustomStyle\C1ComboBox.
2. Open the styles.css file in the ~/VisualStyles/CustomStyle/C1ComboBox 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 .C1ComboBox_CustomStyle and change the border attribute so it looks like the following:
.C1ComboBox_CustomStyle
{
background: #ff3;
text-align: left;
border: solid 1px #444;
}
4. Save and close the styles.css file.
5. Select the C1ComboBox control on your form and click the smart tag to open the C1ComboBox Tasks menu.
a. Uncheck the UseEmbeddedVisualStyles property to set it to False.
b. Make sure the VisualStylePath property is set to ~/VisualStyles.
c. Select CustomVisualStyle (external) from the VisualStyle property drop-down list.
6. Press F5 to run your project and notice the C1ComboBox control has a yellow background.
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 view and enter VisualStyle="CustomStyle", VisualStylePath="~/VisualStyles", and UseEmbeddedVisualStyles="False" into the <cc1:C1Combobox> tag. Your XHTML will resemble the following:
<cc1:C1ComboBox ID=" C1ComboBox 1" runat="server" Height="22px"
VisualStyle="CustomStyle" VisualStylePath="~/VisualStyles" UseEmbeddedVisualStyles="False" Width="155px" />
Adding Custom Visual Styles Programmatically
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:
C1ComboBox1.UseEmbeddedVisualStyles = False
• C#
C1ComboBox1.UseEmbeddedVisualStyles = false;
4. Change the VisualStylePath property:
C1ComboBox1.VisualStylePath = "~/VisualStyles"
• C#
C1ComboBox1.VisualStylePath = "~/VisualStyles";
5. Select the custom visual style:
C1ComboBox1.VisualStyle = "CustomStyle"
• C#
C1ComboBox1.VisualStyle = "CustomStyle";
6. Run the program and observe that the C1ComboBox control has adopted your custom visual style.
|
