Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAX版ColorDialogコントロールを作成する

Ajax Control Toolkitを利用したドラッグ可能なColorDialogコントロール

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/04/09 08:00

ダウンロード ColorDialog.zip (536.6 KB)

ASP.NET AJAXとAjax Control Toolkitを利用して、ドラッグ可能で選択した値の設定先をプロパティで変更可能な、ColorDialogコントロールを作成する方法について説明します。

目次

はじめに

 ASP.NETには標準の色選択ダイアログコントロールがありません。この記事ではASP.NETとAjax Control Toolkitを利用してColorDialogコントロールを作成する方法について説明します。

入手方法

 ASP.NET AJAX、Ajax Control Toolkitは公式サイトより入手することができます。

コントロールの要件定義

 コントロールに要求される機能は以下のものを考えました。

  • 選択可能な色をユーザー独自にカスタマイズ可能
  • ヘッダー部分をハンドルしてドラッグ可能
  • 選択した色のプレビュー機能
  • 取得した色コード(#ccddff)を、テキストボックスのvaluebackground-colorcolorプロパティのいずれかにセット可能
  • 選択後の処理をユーザー独自にオーバーライド可能

 これらの機能を持ったコントロールを作成します。イメージは下のようになります。

完成したコントロールのイメージ画像
完成したコントロールのイメージ画像

サーバサイドの処理の作成

 クラスは以下の図のように設計します。

クラス設計
クラス設計

 コントロールの階層構造は次のように設計します。

プロパティの作成

 設計図に従ってプロパティを作成していきます。各プロパティは次の用途で使用します。

プロパティ名用途
CellCount表示する色のセルの数を保持します。
ColorList選択可能な色の一覧を保持するコレクションです。
PreviewMode色をプレビューするかどうかを設定します。
TargetPropertyは選択した色コードを設定するプロパティ(valuebackground-colorcolor)を保持します。
ZIndexZ軸方向に表示する順序を保持します。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5