はじめに
ASP.NETには標準の色選択ダイアログコントロールがありません。この記事ではASP.NETとAjax Control Toolkitを利用してColorDialogコントロールを作成する方法について説明します。
入手方法
ASP.NET AJAX、Ajax Control Toolkitは公式サイトより入手することができます。
コントロールの要件定義
コントロールに要求される機能は以下のものを考えました。
- 選択可能な色をユーザー独自にカスタマイズ可能
- ヘッダー部分をハンドルしてドラッグ可能
- 選択した色のプレビュー機能
- 取得した色コード(#ccddff)を、テキストボックスの
value、background-color、colorプロパティのいずれかにセット可能 - 選択後の処理をユーザー独自にオーバーライド可能
これらの機能を持ったコントロールを作成します。イメージは下のようになります。
完成したコントロールのイメージ画像
サーバサイドの処理の作成
クラスは以下の図のように設計します。
クラス設計
コントロールの階層構造は次のように設計します。
プロパティの作成
設計図に従ってプロパティを作成していきます。各プロパティは次の用途で使用します。
| プロパティ名 | 用途 |
| CellCount | 表示する色のセルの数を保持します。 |
| ColorList | 選択可能な色の一覧を保持するコレクションです。 |
| PreviewMode | 色をプレビューするかどうかを設定します。 |
| TargetProperty | は選択した色コードを設定するプロパティ（value、background-color、color）を保持します。 |
| ZIndex | Z軸方向に表示する順序を保持します。 |
