チュートリアル : Web サーバーコントロール用の基本的なコントロールデザイナの作成

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、Web サーバーコントロールに対するデザイン時ユーザーインターフェイス (UI) を提供する基本的なコントロールデザイナの作成方法について説明します。

カスタム ASP.NET サーバーコントロールを作成する場合、Microsoft Visual Studio 2005 などのビジュアルデザインツールでコントロールを表示する関連デザイナを作成できます。このデザイナを使用すると、ホスト環境でコントロールのデザイン時 UI を表示できるため、開発者はコントロールのプロパティとコンテンツを容易に構成できます。デザイナ機能、およびカスタムコントロールに関連付けできるさまざまなデザイナクラスの詳細については、「ASP.NET コントロールデザイナの概要」を参照してください。

このチュートリアルでは、次の作業を行う方法について説明します。

標準の複合コントロールデザイナを作成し、これを複合コントロールに関連付けます。
サイズ変更可能な複合コントロールデザイナを作成し、これを複合コントロールに関連付けます。
編集可能な領域を持つ基本的なコンテナコントロールデザイナを作成し、これを WebControl コントロールに関連付けます。このデザイナを使用すると、デザインサーフェイスの編集可能な領域にテキストを追加できます。また、追加コントロールを領域にドラッグすることもできます。
Web ページのカスタムコントロール (およびその関連デザイナ) を参照します。
Visual Studio 2005 のデザインビューで Web ページを処理します。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

Visual Studio 2005。カスタムコントロールとその関連デザイナをホストする Web ページを作成するために使用します。
ASP.NET Web サイト。コントロールをホストするページに使用します。サイトを既に構成している場合は、このチュートリアルの開始点としてそのサイトを使用できます。サイトをまだ構成していない場合、仮想ディレクトリまたはサイトの作成方法の詳細については、「方法 : IIS 5.0 および 6.0 内で仮想ディレクトリを作成および構成する」を参照してください。

カスタムコントロールとデザイナの作成

このセクションでは、3 つの基本的な Web サーバーコントロールと、それぞれのサーバーコントロールに関連付けたカスタムコントロールデザイナを作成します。

コード用ファイルを作成するには

エディタで、使用する言語に対応した拡張子を持つ SimpleControlDesigners という名前の新しいファイルを作成します。たとえば、Visual Studio 2005 で、SimpleControlDesigners.vb または SimpleControlDesigners.cs という名前の新しいクラスファイルを作成します。

デザイナクラスの処理に必要な次の名前空間参照を追加します。コントロールとその関連デザイナを格納するための名前空間も追加します。

Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
End Namespace

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.Design.WebControls;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls 
{
}

ファイルを保存します。

これで、複合 Web サーバーコントロールと関連デザイナを作成する準備が整いました。デザイナの作成先はコントロールと同じアセンブリでも、別のアセンブリでもかまいません。このチュートリアルでは、作業の効率上、同じコードファイルおよびアセンブリにデザイナを作成します。

複合コントロールと関連デザイナを作成するには

SimpleControlDesigners ファイルで宣言した名前空間内で、次のコード例に示すように CompositeControl から継承された複合コントロールクラスのパブリック宣言を作成します。
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

次のコード例に示すパブリックプロパティをクラスに追加します。パブリッククラスは、Web ページの UI のパーツを作成する場合に使用します。

Dim _prompt As String = "Please enter your date of birth: "
Overridable Property Prompt() As String
    Get
        Dim o As Object
        o = ViewState("Prompt")
        If o Is Nothing Then
            Return _prompt
        Else
            Return CType(o, String)
        End If
    End Get
    Set(ByVal value As String)
        ViewState("Prompt") = value
    End Set
End Property

Overridable Property DOB() As DateTime
    Get
        Dim o As Object
        o = ViewState("DOB")
        If o Is Nothing Then
            Return DateTime.Now
        Else
            Return CType(o, DateTime)
        End If
    End Get
    Set(ByVal value As DateTime)
        ViewState("DOB") = value
    End Set
End Property

private String _prompt = "Please enter your date of birth: ";
public virtual String Prompt
{
    get
    {
        object o = ViewState["Prompt"];
        return (o == null) ? _prompt : (string)o;
    }
    set
    {
        ViewState["Prompt"] = value;
    }
}

public virtual DateTime DOB
{
    get
    {
        object o = ViewState["DOB"];
        return (o == null) ? DateTime.Now : (DateTime)o;
    }
    set
    {
        ViewState["DOB"] = value;
    }
}

複合コントロールに子コントロールを追加するメソッドを作成します。次のメソッドは、Web ページに表示される 2 つのテキストボックスと 1 つの改行を追加します。

Protected Overrides Sub CreateChildControls()
    Dim lab As New Label

    lab.Text = Prompt
    lab.ForeColor = System.Drawing.Color.Red
    Me.Controls.Add(lab)

    Dim lit As New Literal()
    lit.Text = "<br />"
    Me.Controls.Add(lit)

    Dim tb As New TextBox()
    tb.ID = "tb1"
    tb.Text = DOB.ToString()
    Me.Controls.Add(tb)

    MyBase.CreateChildControls()
End Sub

protected override void CreateChildControls() 
{
    Label lab = new Label();

    lab.Text = Prompt;
    lab.ForeColor = System.Drawing.Color.Red;
    this.Controls.Add(lab);

    Literal lit = new Literal();
    lit.Text = "<br />";
    this.Controls.Add(lit);

    TextBox tb = new TextBox();
    tb.ID = "tb1";
    tb.Text = DOB.ToString();
    this.Controls.Add(tb);

    base.CreateChildControls();
}

CompositeControlDesigner から派生する簡単な複合コントロールデザイナクラスを作成し、作成した複合コントロールに関連付けます。

デザイナに追加できる UI レンダリング機能にはさまざまなものがありますが、次のコード例では、単にデザイナが作成され、コントロールがデザインビューでサイズ変更されないように、基本クラスのキープロパティがオーバーライドされています。

Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class

public class SimpleCompositeControlDesigner : CompositeControlDesigner
{
    // Set this property to prevent the designer from being resized.
    public override bool AllowResize 
    {
        get { return false; }
    }
}

次のコード例に示すように、複合コントロールのクラス宣言のすぐ上に、作成したデザイナクラスにコントロールを関連付ける Designer メタデータを追加します。

<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl

[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl

ファイルを保存します。

カスタム複合 Web サーバーコントロールと関連デザイナを作成したので、最初のコントロールから派生する 2 番目のコントロールを作成できます。2 番目のコントロールが最初のコントロールと唯一異なるのは、2 番目のコントロールの関連デザイナはデザインサーフェイスでサイズを変更できる点です。

サイズ変更可能な複合コントロールと関連デザイナを作成するには

SimpleControlDesigners ファイルで宣言した名前空間内で、以前に作成した SimpleCompositeControl コントロールから派生する新しい複合コントロールクラスのパブリック宣言を作成します。新しい宣言のコード例を次に示します。
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```

このコントロールを CompositeControlDesigner 基本クラスに関連付けます。

既定では、この例では複合コントロールの、サイズ変更可能な基本デザイナが作成されます。

<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl
End Class

[Designer(typeof(CompositeControlDesigner))]
public class SimpleCompositeControl2 : SimpleCompositeControl
{
}

ファイルを保存します。

最初に作成した 2 つのコントロールは、複合コントロールデザイナに関連付けた複合コントロールでした。次に、WebControl から派生する簡単なコントロールを作成し、これを ContainerControlDesigner クラスに関連付けます。この種のデザイナは、単一のカスタム Web サーバーコントロールにデザイナを関連付け、編集可能な単一の領域をデザインサーフェイスに提供する場合に役立ちます。ここで作成するカスタムコントロールは、実際の機能を実装しません。単に ContainerControlDesigner クラスの機能を示すために取り上げています。

メモ :
また、これと同じ機能は、これまでに作成したような複合コントロールとデザイナを使用して提供することもできます。この例では、ContainerControlDesigner クラスを使用して、これを WebControl コントロールに関連付ける方法を単に説明することを目的としています。

Web サーバーコントロールと、編集可能な領域を持つコンテナデザイナを作成するには

SimpleControlDesigners ファイルで宣言した名前空間内で、次のコード例に示すように、新しい Web サーバーコントロールクラスのパブリック宣言を作成します。
```
    Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class
```
```
 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
```

コンテナコントロールデザイナクラスを作成し、カスタムコントロールに関連付けます。デザイナのフレームのスタイルを格納するための FrameStyle プロパティと、フレームのヘッダーテキストを格納するための FrameCaption プロパティの 2 つのプロパティを実装します。これら 2 つのプロパティにより、コントロールをデザインサーフェイスに表示し、選択するためのフレームが用意されます。次のコード例に、デザイナとプロパティのコードを示します。

メモ :
デザイン時のカスタムコントロールのレンダリングと、単一の編集可能な領域の提供に関するその他のすべての側面は、ContainerControlDesigner クラスにより自動的に処理されます。

Public Class SimpleContainerControlDesigner
    Inherits ContainerControlDesigner

    Dim _style As Style

    ' Add the caption by default.
    Public Overrides ReadOnly Property FrameCaption() As String
        Get
            Return "A Simple ContainerControlDesigner"
        End Get
    End Property

    Public Overrides ReadOnly Property Framestyle() As Style
        Get
            If _style Is Nothing Then
                _style = New Style()
                _style.Font.Name = "Verdana"
                _style.Font.Size = New FontUnit("XSmall")
                _style.BackColor = Color.LightBlue
                _style.ForeColor = Color.Black
            End If

            Return _style
        End Get
    End Property

End Class

public class SimpleContainerControlDesigner : ContainerControlDesigner
{
    private Style _style = null;

    // Add the caption by default. Note that the caption 
    // will only appear if the Web server control 
    // allows child controls rather than properties. 
    public override string FrameCaption
    {
        get
        {
            return "A Simple ContainerControlDesigner";
        }
    }

    public override Style FrameStyle
    {
        get
        {
            if (_style == null)
            {
                _style = new Style ();
                _style.Font.Name = "Verdana";
                _style.Font.Size = new FontUnit ("XSmall");
                _style.BackColor = Color.LightBlue;
                _style.ForeColor = Color.Black;
            }

            return _style;
        }
    }
}

デザイナをコントロールに関連付けます。Web サーバーコントロールのクラス宣言のすぐ上に、Designer メタデータ属性を追加します。この場合、次のコード例に示すように、false パラメータを指定した ParseChildren 属性も追加することに注意してください。この属性は、デザイン時パーサーに、コントロールの内部コンテンツをプロパティではなく、子コントロールとして処理するように指示します。ここでは、デザイン時に実際に他のサーバーコントロールを編集可能領域にドラッグして、そのプロパティの編集も実行できるように、このコントロールの内部コンテンツを子コントロールとして処理します。
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
ファイルを保存します。

3 つのカスタムコントロールと、それに関連付けたコントロールデザイナを作成しました。後は、これらのコントロールをアセンブリにコンパイルし、ビジュアルデザインツールで操作するだけです。

カスタムコントロールとデザイナをコンパイルするには

コマンドプロンプトを開いて、SimpleControlDesigners ファイルを作成したフォルダに移動します。このプロンプトから、ソースコードをアセンブリにコンパイルできます。

メモ :
この場所から .NET Framework コンパイラを実行するには、コンピュータの PATH 変数に .NET Framework のインストール先のパスが既に追加済みである必要があります。通常、このパスは Windows のインストールディレクトリ内の \Microsoft.NET\Framework\<バージョン番号> になります。PATH 変数を更新していない場合、[マイコンピュータ] を右クリックし、[プロパティ] をクリックします。次に [詳細設定] タブをクリックし、[環境変数] をクリックします。[システム環境変数] ボックスの PATH 変数をダブルクリックします。[変数値] ボックスで、既存の値の最後にセミコロン (;) を追加し、各自の .NET Framework のインストールパスを入力します。[OK] をクリックしてダイアログボックスを閉じます。

この場所から .NET Framework コンパイラを実行するには、コンピュータの PATH 変数に .NET Framework のインストール先のパスが既に追加済みである必要があります。通常、このパスは Windows のインストールディレクトリ内の \Microsoft.NET\Framework\<バージョン番号> になります。PATH 変数を更新していない場合、[マイコンピュータ] を右クリックし、[プロパティ] をクリックします。次に [詳細設定] タブをクリックし、[環境変数] をクリックします。[システム環境変数] ボックスの PATH 変数をダブルクリックします。[変数値] ボックスで、既存の値の最後にセミコロン (;) を追加し、各自の .NET Framework のインストールパスを入力します。[OK] をクリックしてダイアログボックスを閉じます。

次のコンパイルコマンドを使用して、SimpleControlDesigners ファイルのコントロールをアセンブリにコンパイルします。

csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb

生成されたアセンブリファイルを、コントロールをホストするページの Web サイトの \Bin フォルダに移動します。

メモ :
コントロールとデザイナをコンパイルする Visual Studio ユーザーは、System.Design.dll への参照を追加する必要があります。詳細については、「方法 : Web サイトに .NET コンポーネントまたは COM コンポーネントへの参照を追加する」を参照してください。

コントロールをホストする Web ページの作成

カスタムコントロールとその関連コントロールデザイナでアセンブリを作成した後は、Visual Studio 2005 で Web ページを作成して、コントロールを参照し、デザインビューでの表示方法を確認し、ブラウザにページをロードします。

コントロールをホストする Web ページを作成するには

Visual Studio 2005 に Web サイトを表示した状態で、ControlDesigners.aspx と呼ばれる新しいページを作成します。ページの上部のページ宣言のすぐ下に、次のコード例に示すように、前に作成したアセンブリとコントロールを参照する Register ディレクティブを追加します。
```
<%@ Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersVB" 
  namespace="Samples.AspNet.VB.Controls" %>
```
```
<%@ Page Language="C#" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersCS" 
  namespace="Samples.AspNet.CS.Controls" %>
```

次のコード例に示すように、ページの残りの項目を実行し、これまで作成した 3 つのコントロール、SimpleCompositeControl、SimpleCompositeControl2、および SimpleContainerControl をそれぞれ参照します。各コントロールを参照するには、Register ディレクティブで指定される aspSample プレフィックスを使用することに注意してください。

<!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>Designers Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1" runat="server" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3" runat="server" 
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

<!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>Designers Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1" runat="server" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3" runat="server" 
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

このページを保存します。

これで、デザインビューでページをテストし、コントロールデザイナの動作を確認できます。

コントロールのデザイン時レンダリングを実行するには

デザインビューに切り替え、ページを表示します。

コントロールは、次のスクリーンショットのように表示されます。2 番目の複合コントロールは変更可能ですが、最初の複合コントロールはサイズ変更できないことを確認してください。

デザインビュー表示による [ControlDesigners.aspx] ページ
コンテナコントロールのコンテンツ領域をクリックし、コントロールのテキストコンテンツを入力します。
ソースビューに切り替え、コンテナコントロールのソースコードを検索します。領域に入力したテキストがソースコードに表示されるようになったことを確認します。
デザインビューに戻します。
コントロールのフレームをクリックし、サイズ変更可能なアイコンのいずれかにマウスポインタを合わせ、コンテナコントロールのサイズを変更します。
テキストコンテンツの最後にある、コントロールの編集可能領域をクリックし、Enter キーを押して改行を追加します。
ツールボックスから Button コントロールをドラッグして、入力したテキストの下の編集可能領域にドロップします。ツールボックスの Label コントロールをドラッグし、ボタンの隣にドロップします。これで、子コントロールを編集可能領域にドラッグできることが確認できます。必要に応じて、デザイン時に子コントロールにプロパティを設定し、Button コントロールが Label コントロールの Text プロパティを実行時に更新するコードを追加できます。

追加したコントロールを設定したページは、次のスクリーンショットのようになります。

子コントロールを持つコンテナコントロール
このページを保存します。

実行時にページを表示するには

ページをブラウザに読み込みます。

コントロールは、デザインビューでカスタマイズしたとおりに表示されます。ページは次のスクリーンショットのようになります。

完成したコントロールデザイナの Web ページ

次の手順

このチュートリアルでは、複合コントロールデザイナまたはコンテナコントロールデザイナに関連付けられたカスタムコントロールの作成に伴う基本的なタスクを説明しました。Visual Studio 2005 のデザインビューの編集可能領域でコントロールのサイズ変更やテキストの追加ができる、デザイナ付きのカスタムコントロールを作成しました。次に行う作業の例を示します。

コントロールデザイナに対して使用できる、その他の強力な新機能を調べます。詳細については、「ASP.NET コントロールデザイナの概要」を参照してください。
専用のデザイン時レンダリングを作成したり、アクションリストなどの機能を利用できる、より高度なデザイナの事例作成を試みます。詳細については、「アクションリストとサービスを使用したサンプルコントロールデザイナ」を参照してください。

参照

概念

ASP.NET コントロールデザイナの概要

次の方法で共有

チュートリアル : Web サーバーコントロール用の基本的なコントロールデザイナの作成

前提条件

カスタムコントロールとデザイナの作成

コード用ファイルを作成するには

複合コントロールと関連デザイナを作成するには

サイズ変更可能な複合コントロールと関連デザイナを作成するには

Web サーバーコントロールと、編集可能な領域を持つコンテナデザイナを作成するには

カスタムコントロールとデザイナをコンパイルするには

コントロールをホストする Web ページの作成

コントロールをホストする Web ページを作成するには

コントロールのデザイン時レンダリングを実行するには

実行時にページを表示するには

次の手順

参照

概念

その他のリソース

次の方法で共有

チュートリアル : Web サーバー コントロール用の基本的なコントロール デザイナの作成

前提条件

カスタム コントロールとデザイナの作成

コード用ファイルを作成するには

複合コントロールと関連デザイナを作成するには

サイズ変更可能な複合コントロールと関連デザイナを作成するには

Web サーバー コントロールと、編集可能な領域を持つコンテナ デザイナを作成するには

カスタム コントロールとデザイナをコンパイルするには

コントロールをホストする Web ページの作成

コントロールをホストする Web ページを作成するには

コントロールのデザイン時レンダリングを実行するには

実行時にページを表示するには

次の手順

参照

概念

その他のリソース

チュートリアル : Web サーバーコントロール用の基本的なコントロールデザイナの作成

カスタムコントロールとデザイナの作成

Web サーバーコントロールと、編集可能な領域を持つコンテナデザイナを作成するには

カスタムコントロールとデザイナをコンパイルするには