午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

カラーピッカーのdll(ライブラリ)作った、WPFユーザーコントロール

WPF、C# .NET #ソフトウェア WPF 自作アプリ
カラーピッカーのdll(ライブラリ)できた
イメージ 1
見た目
これは以前の
2018/04/03
 
これと
これの組み合わせで作った
 
動き
イメージ 2
数値指定はテキストボックス上のマウスホイール回転で10変化
スクロールバーの∧∨クリックで1変化、マウスホイールで10変化
 
ARGBが0～255
HSVのHが0～359、SVは0～100
数値はすべて整数
色の受け渡しはColor構造体でプロパティ名はPickupColor
 
カラーピッカーと受け渡しできる値は5つ
イメージ 8
PickupColorの他にRGBA各値だけでHSVは無し、十分でしょ
 
 
 

f:id:gogowaten:20191212142947p:plain

ユーザーコントロールのdllの作り方は前回とほとんど一緒でWPFアプリの新規作成で開始してソリューションに新規プロジェクト追加でクラスライブラリ(.NET Framework)を追加して作っていく
今回のは以前作ったRGBとHSVを相互変換するdllのHSV.dllと
整数値の上下するユーザーコントロールのIntegerUpDown.dllを使うので
これを参照に追加している
イメージ 4
ColorPickerLibraryが今回作ったdll(クラスライブラリ)
これの参照にHSV.dllとIntegerUpDown.dllを追加している
 
 
 
 
 
 
 
 
こうして作ったユーザーコントロールdllを他のアプリで使うのも前回のIntegerUpDownと同じで参照に追加して使う

f:id:gogowaten:20191212143001p:plain

dllの名前はColorPickerLibrary
 

f:id:gogowaten:20191212143013p:plain

デザイン画面のほうもツールボックスにアイテムの選択から追加してから使うのが便利
 
イメージ 7
MyColorPickerがカラーピッカーで
34行目で黄色(Colors.Yellow)を渡している
40行目はカラーピッカーの色を取得して、Borderの背景色に設定している
カラーピッカー使いたいときはたったこれだけでできるようになった、楽ちん
 
 
WPF便利
ユーザーコントロールの表示サイズを半分にしてみる
イメージ 9
29行目でScaleTransformを使ってMyColorPickerの表示サイズを半分の0.5にしている
これで起動すると
イメージ 10
小さくなった！
カラーピッカーの○の位置はマウスカーソルの位置を取得して、さらにそれを元にHSVのSVの値を設定している
表示サイズ変更時の処理は特別何かを書いたわけじゃないから、サイズが変わるとSVの値とかも、それに応じて変わってしまうんじゃないと思ったけど
カラーピッカーの○をマウスで動かしてみても期待どおりに動た！すごーい
WPF便利
 
 
ARGBの各値(byte型)4個とPickupColor(Color構造体)は双方向バインディングで
4個対1個のバインディングなのでMultiBindingを使っている
このバインディングはbyte型とColor型を変換する必要があるので変換するコンバーターも作った
イメージ 11

203行目からマルチバインディング、コンバーターのConverterRGB2Colorは

 

f:id:gogowaten:20191212143038p:plain

こう、このあたりは以前の
WPF、Borderの背景色(Background.Brush)とスライダーの値を双方向バインディング？ ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/14987741.html
これと同じ
だけどこのときはC#じゃなくてVB
 
 
 
カラーピッカーのマウスのドラッグ移動で動かす○の表示はGridパネルの中に黒枠、白枠のEllipseコントロールを入れたControlTemplateをThumbコントロールに指定している
Thumb
	┗ControlTemplate
		┗Grid
			┣黒枠のEllipse
			┗白枠のEllipse
こんなかんじなのを
イメージ 13
こう書いたのは以前の記事
WPFとVB.NET、ControlTemplateをコードで作成 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/14156250.html
これもVBで書いた
 
今回難しかったのはグラデーション画像の上でクリックした時に○をクリックした場所に移動させた後、そのまま○をドラッグ移動できるようにするところ
2年前は移動させた後に○をクリックしないとドラッグ移動できなかった、つまり画像と○の2回クリックが必要だったけど
単体テストコードでコントロールのイベントを発生させる - ABCの海岸で
http://d.hatena.ne.jp/abcneet/20110620/1308551640
こちらの記事のおかげでできた！
 
RaiseEventっていうイベントを発生させるメソッドこれが鍵
イメージ 14
フィールドに位置を記録する用のPoint型変数を用意しておいて
PointDiff
 

f:id:gogowaten:20191212143338p:plain

グラデーション画像のImageSVの左クリックイベントの時にクリック位置(258行目)と○の位置の差を記録(260行目)する
267行目で○にRaiseEventメソッドを実行、引数はこの左クリックイベントのときのeをそのまま渡している、これで○を左クリックしたことになるみたいで、このままマウスが動かされると実際にクリックされたグラデーション画像じゃなくて○のドラッグ移動になる
あとはつじつま合わせ
イメージ 16
ドラッグ移動の移動距離に位置の差(PointDiff)を加算してあげる(311,312行目)と期待どおりの動きになった
別に必要な動作じゃないけどクリックが1回減るからこのほうがラク
 
 
 
2018/11/05追記
このカラーピッカーを使うには以下の3つのDLLファイルが必要
ColorPickerLibrary.dll
HSV.dll
IntegerUpDown.dll
これらをすべて参照に追加して使えるようになる

f:id:gogowaten:20191212143354p:plain

追記ここまで
 
 
 
ColorPickerLibraryのコード全部(GitHub)
20180226forMyBlog/ColorPickerLibrary at master · gogowaten/20180226forMyBlog
 
アプリとdllダウンロード先
 
ライブラリダウンロード(ヤフーボックス)
 
 
 
関連記事
5年後

gogowaten.hatenablog.com

 

 

 

2018/04/10は4日後
Owner指定するタイミング、別WindowとMainWindowとの連携、カラーピッカーを追加してパレットの色変更 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15454469.html
 
2018/4/3は3日前
WindowsFormのNumericUpDownみたいなのをWPFのユーザーコントロールでDLLで作ってみた ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15442773.html
 
2018/3/30は1週間前
ユーザーコントロール(WPF)のDLLを作ってアプリで使うまでの手順メモ ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15436544.html
 
2018/2/18は1ヶ月ちょい前
dllファイル(クラスライブラリ.NET framework)の作り方と使うまでの手順メモ ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15377219.html