WPF 対応のカラー選択コントロール

Last Updated 2012/02/16


私のホームページでも WPF 対応のカラー選択ダイアログボックスまたはコントロールの習作を紹介していますが、機能やコンパクトさという意味ではまだまだ不満です。このページではカラー選択コントロールについて考えてみたいと思います。


"Color Picker" とか "Brush Editor" などをキーワードとして、WEB サイトをあたってみると、いくつかの有力な情報に出会うことがあります。まず、それらの紹介から始めることにしましょう。

  1. Charles Petzold の ColorPicker
  2. Extended WPF Toolkit の ColorCanvas
  3. Sharp Develop の PropertyGrid コントロール内の BrushEditor コントロール

もちろん、もっと多くのサンプルコードは得られるのですが、コントロールの内容やコードの再利用性を基準に選びました。まず、1. の Charles Petzold のものですが、下図はカラー選択ダイアログを起動したところです。

ColorPicker PZ

Charles Petzold ものはチョット問題があります。彼は Windows 3.1 時代に書いた歴史的名著「プログラミング Windows」で知られるようになりましたが、.NET Framework 時代には対応できていない感じがします。このダイアログのコーディングスタイルも .NET Framework 的あるいは WPF 的とはとてもいえません。動作自体は問題ないのですが、模範的なコーディング手法とはいえませんので、参考にするだけにしましょう。

なお、このコントロールのソースは次のサイトからダウンロードできます。

WPF Documentation Samples

http://archive.msdn.microsoft.com/wpfsamples/Release/ProjectReleases.aspx?ReleaseId=4379

下図は、Tools のページで紹介する Extended WPF Toolkit に含まれるコードからカラー選択コントロールに関係するコードを抜き出して単独のコントロールとして起動したところです。

Tool ColorCanvas

見た目は Petzold ものと似ていますが、スライダコントロールを使って、ARGB の各色成分を個々に調整できる機能があります。コードの著作権は Ms-PL ですから商用利用を含めてコードを変更し使用することができます。

最後のものは下図を見てのとおり、BrushEditor コントロールの形式になっています。

WPG BrushEditor

SolidColorBrush は色を選択するだけですが、LinearGradientBrush ではグラデーションの始点と終点の指定、GradientStop の位置と色の指定が可能です。また、アップダウンコントロールを使って RGB または HSV を微調整する機能もあります。見た目が好きかどうかを別にすれば完成度は一番高いといえます。ただし、中間の GradientStop は 2 点に固定で追加することはできません。

Note テストした結果は良好です。正しく動作します。

ところで、このコントロールの出所は SharpDevelop ですので、コードの著作権は GNU LGPL "LESSER GENERAL PUBLIC LICENSE" になっています。これを一言で言えば、個人または会社内などのクローズした環境の中で使う場合はコードの変更は自由ですが、広く公開する場合はコードを公開しなければなりません。

また、このコントロールは、PropertyGrid コントロールのブラシエディタとして実装されていますので、ブラシエディタ部分だけを取り出す手順が必要です。これがまた大変な作業です。というのは、SharpDevelop の開発者はクラスを細分化するのが好きなようで必要な機能がどこにあるかを探すだけで一苦労です。

なお、このコントロールのソースは次のサイトからダウンロードできます。

WPF Property Grid

http://wpg.codeplex.com/SourceControl/changeset/changes/74372

WpfColorDialog

下図は私が作成したカラー選択ダイアログです。

WpfColorDialog

カラー選択部分を矩形のセルにしていますが、これはカラーを選択するときの実際の動作を考えた上での仕様です。つまり、無限にある色の中から希望の色を選択可能といわれても実務上そんなことはできません。そこで、希望の色のイメージに近い色を選択してから RGB を微調整できるようにしました。

Note カラー選択ダイアログを使って、ブラシエディタを作成しました。WPF 対応のブラシ選択ダイアログボックスをご覧ください。

以下の ZIP ファイルは、WpfColorDialog およびテスト用アプリケーションのプロジェクトです。フリーウエアですので、どなたでもご自由にお使いください。ソースコードの改変・流用も自由です。

WpfColorDialog.zip (79,014 bytes)

HSL と HSB 色空間

ついでといっては何ですが、色空間についてチョット補足しておきたいと思います。.NET Framework には RGB 色空間と HSL 色空間とを扱うことができますが、WPF では HSL 色空間を操作する機能がなくなりました。理由は分かりません。そこで、HSL 色空間と HSB 色空間との違いについて説明します。

下図の左は HSL 色空間、右は HSB 色空間です。HSL は、"Hue"、"Saturation"、"Lightness" で、HSB は、"Hue"、"Saturation"、"Brightness" です。HSB 色空間は HSV 色空間と呼ぶ場合もあります。この場合の "V" は "Value" です。

HSL-HSB ColorSpace

Hue は色相とか色調と訳します。Saturation は彩度、つまり、色のあざやかさです。Brightness または Value は明度で、色の明るさをあらわします。上図の虹色の部分は Hue、つまり、色調を選択するもので、0 度から 360 度の度数であらわします。ちなみに、0 度と 360 度とは赤色で、#FF0000 に相当します。Saturation は 0 〜 1 の数値で、1 のときがもっとも色があざやかで、0 のとき、色のあざやかさがもっとも小さくなります。Brightness も 0 〜 1 の数値で、1 のときがもっとも明るい色で、0 のとき、もっとも暗い色、つまり、黒色になります。ちなみに、Lightness が 0.5 のとき、Brightness が 1 の場合に相当します。

なぜ、ここで唐突に色空間について触れたかというと、ここまで紹介したカラー選択コントロールのカラー選択部の色は HSB 色空間で表現されていることを強調したかったからです。つまり、カラー選択部の右上隅の Saturation および Brightness はともに 1 です。Hue が赤色の場合は #FF0000 になります。


−以上−