ColorPicker Denetim Genişleticisini Kullanma (VB)

  • Makale

Microsoft tarafından

ColorPicker, açılır pencere denetimindeki kullanıcı arabirimiyle istemci tarafı renk seçme işlevi sağlayan ASP.NET bir AJAX genişleticidir. Herhangi bir ASP.NET TextBox denetimine eklenebilir. Evet, evet.

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, bir 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şleticisi ile TextBox Denetimini Genişletme

Örneğin, ziyaretçilerin özelleştirilmiş kartvizitler oluşturmasını sağlayan 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).

Kartvizit oluşturmak için basit form

Ş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

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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ı özelleştirilmiş bir renk istiyorsa (örneğin, yalnızca bezelye yeşilinin 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).

ColorPicker Denetim Genişleticisi

Ş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:

  1. Sayfaya ScriptManager denetimi ekleme
  2. ColorPicker denetim genişleticisini sayfaya ekleme

ColorPicker'ı kullanabilmeniz için sayfanıza bir ScriptManager eklemeniz gerekir. ScriptManager'ı eklemek için sunucu tarafı <form> etiketinin hemen altında yer alı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ü'ndedir. Farenizi txtCardColor TextBox üzerine getirdiğinizde, 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).

Genişletici ekleme

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

Genişletici Sihirbazı ile bir denetim genişletici seçme

Ş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="VB" %>

<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text            
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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 bir düğmenin, renk seçici iletişim kutusunun görünmesine neden olan 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 sayfada bu özelliklerden birkaçını nasıl kullanabileceğiniz gösterilmektedir.

Listeleme 3 - CreateCardButton.aspx

<%@ Page Language="VB" %>

<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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 Etiketi 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 denetim odaklandığında 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çilen rengi ColorPicker ile görüntüleyen bir denetimi ilişkilendirmek için kullanılır. ColorPicker, bu denetimin arka plan rengini seçili durumdaki renge değiştirir.

Renk seçici iletişim kutusunu bir düğmeyle görüntüleme

Ş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.

Önceki