#Image colorpicker code

If you select a color from the dialog then the selected color appears as the background color of the lblSample Label control. When you click this button, the color picker dialog appears above the TextBox. The page in Listing 3 includes a Pick Color button (see Figure 5). The page in Listing 3 illustrates how you can use several of these properties. You can use these properties to customize how the color picker dialog is displayed and how the selected color is displayed. SelectedColor - The initial color selected by the ColorPicker.SampleControlId - The ID of a control that displays the selected color.Possible values are Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right, and Left (the default is BottomLeft). PopupPosition - The position, relative to the target control, of the color picker dialog.PopupButtonId - The ID of a button on the page that causes the color picker dialog to appear.The ColorPicker extender supports the following properties: Using a Button to Launch the Color Picker Dialog The ColorPickerExtender control extends the txtCardColor control so that it displays a color picker dialog. Notice that the page now contains a ColorPickerExtender control that appears directly below the txtCardColor TextBox control.

Listing 2 - CreateCard.aspx (with ColorPicker) Click OK to close the dialog.Īfter you make these changes, the source for the page looks like Listing 2. You can pick the ColorPicker extender to extend the txtCardColor TextBox with the ColorPicker extender. If you pick this option, the Extender Wizard appears (see Figure 4).įigure 03: Adding an extender ( Click to view full-size image)įigure 04: Selecting a control extender with the Extender Wizard ( Click to view full-size image) If you hover your mouse over the txtCardColor TextBox, a smart task option appears the enables you to add an extender (see Figure 3). The easiest way to add the ColorPicker control extender to the page is in Design View. Alternatively, you can type the following tag into Source View beneath the opening server-side form tag: You can drag the ScriptManager onto the page from the toolbox (the ScriptManager is located under the AJAX Extensions tab). A good place to add the ScriptManager is right below the opening server-side tag. Add the ColorPicker control extender to the pageīefore you can use the ColorPicker, you must add a ScriptManager to your page.Add a ScriptManager control to the page.You need to complete two steps to use the ColorPicker control extender with the form in Listing 1: The ColorPicker displays a color dialog when you move focus to a TextBox control (see Figure 2).įigure 02: The ColorPicker Control Extender ( Click to view full-size image) You can use the ColorPicker control extender to create a better user experience.

#Image colorpicker code

If the user wants a specialized color - for example, just the right shade of pea green - then the user must figure out the HTML color code without any help. The user has to type a color into the textbox. The form in Listing 1 works, but it does not provide a great user experience. LblSelectedColor.Text = txtCardColor.Text Protected void btnSubmit_Click(object sender, EventArgs e) When you submit the form, the selected values are displayed (see Figure 1).įigure 01: Simple form for creating a business card ( Click to view full-size image) The ASP.NET page in Listing 1 contains two TextBox controls named txtCardText and txtCardColor. Visitors can enter the text for a business card and pick the color. Imagine, for example, that you want to create a website that enables visitors to create customized business cards. Extending a TextBox Control with the ColorPicker Control Extender The ColorPicker is useful whenever you want to provide an intuitive user interface for a user to pick a color. The ColorPicker control extender displays a popup dialog that enables you to select a color. The goal of this tutorial is to explain how you can use the AJAX Control Toolkit ColorPicker control extender. It can be attached to any ASP.NET TextBox control. ColorPicker is an ASP.NET AJAX extender that provides client-side color-picking functionality with UI in a popup control.