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

  • [アーティクル]

提供元: Microsoft

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 を参照)。

Simple form for creating a business card

図 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 を参照)。

The ColorPicker Control Extender

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

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

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

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

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

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

Adding an extender

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

Selecting a control extender with the Extender Wizard

図 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 は、このコントロールの背景色を現在選択されている色に変更します。

Displaying the color picker dialog with a button

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

まとめ

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

前へ