ColorPicker コントロールエクステンダーの使用 (VB)

[アーティクル]
04/22/2024

ColorPicker は、ポップアップコントロールの UI を使用してクライアント側の色選択機能を提供する ASP.NET AJAX エクステンダーコントロールです。任意の ASP.NET TextBox コントロールにアタッチできます。それ。

このチュートリアルの目的は、AJAX Control Toolkit ColorPicker コントロールエクステンダーを使用する方法を説明することです。 ColorPicker コントロールエクステンダーは、色を選択できるポップアップダイアログを表示します。 ColorPicker は、ユーザーが色を選択するための直感的なユーザーインターフェイスを提供する場合に便利です。

ColorPicker コントロールエクステンダーを使用して TextBox コントロールを拡張する

たとえば、訪問者がカスタマイズされたビジネスカードを作成できる Web サイトを作成するとします。訪問者はビジネスカードのテキストを入力し、色を選ぶことができます。リスト 1 の ASP.NET ページには、txtCardText と txtCardColor という名前の 2 つの TextBox コントロールが含まれています。このフォームを送信すると、選択した値が表示されます (図 1 を参照)。

図 01: ビジネスカードを作成するための単純なフォーム (フルサイズの画像を表示するにはクリックします)

リスト 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>

リスト 1 のフォームは機能しますが、優れたユーザーエクスペリエンスとは言えません。ユーザーはテキストボックスに色を入力する必要があります。ユーザーが特殊な色 (エンドウ豆グリーンの適切な網掛けなど) を必要とする場合、ユーザーは助けを借りずに HTML カラーコードを把握する必要があります。

ColorPicker コントロールエクステンダーを使用すれば、より優れたユーザーエクスペリエンスを作成できます。 TextBox コントロールにフォーカスを移動すると、ColorPicker にカラーダイアログが表示されます (図 2 を参照)。

図 02: ColorPicker コントロールエクステンダー (フルサイズの画像を表示するにはクリックします)

リスト 1 のフォームで ColorPicker コントロールエクステンダーを使用するには、次の 2 つの手順を実行する必要があります。

ScriptManager コントロールをページに追加する
ColorPicker コントロールエクステンダーをページに追加する

ColorPicker を使用する前に、ScriptManager をページに追加する必要があります。 ScriptManager を追加する場合は、サーバー側の開始 <form> タグのすぐ下に配置することをお勧めします。 ScriptManager をツールボックスからページにドラッグできます (ScriptManager は [AJAX 拡張機能] タブの下にあります)。または、サーバー側の開始 form タグの下にあるソースビューに次のタグを入力できます。

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

ColorPicker コントロールエクステンダーをページに追加する最も簡単な方法は、デザインビューにあります。 txtCardColor TextBox の上にマウスポインターを置くと、スマートタスクオプションが表示され、エクステンダーコントロールを追加できます (図 3 を参照)。このオプションを選択すると、エクステンダーウィザードが表示されます (図 4 を参照)。

図 03: エクステンダーコントロールの追加 (クリックするとフルサイズの画像が表示されます)

図 04: エクステンダーウィザードを使用したコントロールエクステンダーの選択 (フルサイズの画像を表示するにはクリックします)

ColorPicker エクステンダーコントロールを選択して、ColorPicker エクステンダーコントロールで txtCardColor TextBox を拡張できます。 [OK] をクリックしてダイアログボックスを閉じます。

これらの変更を行うと、ページのソースはリスト 2 のようになります。

リスト 2 - CreateCard.aspx (ColorPicker を使用)

<%@ 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>

ページに txtCardColor TextBox コントロールのすぐ下に表示される ColorPickerExtender コントロールが含まれていることに注意してください。 ColorPickerExtender コントロールは、txtCardColor コントロールを拡張して、カラーピッカーダイアログを表示します。

ボタンを使用してカラーピッカーダイアログを起動する

ColorPicker エクステンダーコントロールでは、次のプロパティがサポートされています。

PopupButtonId - カラーピッカーダイアログが表示されるページ上のボタンの ID。
PopupPosition - カラーピッカーダイアログのターゲットコントロールを基準とした位置。指定できる値は、Absolute、Center、BottomLeft、BottomRight、TopLeft、TopRight、Right、Left です (既定値は BottomLeft)。
SampleControlId - 選択した色を表示するコントロールの ID。
SelectedColor - ColorPicker によって選択される初期色。

これらのプロパティを使用して、カラーピッカーダイアログの表示方法と、選択した色の表示方法をカスタマイズできます。リスト 3 のページでは、これらのプロパティの一部を使用する方法を示しています。

リスト 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>

リスト 3 のページには、[Pick Color] ボタンが含まれています (図 5 を参照)。このボタンをクリックすると、テキストボックスの上にカラーピッカーダイアログが表示されます。ダイアログから色を選択すると、選択した色が lblSample Label コントロールの背景色として表示されます。

ColorPicker PopupButtonID プロパティを使用して、[Pick Color] ボタンが ColorPicker エクステンダーコントロールに関連付けられます。 PopupButtonID プロパティの値を指定すると、ターゲットコントロールにフォーカスがあるときにカラーピッカーダイアログが表示されなくなります。ダイアログを表示するには、ボタンをクリックする必要があります。

SampleControlID プロパティは、選択した色を表示するコントロールを ColorPicker に関連付けるために使用されます。 ColorPicker は、このコントロールの背景色を現在選択されている色に変更します。

図 05: ボタンを使用してカラーピッカーダイアログを表示する (フルサイズの画像を表示するにはクリックします)

まとめ

このチュートリアルでは、ColorPicker コントロールエクステンダーを使用して、ポップアップカラーピッカーダイアログを表示する方法について説明しました。まず、TextBox コントロールにフォーカスが移動されたときにダイアログを表示する方法について説明しました。次に、ボタンがクリックされたときにカラーピッカーダイアログを表示するボタンを作成する方法について説明しました。

次の方法で共有

ColorPicker コントロールエクステンダーの使用 (VB)

ColorPicker コントロールエクステンダーを使用して TextBox コントロールを拡張する

ボタンを使用してカラーピッカーダイアログを起動する

まとめ

フィードバック

その他のリソース

次の方法で共有

ColorPicker コントロール エクステンダーの使用 (VB)

ColorPicker コントロール エクステンダーを使用して TextBox コントロールを拡張する

ボタンを使用してカラー ピッカー ダイアログを起動する

まとめ

フィードバック

その他のリソース

ColorPicker コントロールエクステンダーの使用 (VB)

ColorPicker コントロールエクステンダーを使用して TextBox コントロールを拡張する

ボタンを使用してカラーピッカーダイアログを起動する