ColorPicker を作ってみた

WPF で ColorPicker を作ってみました．

Excel なんかでよく見るような ColorPicker と，
Alpha 値も指定できるカラーパレットを使った ColorPicker の
両方を実装してみました．

少し前に勉強した ItemsControl に関する知識が大活躍．
結構嬉しい＆楽しかった．

せっかくなので少し中身の話．
ColorPicker のようなコントロールを作るとき，
「ボタンを押すとドロップダウン形式でコンテンツが表示される」コントロールが必要になります．
ここではこのコントロールを ToggleButton と Popup で実現しています．
これは次のように書くことで意外と簡単にできてしまいます．

実行結果は次のようになります．

Popup の IsOpen プロパティに ToggleButton の IsChecked プロパティをバインドしているため，
ToggleButton を押すと Popup が下に表示されるようになります．
また，Popup の StaysOpen プロパティを False にしているため，
Popup 領域以外をマウスクリックすると Popup が自動的に閉じるようになっています．

基本的にはこの仕組みを使って実装しています．
しかし，このままでは少し困ったことがありました．
たいていのドロップダウンコンテンツを表示させるボタンには，
右端に下三角の矢印のようなものが表示されています．
これを表示させようとして，ToggleButton の Content プロパティに
次のようなコードを記述しました．

11 行目の Path オブジェクトでその三角マークを作っています．
雰囲気を出すために左側に色を固定した四角形を表示させています．
実行結果は次のようになります．

一見なんの問題もないように見えますが，
ToggleButton に Width プロパティを指定するととんでもないことになります．
例えば Width=”200″ とすると次のようになります．

右端に表示されていたと思っていた下三角マークが実はそうではなかったのです．
ToggleButton の Content は自動的に中央揃えになるようになっているため，
この問題をどうやってもうまく回避できませんでした．

というわけで，
ToggleButton の Template プロパティを設定してみました．
ToggleButton のコード全体は次のようになります．

実行結果は次のようになります．

無事下三角マークが右端にきました．
しかし，今度は Button としての外観が失われてしまいました．
とほほ・・・．
仕方がないので Button っぽい外観を自前実装して，
冒頭の Screenshot にあるようなボタンができあがりました．
これが意外と大変で，ちょっと時間を費やしてしまった．
本当に他に方法がなかったのだろうか・・・．