ColorPicker, bir ASP.NET TextBox kontrolüne iliştirilerek kullanılan bir ASP.NET AJAX extender türüdür. Client-side olarak bir popup kontrolünde renk seçmemizi sağlar. Renk paletine tıklarak istediğiniz rengi seçebilmeniz mümkün. Seçtiğiniz rengin 16'lık sayı tabanına göre belirlenmiş sayısal değeri iliştirilen TextBox kontrolünde gözükür. Aynı zamanda opsiyonel olarak bir PopupButton ve SampleControl tanımlamanız mümkün.
Inherits="Deneme.Ajax.ColorPickerExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ColorPicker</title>
</head>
<body id="bodyTag" runat="server">
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
<asp:ColorPickerExtender ID="TextBox1_ColorPickerExtender" runat="server" Enabled="True"
TargetControlID="TextBox1" SampleControlID="Button1">
</asp:ColorPickerExtender>
<br />
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Yukarıdaki program kodumda 1 TextBox ve bu TextBox ile ilişkilendirilmiş bir ColorPicker extender ve bir de Button kontrolüm var. ColorPickerExtender TargerControlID değerim TextBox1 kontrolünü gösteriyor. (yani hedef kontrolüm) SampleControlID değeri seçilen rengin etkileyeceği kontroldür. Burada bir buton kontrolü kullandım fakat farklı kontroller de kullanmak mümkün. Renk paletinden herhangi bir renk seçildiğinde buton kontrolümün arkaplan rengi seçilen renk olacak ve textbox kontrolünde de seçilen rengin 16'lık sayı sistemindeki karşılığı gösterilecek. Bu örnek çok basit bir örnek. ColorPickerExtender daha karmaşık ve farklı amaçlarla kullanılabilir.
ColorPickerExtender Özellikleri:
- TargetControlID - Renk toplayıcının genişletildiği TextBox kontrolünün ID değeri.
- PopupButtonID - Tıklandığında ColorPicker paletinin açılacağı kontrolün ID değeri.
- SampleControlID - ColorPicker' in seçtiği rengin gösterildiği kontrolün ID değeri. Eğer bu değer ayarlanmışsa ve renk toplayıcısının açılır penceresi farenin üzerine geldiğinde ilgili renk değeri kontrolün arkaplan rengi haline gelir. Eğer bu değer ayarlanmamışsa seçilen renk gösterilmez.
- PopupPosition - Renk toplayıcı açılır penceresinin nerede gösterileceğini belirtir. Varsayılan değeri BottomLeft(Aşağı-sol) taraftadır.
- SelectedColor - ColorPicker extender baştıldığında seçili olarak gelen renk.
- OnClientColorSelectionChanged - colorSelectionChanged olayı meydana geldiğinde çağrılacak olan JavaScript fonksiyonu.