マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

  • (子コントロールを持つFormやカスタム コントロールの)
    子コントロールを生成する処理を、コンストラクタに実装した場合、
    デザイン時と実行時の表示が乖離する現象に対する対処方法等を纏めている。

など、デザイナを持つUIサブシステムの開発環境で発生する。

  • Formやカスタム コントロールのコンストラクタは、
    実行時だけでなく、デザイン時(Visual Studioデザイナ上で)も動作する。
    • このため、子コントロールの二重登録のような問題が発生する。
    • 結果として、デザイン時と実行時の表示が異なることになる。
  • この問題は、コンストラクタに実装していた処理を、ロード イベントに移動することで
    解決できるが、この場合、デザイナに子コントロールが表示がされなくなる。

Windows Forms

原因

  • VisualStudio?デザイナにより生成されたコードは*.Designer.cs(vb)に出力される。
    • 当該コントロールの子コントロール毎にメンバ変数が定義され
    • InitializeComponent?に子コントロールの設定処理が実装される。
  • コンストラクタは実行時だけでなく、デザイン時にも実行される。
    コンストラクタでは、上記のInitializeComponent?を呼び出してる。
  • InitializeComponent?は子コントロール毎に定義されたメンバ変数に
    子コントロールをnewしてからプロパティ設定をしているため、
    子コントロールの二重登録のような問題は起きない。
  • しかし、コンストラクタのコードから子コントロールを追加するような処理を実装すると
    • メンバに直接子コントロールをAddしたりする場合
    • DataSource?を設定してDataBind?したりする場合

この結果が、*.Designer.cs(vb)に出力される
VisualStudio?デザイナの仕様であるため、
子コントロールの二重登録のような問題が起きてしまう。

対策

InitLayout?イベント・ハンドラ

このため、対策としては、InitLayout?イベント・ハンドラをオーバ ライドして
Formやカスタム コントロールの初期化処理を同梱するという方法が有用である。

  • InitLayout?は、コントロール配置時にのみ発生するイベントのハンドラーである。
  • このため、デザイン時・実行時に処理が実行されて二重登録が起きる問題は発生しなくなる。
  • ただし、コントロールのリサイズなどによってInitLayout?イベントが再発生することがある。
    この際、同様に結果が*.Designer.cs(vb)に出力され、
    二重登録のような問題が発生することがあるようなので、
    制御用のコードを別途、実装する必要がある。

DesignMode?プロパティ

また、DesignMode?プロパティを使用してデザイン時と実行時を判別できる。

考察

Windows Formsでは、デザイン専用コードを実装する必要が無いため、
ASP.NET Web Formsのケースより簡単にデザイン時と実行時の表示を一致させることが出来るが、
製品レベルの作り込みで、通常、ユーザ・プログラムでここまでの実装は行わない方が無難であると考える。

ASP.NET Web Forms

対策の概要

ロード イベントに処理を移動

  • コンストラクタに実装した処理を、ロード イベントに移動する。
  • この場合、この場合、デザイナに子コントロールが表示がされなくなるので、
    必要に応じて、以下のデザイン サポート コードの実装を追加する。

デザイン サポート コードを実装

GetDesignTimeHtml?メソッドからVisual Studioデザイナに表示するHTMLを返すことで対応する。

詳細

原因

  • WebサイトでなくWebアプリケーションであれば *.Designer.cs(vb)も出力されるが、ここは、
    • メンバ変数の定義のみが生成され、
    • 子コントロールの設定処理は、*.aspxにマークアップ側に実装される。
  • 通常、*.aspxのマークアップを使用して子コントロールの設定処理が行われる。
  • コンストラクタでAdd やDataBind?で子コントロールを追加すると、
    WindowsForms?と同じように、子コントロールにマークアップに追加され問題が発生する。
  • 例えば、
    下記のようなコンストラクタの実装によって、
    選択項目1~3を生成するカスタムRadioButtonList?コントロールを作成した場合、
    /// <summary>コンストラクタ</summary>
    /// <summary>コンストラクタでプロジェクトなどでの標準スタイルを適用する。</summary>
    public WebCustRadioButtonList() {
      // 初期設定のプロパティ値を設定する。
      // ※デザインタイム・プロパティのほうが優先される。
    
      // WebCustRadioButtonListの初期化(データバインド)
      string[] itemlist = { "選択項目1", "選択項目2", "選択項目3" };
      this.DataSource = itemlist;
      this.DataBind();
    
      // 横方向にオプションボタンを並べて表示する。
      this.RepeatDirection = RepeatDirection.Horizontal;
    }

カスタムのRadioButtonList?コントロールのタグ内に、
子コントロール(ListItem?)のコレクションのタグが出力される。

<my_wcc:WebCustRadioButtonList ID="WebCustRadioButtonList1" runat="server" Width="340px">
  <asp:ListItem Value="選択項目1">選択項目1</asp:ListItem>
  <asp:ListItem Value="選択項目2">選択項目2</asp:ListItem>
  <asp:ListItem Value="選択項目3">選択項目3</asp:ListItem>
</my_wcc:WebCustRadioButtonList>

この実装の状態で、Visual Studioデザイナでコントロールのサイズを変更したところ、

Visual Studioデザイナ上での表示が下記のような、意図せぬ表示となる問題が発生する。

<my_wcc:WebCustRadioButtonList ID="WebCustRadioButtonList1" runat="server" Width="340px">
  <asp:ListItem Value="選択項目1">選択項目1</asp:ListItem>
  <asp:ListItem Value="選択項目2">選択項目2</asp:ListItem>
  <asp:ListItem Value="選択項目3">選択項目3</asp:ListItem>
  <asp:ListItem Value="選択項目1">選択項目1</asp:ListItem>
  <asp:ListItem Value="選択項目2">選択項目2</asp:ListItem>
  <asp:ListItem Value="選択項目3">選択項目3</asp:ListItem>
</my_wcc:WebCustRadioButtonList>

これは、Visual Studioデザイナ上でコンストラクタが2回実行され、
DataSource?ListItem?が2回追加されたためである。

対策

  • VisualStudio?デザイン サポート コードは、ControlDesignerクラスを継承するデザイナ クラスのGetDesignTimeHtmlメソッドのオーバーライドに実装する。
    /// <summary>WebCustRadioButtonListのVisual Studioデザインサポートを実装する</summary>
    internal class WebCustRadioButtonListDesigner : ControlDesigner {
      /// <summary>メンバ変数にWebCustRadioButtonListを保持</summary>
      protected WebCustRadioButtonList wcrbl;
    
      /// <summary>初期化</summary>
      public override void Initialize(IComponent component) {
        if (component is WebCustRadioButtonList) {
          base.Initialize(component);
          this.wcrbl = (WebCustRadioButtonList)component;
        }
      }
    
      /// <summary>Visual Studioデザイナに表示するHTMLを返す。</summary>
      public override string GetDesignTimeHtml() {
        try {
          // 非常に単純なコードであるため、
          // スタイル関係のプロパティ設定、子コントロールのインスタンス数のプロパティ設定を反映しない。
          string ret = ""
          + "<table>"
          + "  <tr>"
          + "    <td>"
          + "      <input type=\"radio\" value=\"選択項目1\" />"
          + "      <label >選択項目1</label>"
          + "    </td>"
          + "    <td>"
          + "      <input type=\"radio\" value=\"選択項目2\" />"
          + "      <label>選択項目2</label>"
          + "    </td>"
          + "    <td>"
          + "      <input type=\"radio\" value=\"選択項目3\" />"
          + "      <label >選択項目3</label>"
          + "    </td>"
          + "  </tr>"
          + "</table>";
    
          return ret;
        }
        catch (Exception ex) {
          // エラーの場合
          return String
            .Concat("<h3>Error</h3>Stack Trace:<br>", ex.StackTrace);
        }
      }
    }
  • 最後に、上記のデザイナ クラスを使用するように、カスタム ラベル コントロール(Ctrl.WebCustLabel?)のクラス定義に「Designer」 属性を使用してデザイナ クラスを指定する。
    /// <summary>System.Web.UI.RadioButtonListのカスタム・コントロール</summary>
    [Designer("Ctrl.WebCustRadioButtonListDesigner"),
    ToolboxData("<{0}:WebCustRadioButtonList runat=server></{0}:WebCustRadioButtonList>")]
    public class WebCustRadioButtonList : RadioButtonList

考察

  • このControlDesigner?クラスのGetDesignTimeHtml?メソッドのオーバーライドのサンプルは、非常に簡素な実装であるため、
    文字のフォント、サイズ、色などの、スタイル関係のプロパティ設定、子コントロールのインスタンス数のプロパティ設定は反映されない。
  • これらをHTMLタグに反映させる場合は、
    Visual Studioデザイン サポート コードを実装する必要がある。
    しかし、デザインタイム・プロパティ設定により可変となる
    • 「実際のWebアプリケーション上での外観」と
    • 「Visual Studioデザイナ上での外観」を

一致させるには複雑な実装が必要になる。

  • プロジェクト部品でのサポートは考えなくて良いと考える。
    また、製品レベルの作り込みであっても、
    これらを「完全に」一致させるようなコードを実装するのは、無駄を含むため、
    避けた方が良い(デザインを行なうのに必要となる範囲で一致させるレベルに留める)。

Tags: :.NET開発, :UIサブシステム, :Windows Forms, :ASP.NET Web Forms


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-10-17 (火) 16:47:49 (733d)