ComponentOne Input for ASP.NET AJAX: Input for ASP.NET AJAX Task-Based Help > Adding Custom Visual Styles

Adding Custom Visual Styles

You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles property to create a custom visual style for your Input for ASP.NET AJAX controls. We will use the C1MaskedInput control in this example. This topic assumes you have already added a C1MaskedInput 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 C1Input ArcticFox style.

Adding Custom Visual Styles in Design View

Complete the following steps:

1.   Copy the theme folder C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles\ArcticFox\C1Input to a new folder in your Visual Studio project so the folder structure is: ~\VisualStyles\CustomStyle\C1Input.

 

 

2.   Open the styles.css file in the ~/VisualStyles/CustomStyle/C1Input folder and replace any instance of "ArcticFox" with "CustomStyle". You can modify the CSS definition to customize the appearance. In this example, we'll modify the colors of the border and background of the C1MaskedInput control.

3.   Locate the first instance of .C1Input_CustomStyle and change the border and background-color attributes so they look like the following:

/* =========== CustomStyle C1Input =========================================== */

.C1Input_CustomStyle

{

       overflow: hidden;

       width: 155px;

       height: 18px;

       position: relative;

       border: #0000FF 2px solid;

       background-color: #C5B358;

       padding: 1px 0 3px 1px;

       text-align:left;

}

4.   Save and close the styles.css file.

5.   Select the C1MaskedInput control on your form and open the Visual Studio Properties window.

a.     Set the UseEmbeddedVisualStyles property to False.

b.     Make sure the VisualStylePath property is set to ~/VisualStyles.

c.     Enter CustomStyle next to the VisualStyle property.

Observer that the C1MaskedInput control has adopted your custom visual style.

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:C1MaskedInput> tag. Your XHTML will resemble the following:

<cc1:C1MaskedInput ID="C1MaskedInput1" 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 page 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:

      Visual Basic

C1MaskedInput1.UseEmbeddedVisualStyles = False

      C#

C1MaskedInput1.UseEmbeddedVisualStyles = false;

4.   Change the VisualStylePath property:

      Visual Basic

C1MaskedInput1.VisualStylePath = "~/VisualStyles"

      C#

C1MaskedInput1.VisualStylePath = "~/VisualStyles";

5.   Select the custom visual style:

      Visual Basic

C1MaskedInput1.VisualStyle = "CustomStyle"

      C#

C1MaskedInput1.VisualStyle = "CustomStyle";

6.   Run the program and observe that the C1MaskedInput control has adopted your custom visual style.

 This topic illustrates the following:

In this topic, you learned how to create a custom visual style. When you build the project, your C1MaskedInput control will look like the following image:


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.