Using the ColorPicker Control Extender (C#)
by Microsoft
ColorPicker is an ASP.NET AJAX extender that provides client-side color-picking functionality with UI in a popup control. It can be attached to any ASP.NET TextBox control. It.
The goal of this tutorial is to explain how you can use the AJAX Control Toolkit ColorPicker control extender. The ColorPicker control extender displays a popup dialog that enables you to select a color. The ColorPicker is useful whenever you want to provide an intuitive user interface for a user to pick a color.
Extending a TextBox Control with the ColorPicker Control Extender
Imagine, for example, that you want to create a website that enables visitors to create customized business cards. Visitors can enter the text for a business card and pick the color. The ASP.NET page in Listing 1 contains two TextBox controls named txtCardText and txtCardColor. When you submit the form, the selected values are displayed (see Figure 1).
Figure 01: Simple form for creating a business card (Click to view full-size image)
Listing 1 - CreateCard.aspx
[!code-aspxMain]
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2:
3: <script runat="server">
4:
5: protected void btnSubmit_Click(object sender, EventArgs e)
6: {
7: // Show the panel
8: pnlResults.Visible = true;
9:
10: // Show the selected values
11: lblSelectedText.Text = txtCardText.Text;
12: lblSelectedColor.Text = txtCardColor.Text;
13: }
14: </script>
15:
16: <html xmlns="http://www.w3.org/1999/xhtml">
17: <head id="Head1" runat="server">
18: <title></title>
19: </head>
20: <body>
21: <form id="form1" runat="server">
22: <div>
23:
24: <h1>Create a Business Card</h1>
25:
26: <asp:Label
27: ID="lblCardText"
28: Text="Card Text"
29: AssociatedControlID="txtCardText"
30: runat="server" />
31: <br />
32: <asp:TextBox
33: ID="txtCardText"
34: Runat="server" />
35:
36: <br /><br />
37:
38: <asp:Label
39: ID="lblCardColor"
40: Text="Card Color"
41: AssociatedControlID="txtCardColor"
42: runat="server" />
43: <br />
44: <asp:TextBox
45: ID="txtCardColor"
46: Runat="server" />
47:
48: <br /><br />
49:
50: <asp:Button
51: ID="btnSubmit"
52: Text="Submit"
53: Runat="server" OnClick="btnSubmit_Click" />
54:
55: <asp:Panel ID="pnlResults" Visible="false" runat="server">
56:
57: <h2>Your Selection</h2>
58:
59: Selected Card Text:
60: <asp:Label
61: ID="lblSelectedText"
62: Runat="server" />
63: <br />
64: Selected Card Color:
65: <asp:Label
66: ID="lblSelectedColor"
67: Runat="server" />
68:
69: </asp:Panel>
70:
71: </div>
72: </form>
73: </body>
74: </html>
The form in Listing 1 works, but it does not provide a great user experience. The user has to type a color into the textbox. 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.
You can use the ColorPicker control extender to create a better user experience. The ColorPicker displays a color dialog when you move focus to a TextBox control (see Figure 2).
Figure 02: The ColorPicker Control Extender (Click to view full-size image)
You need to complete two steps to use the ColorPicker control extender with the form in Listing 1:
- Add a ScriptManager control to the page
- Add the ColorPicker control extender to the page
Before you can use the ColorPicker, you must add a ScriptManager to your page. A good place to add the ScriptManager is right below 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). Alternatively, you can type the following tag into Source View beneath the opening server-side form tag:
<asp:ScriptManager ID=???ScriptManager1??? runat=???server??? />
The easiest way to add the ColorPicker control extender to the page is in Design View. If you hover your mouse over the txtCardColor TextBox, a smart task option appears the enables you to add an extender (see Figure 3). If you pick this option, the Extender Wizard appears (see Figure 4).
Figure 03: Adding an extender (Click to view full-size image)
Figure 04: Selecting a control extender with the Extender Wizard (Click to view full-size image)
You can pick the ColorPicker extender to extend the txtCardColor TextBox with the ColorPicker extender. Click OK to close the dialog.
After you make these changes, the source for the page looks like Listing 2.
Listing 2 - CreateCard.aspx (with ColorPicker)
[!code-aspxMain]
1: <%@ Page Language="C#" %>
2:
3: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
4:
5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6:
7: <script runat="server">
8:
9: protected void btnSubmit_Click(object sender, EventArgs e)
10: {
11: // Show the panel
12: pnlResults.Visible = true;
13:
14: // Show the selected values
15: lblSelectedText.Text = txtCardText.Text;
16: lblSelectedColor.Text = txtCardColor.Text;
17: }
18: </script>
19:
20: <html xmlns="http://www.w3.org/1999/xhtml">
21: <head id="Head1" runat="server">
22: <title></title>
23: </head>
24: <body>
25: <form id="form1" runat="server">
26: <div>
27: <asp:ScriptManager ID="ScriptManager1" runat="server" />
28:
29: <h1>Create a Business Card</h1>
30:
31: <asp:Label
32: ID="lblCardText"
33: Text="Card Text"
34: AssociatedControlID="txtCardText"
35: runat="server" />
36: <br />
37: <asp:TextBox
38: ID="txtCardText"
39: Runat="server" />
40:
41: <br /><br />
42:
43: <asp:Label
44: ID="lblCardColor"
45: Text="Card Color"
46: AssociatedControlID="txtCardColor"
47: runat="server" />
48: <br />
49: <asp:TextBox
50: ID="txtCardColor"
51: AutoCompleteType="None"
52: Runat="server" />
53:
54: <cc1:ColorPickerExtender
55: ID="txtCardColor_ColorPickerExtender"
56: TargetControlID="txtCardColor"
57: Enabled="True"
58: runat="server">
59: </cc1:ColorPickerExtender>
60:
61: <br /><br />
62:
63: <asp:Button
64: ID="btnSubmit"
65: Text="Submit"
66: Runat="server" OnClick="btnSubmit_Click" />
67:
68: <asp:Panel ID="pnlResults" Visible="false" runat="server">
69:
70: <h2>Your Selection</h2>
71:
72: Selected Card Text:
73: <asp:Label
74: ID="lblSelectedText"
75: Runat="server" />
76: <br />
77: Selected Card Color:
78: <asp:Label
79: ID="lblSelectedColor"
80: Runat="server" />
81:
82: </asp:Panel>
83:
84: </div>
85: </form>
86: </body>
87: </html>
Notice that the page now contains a ColorPickerExtender control that appears directly below the txtCardColor TextBox control. The ColorPickerExtender control extends the txtCardColor control so that it displays a color picker dialog.
Using a Button to Launch the Color Picker Dialog
The ColorPicker extender supports the following properties:
- PopupButtonId - The ID of a button on the page that causes the color picker dialog to appear.
- PopupPosition - The position, relative to the target control, of the color picker dialog. Possible values are Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right, and Left (the default is BottomLeft).
- SampleControlId - The ID of a control that displays the selected color.
- SelectedColor - The initial color selected by the ColorPicker.
You can use these properties to customize how the color picker dialog is displayed and how the selected color is displayed. The page in Listing 3 illustrates how you can use several of these properties.
Listing 3 - CreateCardButton.aspx
[!code-aspxMain]
1: <%@ Page Language="C#" %>
2:
3: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
4:
5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6:
7: <script runat="server">
8:
9: protected void btnSubmit_Click(object sender, EventArgs e)
10: {
11: // Show the panel
12: pnlResults.Visible = true;
13:
14: // Show the selected values
15: lblSelectedText.Text = txtCardText.Text;
16: lblSelectedColor.Text = txtCardColor.Text;
17: }
18: </script>
19:
20: <html xmlns="http://www.w3.org/1999/xhtml">
21: <head id="Head1" runat="server">
22: <title></title>
23: </head>
24: <body>
25: <form id="form1" runat="server">
26: <div>
27: <asp:ScriptManager ID="ScriptManager1" runat="server" />
28:
29: <h1>Create a Business Card</h1>
30:
31: <asp:Label
32: ID="lblCardText"
33: Text="Card Text"
34: AssociatedControlID="txtCardText"
35: runat="server" />
36: <br />
37: <asp:TextBox
38: ID="txtCardText"
39: Runat="server" />
40:
41: <br /><br />
42:
43: <asp:Label
44: ID="lblCardColor"
45: Text="Card Color"
46: AssociatedControlID="txtCardColor"
47: runat="server" />
48: <br />
49: <asp:TextBox
50: ID="txtCardColor"
51: AutoCompleteType="None"
52: Runat="server" />
53: <asp:Button
54: ID="btnPickColor"
55: Text="Pick Color"
56: Runat="server" />
57: <asp:Label
58: ID="lblSample"
59: Runat="Server"> Sample </asp:Label>
60: <cc1:ColorPickerExtender
61: ID="txtCardColor_ColorPickerExtender"
62: TargetControlID="txtCardColor"
63: PopupButtonID="btnPickColor"
64: PopupPosition="TopRight"
65: SampleControlID="lblSample"
66: Enabled="True"
67: runat="server">
68: </cc1:ColorPickerExtender>
69:
70: <br /><br />
71:
72: <asp:Button
73: ID="btnSubmit"
74: Text="Submit"
75: Runat="server" OnClick="btnSubmit_Click" />
76:
77: <asp:Panel ID="pnlResults" Visible="false" runat="server">
78:
79: <h2>Your Selection</h2>
80:
81: Selected Card Text:
82: <asp:Label
83: ID="lblSelectedText"
84: Runat="server" />
85: <br />
86: Selected Card Color:
87: <asp:Label
88: ID="lblSelectedColor"
89: Runat="server" />
90:
91: </asp:Panel>
92:
93: </div>
94: </form>
95: </body>
96: </html>
The page in Listing 3 includes a Pick Color button (see Figure 5). When you click this button, the color picker dialog appears above the TextBox. If you select a color from the dialog then the selected color appears as the background color of the lblSample Label control.
The ColorPicker PopupButtonID property is used to associate the Pick Color button with the ColorPicker extender. When you supply a value for the PopupButtonID property, the color picker dialog no longer appears when the target control has focus. You must click the button to display the dialog.
The SampleControlID property is used to associate a control that displays the selected color with the ColorPicker. The ColorPicker changes the background color of this control to the currently selected color.
Figure 05: Displaying the color picker dialog with a button (Click to view full-size image)
Summary
In this tutorial, you learned how to use the ColorPicker control extender to display a popup color picker dialog. First, we examined how you can display the dialog when focus is moved to a TextBox control. Next, you learned how to create a button that displays the color picker dialog when the button is clicked.
)
|
|