WPF 対応のブラシ選択ダイアログボックス

Last Updated 2012/02/20

WPF 対応のブラシ選択ダイアログボックスを作りましたので、紹介します。

WPF グラフィクスでは図形の内部の塗りつぶしだけでなく、外形線などの描画にもブラシを使用します。それだけ表現力が豊かになります。Visual Studio のプロパティエディタの中にブラシエディタがありますので、WPF アプリケーションのデザイン時はその恩恵に浴することができます。しかし、自前のアプリケーションの中で使えるブラシエディタがありません。そこで、作ってみました。

まず、WPF がサポートするブラシの種類をおさらいしておきましょう。

• Brushes クラス
• DrawingBrush クラス
• ImageBrush クラス
• LinearGradientBrush クラス
• RadialGradientBrush クラス
• SolidColorBrush クラス
• VisualBrush クラス

各クラスの説明は割愛しますが、Brushes、DrawingBrush、VisualBrush の各クラスはブラシエディタの守備範囲ではありません。つまり、ブラシというより図形の作成が主になるからです。ここで紹介するブラシエディタは残りの 4 つの種類のブラシを作成する機能を持ちます。

まず、SolidColorBrush は単一色によるブラシですから事実上カラー選択ダイアログを使うケースと同じです。ImageBrush はブラシとして使う画像ファイルを選択し、それをどのように表示するかを設定します。LinearGradientBrush と RadialGradientBrush とはグラデーションを使うブラシです。

図は WpfBrushEditor ダイアログを開いたところです。最上部に 5 つのボタンが並んでいますが、ブラシの種類を選択するものです。それぞれのボタンの機能は次のとおり。

	null を返します。つまり、デフォルトのブラシになります。
	SolideColorBrush
	LinearGradientBrush
	RadialGradientBrush
	ImageBrush

2 段目の 4 つのボタンの機能は以下のとおりです。

	Hue（色調）、Saturation（彩度）、Brightness（明度）に基づくカラー選択部から希望の色を選択（矩形のセル内をマウスでクリック）します。つまり、現在の図の状態がそうです。Alpha 値や RGB または HSB 値を微調整することができます。
	140 色の WEB カラーを色調順で並べたリストボックスを表示します。
	同、WEB カラーを名前順で並べたリストボックスを表示します。
	現在のスクリーンの任意の位置をマウスでクリックするとその色を選択色として採用します。つまり、スクリーン上からのカラーの抽出機能です。マルチスクリーンにも対応しています。

下図は左から 140 色の WEB カラー（色調順）、WEB カラー（名前順）、LinearGradientBrush の編集、RadialGradientBrush の編集の順番です。

見てのとおり、LinearGradientBrush の編集では StartPoint と EndPoint をスライダコントロールを使って設定できます。

[] ボタンをクリックするとサム（GradientStop）を追加します。追加可能な数に制限はありません。サム上をマウスの左ボタンでダブルクリックするとその位置の色を選択するダイアログが開きます。サムを削除したい場合はサム上をマウスの右ボタンでダブルクリックします。なお。両端のサムを削除することはできません。

[] ボタンはグラデーションの色とサムの位置を反転（左右を入れ替える）します。

各部位に ToolTip を利用して使い方の説明文を付けておきました。マニュアルがなくても使い方は分かると思います。

また、あまり使わないとは思いますが、SpreadMethod プロパティを選択できるようにしました。このプロパティを使うと、下図のような効果が可能となります。

<Rectangle Width="150" Height="100" Stroke="Black">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.1,0.5" EndPoint="0.2,0.5" SpreadMethod="Repeat">
      <GradientStop Color="White" Offset="0" />
      <GradientStop Color="DarkGray" Offset="1" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush の編集ではグラデーションの半径（RadiusX と RadiusY プロパティ）をスライダコントロールで調整可能です。また、図の中央付近に丸と矩形が見えますが、丸はグラデーションの中心、矩形はグラデーションの始点をあらわします。マウスの左ボタンをクリックするかドラッグすると丸形を移動できます。矩形の移動は右ボタンを使います。

このブラシエディタは機能的には完璧（？）です。と少なくとも、私はそう考えています。というのは、実際にブラシの色を選択するとき、明るい青系とか暗い赤系とかのイメージがあるものです。手当たり次第に気に入る色を探すということはありません。実務上は色調バーの中からイメージにもっとも近い色を選択し、それをベースにしてちょっと明る目とかパステルカラー風とかにするものです。

ブラシエディタの作成を計画した当初は、HSB 値の調整も可能にしようと考えていました。しかし、HSB 値を少し変更しただけでは色の違いを識別することはできません。上図を見てのとおり、グリッド状に区分けしたセルを選択するようにした理由はこういうことです。各セルの S および V 値は 0.0625 ピッチになっています。実用的には問題ない範囲と考えます。

さて、次の ZIP ファイルは、WpfBrushEditor コントロール（WpfBrushEditor.dll）とそのテスト用アプリケーションのソースコードを含みます。WpfBrushEditor.dll はフリーウエアですからご自由にお使いください。プロジェクトは Visual Studio 2010 で作りました。

以下の ZIP ファイルは、WpfBrushEditor.dll のソースコードを含みます。ただし、ZIP ファイルは暗号化されていますので、解凍するにはパスワードが必要です。NETClass および WPFClass のユーザーさんはそれらと同じパスワードを使って解凍してください。

−以上−