次の方法で共有

アクション リストとサービスを使用したサンプル コントロール デザイナ

  • [アーティクル]

更新 : 2007 年 11 月

このトピックでは、サービスとアクション リストを使用する ASP.NET コントロール デザイナにより、カスタム サーバー コントロールのためのデザイン時ユーザー インターフェイス (UI) を提供するサンプルについて説明します。

次のセクションには、カスタム サーバー コントロール用の ASP.NET コントロール デザイナの作成方法および使用方法を示したサンプル コードが含まれます。特にこのトピックでは (以下に示す関連のサンプル コードのトピックと合わせて)、デザイナの操作に関連する次の機能およびタスクを説明します。

  • デザイナ ホスト サービスとアクション リストを使用するデザイナの作成。

  • デザイナとカスタム コントロールとの関連付け。

  • コントロールとそれに関連するデザイナの、アセンブリへのコンパイル。

  • Web ページのコントロールの参照。

  • Visual Studio 2005 のデザイン ビューによるコントロール デザイナの操作。

デザイナのサンプル コードには、2 つのバージョンがあります。1 つは Visual Basic で記述され、もう 1 つは C# で記述されています。このサンプルは、ホスト サービスとアクション リストを使用するカスタム コントロール デザイナを示します。サンプル コードは、「方法 : コントロール デザイナでサービスとアクション リストを使用する」のトピックにあります。サンプル コードには、4 つのカスタム コントロールがあり、すべて、デザイナの使用を表すためだけに作成された簡単なものです。カスタム コントロールのうちの 3 つは、Panel クラスから派生しており、4 番目のカスタム コントロールはカスタムの Button コントロールです。ソース コードの各パネル コントロールにも、関連付けられたカスタム デザイナ コントロールがあります。これらのデザイナは、コントロールが Visual Studio 2005 などのホスト環境と対話できるようにするサービスを使用します。これらのデザイナには、コントロールを構成するためのさまざまなタスクを含むデザイン時メニューの作成に使用できるコードが、ビジュアル デザイン環境 (Visual Studio 2005 の場合はデザイン ビュー) に用意されています。

サンプルのコンパイル

Visual Basic のサンプルと C# のサンプルの機能は同じです。このため、どちらのプログラミング言語のサンプルを選択してもかまいません。

指定したサンプルを使用するには、サンプルをライブラリとしてコンパイルし、生成されたアセンブリを Web アプリケーションの Bin ディレクトリに配置します。

コマンド プロンプトからサンプルをコンパイルする方法を次のコード例に示します。

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

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

サンプルをコンパイルした後、生成された DesignerServicesAndListsVB.dll ファイルまたは DesignerServicesAndListsCS.dll ファイルを Web サイトの Bin フォルダにコピーするのを忘れないでください。

必須 XML ファイル

コントロールとデザイナを含むアセンブリ以外に、このサンプルは 3 つの独立した XML ファイルに依存します。これらの XML ファイルには、ホスト環境が提供するサービスに対するデザイナの利用方法を示す基本的なスタイル情報が収められています。この場合、デザイナはデザイン時にスタイル データを XML ファイルから動的にロードし、そのデータを使用して、デザイン サーフェイスのコントロールの外観を変更します。この例では、デザイナ ホスト サービスの使用を示していますが、スタイル定義の実装にこの方法をお勧めする意図はありません。

このサンプルの XML ファイルは、コントロールをホストする ASP.NET Web ページと同じフォルダ内にあります。RedStyle.xml、BlueStyle.xml および GreenStyle.xml の各ファイルのコンテンツを次に示します。

RedStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="red"></style>
    <style name="ForeColor" value="white"></style>
</styles>

BlueStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="blue"></style>
    <style name="ForeColor" value="white"></style>
</styles>

GreenStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="green"></style>
    <style name="ForeColor" value="white"></style>
</styles>

ASP.NET ページでのサンプル コントロールとデザイナの使用

サンプル コントロールとデザイナを使用するには、Visual Studio 2005 などのデザイナで使用できる ASP.NET Web ページにコントロールを配置する必要があります。このサンプルのために、Visual Studio 2005 で Web サイトに ASP.NET Web ページを追加する必要があります。まず、新しい Web ページを作成します。次に、ソース ビューで、既定のページ コンテンツを削除し、次のコード例に示す Page ディレクティブと Register ディレクティブを追加します。

<%@ page language="VB" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsVB" 
    namespace="Samples.AspNet.VB.Controls" %>

<%@ page language="C#" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsCS" 
    namespace="Samples.AspNet.CS.Controls" %>
d0etxzd8.alert_note(ja-jp,VS.90).gifメモ :

Visual Basic と C# のディレクティブの違いは、Page ディレクティブの言語属性と Register ディレクティブのアセンブリ名の拡張子のみです。

また、次のマークアップ コードを Register ディレクティブの記述の続きにコピーする必要があります (このコードは、Visual Basic と C# のいずれを使用している場合でも同じです)。

<!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 id="Head1" runat="server">
    <title>Designer Samples</title>
</head>
<body>
  <form id="form1" runat="server">
      <p style="font-family:tahoma;font-size:larger;
      font-weight:bold">
        Using Action Lists and Designer Host Services</p>
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
        PanelContainerDesigner using a DesignerActionList, which
        obtains a list of XML files in the project and sets 
        the style using the XML element
        definitions.</span><p />
      </div>
      <aspSample:ControlWithStyleTasks id="ctl1" 
        runat="server" 
        backcolor="Red" forecolor="White">
          Hello there.</aspSample:ControlWithStyleTasks>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
        PanelContainerDesigner using configuration settings
        to obtain 
        the FrameCaption value.</span><p />
      </div>
      <aspSample:ControlWithConfigurationSetting 
        id="ctl2" runat="server">
        Hello There
      </aspSample:ControlWithConfigurationSetting>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
        PanelContainerDesigner using a smart-task action 
        item to insert a new button on the Web Forms page.</span><p />
      </div>
      <aspSample:ControlWithButtonTasks 
        id="ctl3" runat="server">
        Hello There
      </aspSample:ControlWithButtonTasks>
      &nbsp; &nbsp;
  </form>
</body>
</html>

サンプルの構成設定

このサンプルのデザイナの 1 つは、構成ファイル エントリを使用して、いずれかのカスタム コントロールにデザイン ビューのタイトルを動的に表示します。Web サイトの Web.config ファイルを開くか、このファイルが存在しない場合は作成し、次のコード例に示すように、<appSettings> 要素にキーを追加します。

<appSettings>
  <add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>

Visual Studio 2005 でのコントロール デザイナのテスト

Web サイトの Bin フォルダにコンパイル済みアセンブリである .dll ファイルを追加し、XML ファイルを追加し、参照されるカスタム コントロールを含むホスト ページを追加し、Web.config ファイルにエントリを作成すると、デザイナでコントロールを操作できます。ページが Visual Studio 2005 のデザイン ビューで開かれていることを確認します。ページには 3 つのパネル コントロールがあることに注意してください。コントロールをクリックすると、編集可能な領域に外枠が表示されます。

デザイナ サービスとアクション リストのテスト

最初のコントロールのデザイナは、マウス ポインタをコントロールの右上隅に置き、アクション リスト ボタンをクリックするとテストできます。アクション リストが表示されたコントロールのスクリーン ショットを次に示します。

アクション リストを表示したコントロール
PanelContainer コントロールの VS デザイナ

アクション リストの [Configure Xml] ボックスで、以前に作成した XML ファイルを選択できます。既存の XML ファイルのいずれかを選択すると、コントロールのデザイン時のスタイルが、その XML ファイルのスタイル情報により更新されます。別の XML ファイルの名前を使用することでも、同じ機能を使用できます。

3 番目のコントロールのアクション リスト ボタンをクリックすると、次のスクリーン ショットに示すようなアクション リストが表示されます。

3 番目のコントロールのアクション リスト
ボタンを追加するカスタム タスクを持つ VS デザイナ

[Add a Button] コマンドを使用すると、デザイン時ビューに Button コントロールが追加されます。[Add a custom button] コマンドを使用すると、カスタム ボタン コントロールのインスタンスがページに追加されます。

デザイナ サービスと編集可能領域のテスト

2 番目のコントロールは、キャプション [Title Added From Config] を表示します。デザイナがデザイナ サービスを使用して、Web.config ファイルからのこの設定を抽出し、デザイン時ビューに追加します。

コントロールにはコントロールの編集可能な領域も表示されます。編集可能な領域をクリックして新しいコンテンツを入力できます。そのコンテンツは、ページのソース コードに追加されて永続します。

参照

処理手順

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

方法 : コントロール デザイナでサービスとアクション リストを使用する

概念

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