ColorPicker Denetim Genişleticisini Kullanma (C#)

2023-07-13

ColorPicker, bir açılır pencere denetiminde kullanıcı arabirimi ile istemci tarafı renk seçme işlevselliği sağlayan ASP.NET bir AJAX genişleticidir. Herhangi bir ASP.NET TextBox denetimine eklenebilir. Evet, öyle.

Bu öğreticinin amacı, AJAX Denetim Araç Seti ColorPicker denetim genişleticisini nasıl kullanabileceğinizi açıklamaktır. ColorPicker denetim genişleticisi, renk seçmenizi sağlayan bir açılan iletişim kutusu görüntüler. ColorPicker, kullanıcının renk seçmesi için sezgisel bir kullanıcı arabirimi sağlamak istediğinizde kullanışlıdır.

ColorPicker Denetim Genişletici ile TextBox Denetimini Genişletme

Örneğin, ziyaretçilerin özelleştirilmiş kartvizitler oluşturmasına olanak tanıyan bir web sitesi oluşturmak istediğinizi düşünün. Ziyaretçiler kartvizitin metnini girebilir ve rengi seçebilir. Liste 1'deki ASP.NET sayfasında txtCardText ve txtCardColor adlı iki TextBox denetimi bulunur. Formu gönderdiğinizde, seçili değerler görüntülenir (bkz. Şekil 1).

Şekil 01: Kartvizit oluşturmak için basit form (Tam boyutlu resmi görüntülemek için tıklayın)

Liste 1 - CreateCard.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            Runat="server" />
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Liste 1'deki form çalışır, ancak harika bir kullanıcı deneyimi sağlamaz. Kullanıcının metin kutusuna bir renk yazması gerekir. Kullanıcı özel bir renk istiyorsa (örneğin, bezelye yeşilinin yalnızca doğru tonu) kullanıcının HTML renk kodunu herhangi bir yardım almadan çözmesi gerekir.

Daha iyi bir kullanıcı deneyimi oluşturmak için ColorPicker denetim genişleticisini kullanabilirsiniz. Odağı textBox denetimine taşıdığınızda ColorPicker bir renk iletişim kutusu görüntüler (bkz. Şekil 2).

Şekil 02: ColorPicker Denetim Genişleticisi (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ColorPicker denetim genişleticisini Liste 1'deki formla kullanmak için iki adımı tamamlamanız gerekir:

Sayfaya ScriptManager denetimi ekleme
ColorPicker denetim genişleticisini sayfaya ekleme

ColorPicker'ı kullanabilmeniz için sayfanıza bir ScriptManager eklemeniz gerekir. ScriptManager'ı eklemek için iyi bir yer, sunucu tarafı <form> etiketinin hemen altındadır. ScriptManager'ı araç kutusundan sayfaya sürükleyebilirsiniz (ScriptManager, AJAX Uzantıları sekmesinin altında bulunur). Alternatif olarak, sunucu tarafı form etiketinin altındaki Kaynak Görünümü'ne aşağıdaki etiketi yazabilirsiniz:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

ColorPicker denetim genişleticisini sayfaya eklemenin en kolay yolu Tasarım Görünümü'dür. Farenizi txtCardColor TextBox üzerine getirdiğinizde, bir genişletici eklemenize olanak tanıyan bir akıllı görev seçeneği görüntülenir (bkz. Şekil 3). Bu seçeneği seçerseniz Genişletici Sihirbazı görüntülenir (bkz. Şekil 4).

Şekil 03: Genişletici ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 04: Genişletici Sihirbazı ile bir denetim genişletici seçme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

TxtCardColor TextBox'ı ColorPicker genişleticisiyle genişletmek için ColorPicker genişleticisini seçebilirsiniz. İletişim kutusunu kapatmak için Tamam'a tıklayın.

Bu değişiklikleri yaptıktan sonra sayfanın kaynağı Liste 2 gibi görünür.

Listeleme 2 - CreateCard.aspx (ColorPicker ile)

<%@ Page Language="C#" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
            
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Sayfada artık txtCardColor TextBox denetiminin hemen altında görünen bir ColorPickerExtender denetimi olduğuna dikkat edin. ColorPickerExtender denetimi txtCardColor denetimini bir renk seçici iletişim kutusu görüntüleyebilecek şekilde genişletir.

Renk Seçici İletişim Kutusunu Başlatmak için Düğme Kullanma

ColorPicker genişletici aşağıdaki özellikleri destekler:

PopupButtonId - Sayfadaki renk seçici iletişim kutusunun görünmesine neden olan düğmenin kimliği.
PopupPosition - Renk seçici iletişim kutusunun hedef denetime göre konumu. Olası değerler Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right ve Left değerleridir (varsayılan değer BottomLeft'tir).
SampleControlId - Seçili rengi görüntüleyen denetimin kimliği.
SelectedColor - ColorPicker tarafından seçilen ilk renk.

Renk seçici iletişim kutusunun nasıl görüntüleneceğini ve seçili rengin nasıl görüntüleneceğini özelleştirmek için bu özellikleri kullanabilirsiniz. Liste 3'teki sayfa, bu özelliklerden birkaçını nasıl kullanabileceğinizi gösterir.

Liste 3 - CreateCardButton.aspx

<%@ Page Language="C#" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
        <asp:Button
            ID="btnPickColor"
            Text="Pick Color"
            Runat="server" />
        <asp:Label
            ID="lblSample"
            Runat="Server"> Sample </asp:Label>        
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"
            PopupButtonID="btnPickColor"
            PopupPosition="TopRight"
            SampleControlID="lblSample"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Liste 3'teki sayfada Renk Seç düğmesi bulunur (bkz. Şekil 5). Bu düğmeye tıkladığınızda, TextBox'ın üzerinde renk seçici iletişim kutusu görüntülenir. İletişim kutusundan bir renk seçerseniz, seçilen renk lblSample Etiket denetiminin arka plan rengi olarak görünür.

ColorPicker PopupButtonID özelliği, Renk Seç düğmesini ColorPicker genişleticisiyle ilişkilendirmek için kullanılır. PopupButtonID özelliği için bir değer sağladığınızda, hedef denetimin odağı olduğunda renk seçici iletişim kutusu artık görüntülenmez. İletişim kutusunu görüntülemek için düğmeye tıklamanız gerekir.

SampleControlID özelliği, seçili rengi ColorPicker ile görüntüleyen bir denetimi ilişkilendirmek için kullanılır. ColorPicker, bu denetimin arka plan rengini seçili olan renge değiştirir.

Şekil 05: Renk seçici iletişim kutusunu bir düğmeyle görüntüleme (Tam boyutlu resmi görüntülemek için tıklayın)

Özet

Bu öğreticide, açılan renk seçici iletişim kutusunu görüntülemek için ColorPicker denetim genişleticisini kullanmayı öğrendiniz. İlk olarak, odak bir TextBox denetimine taşındığında iletişim kutusunu nasıl görüntüleyebileceğinizi inceledik. Ardından, düğmeye tıklandığında renk seçici iletişim kutusunu görüntüleyen bir düğme oluşturmayı öğrendinsiniz.

Aracılığıyla paylaş

ColorPicker Denetim Genişleticisini Kullanma (C#)

ColorPicker Denetim Genişletici ile TextBox Denetimini Genişletme

Renk Seçici İletişim Kutusunu Başlatmak için Düğme Kullanma

Özet

Geri Bildirim

Ek kaynaklar