Getting Started Overview
The following tutorial demonstrates how to use RadColorPicker to interact with the elements of a sample Login form. It shows how to configure the RadColorPicker and use it to change thecolor of the form.
-
In the default page of a new ASP.NET AJAX-enabled Web Application add the following ASP.NET markup. This will create the table containing the "Login" title, "Choose a Theme" title, labels and textboxes you see in the screenshot at the top of this topic. The markup will also contain CSS classes that will be defined later.
ASP.NET
<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Width="300px" BorderStyle="Solid" BorderWidth="2px"> <table class="MyTable"> <tr> <td colspan="2"> <asp:Label ID="Label4" runat="server" Text="Login:" CssClass="MyTitle"></asp:Label> </td> </tr> <tr> <td> <asp:Label ID="Label1" runat="server" Text="User Name:" CssClass="MyLabel"></asp:Label> </td> <td> <asp:TextBox ID="TextBox1" runat="server" CssClass="MyTextBox"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="Password:" CssClass="MyLabel"></asp:Label> </td> <td> <asp:TextBox ID="TextBox2" runat="server" TextMode="Password" CssClass="MyTextBox"></asp:TextBox> </td> </tr> </table> </asp:Panel> <br /> <asp:Label ID="Label3" runat="server" CssClass="MyTitle" Text="Choose a Theme:"></asp:Label><br /> -
To the
<head>tag add these styles to format the title, labels and textboxes:CSS
.MyTable { margin: 10px; } .MyTitle { float: left; font-size: 13px; font-weight: bold; } .MyLabel { float: right; font-size: 12px } .MyTextBox { font-size: 12px; } Add a RadColorPicker control to the page.
Open the RadColorPicker Smart Tag and select "Vista" from the Skin drop down list.
-
In the Properties Window set properties as shown below. AutoPostBack will be true to allow the server events to fire when the user clicks a color box. PreViewColor and ShowEmptyColor will be false to show only the list of colors. Later, custom colors will be defined so Preset is set to None to eliminate the other colors.
AutoPostBack = True
Preset = None
PreviewColor = False
ShowEmptyColor = False
Height = "250px"
Width = "500px"
-
In the ASP.NET markup for the color picker, add the ColorPickerItems shown below after the
<telerik:RadColorPicker>tag. Notice the Title property that defines the ToolTip as the user hovers the mouse over a color while the Value is set either to a named color or a hexadecimal value that describes the color.ASP.NET
<telerik:RadColorPicker AutoPostBack="True" ID="RadColorPicker1" runat="server" Preset="None" PreviewColor="False" ShowEmptyColor="False" Skin="Vista" Height="250px" Width="500px"> <telerik:ColorPickerItem Title="Dark Blue" Value="DarkBlue" /> <telerik:ColorPickerItem Title="Blue" Value="Blue" /> <telerik:ColorPickerItem Title="Light Blue" Value="SkyBlue" /> <telerik:ColorPickerItem Title="WhiteSmoke" Value="whitesmoke" /> <telerik:ColorPickerItem Title="Maroon" Value="Maroon" /> <telerik:ColorPickerItem Title="Light Green" Value="Azure" /> </telerik:RadColorPicker> -
In the Properties Window, click the Events button (). Double-click the ColorChanged event to create an event handler. Replace the event handler with the code below.
C#
protected void RadColorPicker1_ColorChanged1(object sender, EventArgs e) { Panel1.BackColor = RadColorPicker1.SelectedColor; Label1.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor); Label2.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor); Label4.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor); Panel1.BorderColor = GetContrastingColor(RadColorPicker1.SelectedColor); }VB
Protected Sub RadColorPicker1_ColorChanged1(ByVal sender As Object, ByVal e As EventArgs) Panel1.BackColor = RadColorPicker1.SelectedColor Label1.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor) Label2.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor) Label4.ForeColor = GetContrastingColor(RadColorPicker1.SelectedColor) Panel1.BorderColor = GetContrastingColor(RadColorPicker1.SelectedColor) End Sub -
Add the following helper method to get a contrasting color:
C#
private System.Drawing.Color GetContrastingColor(System.Drawing.Color backgroundColor) { return System.Drawing.Color.FromArgb(backgroundColor.ToArgb() ^ 0x00ffffff); }VB
Private Function GetContrastingColor(ByVal backgroundColor As System.Drawing.Color) As System.Drawing.Color Return System.Drawing.Color.FromArgb(backgroundColor.ToArgb() Xor 16777215) End Function Press F5 to run the application. Click the color boxes and notice the contrasting colors for the labels, panel background and border.