ご利用の環境はサポートされておりません。

最新のブラウザをご利用のうえ、CSS / JavaScript を有効にしてご覧ください。



WPF ColorSlider

WPFの開発環境も整いBlendの使い方もなんとなく掴めたところで、ようやくテストアプリの制作です。
初めてのサンプルに選んだのはARGBのカラースライダー。特に理由はありません・・・

Blend Objects Tree

まずはUIから。Blend上ではこんな感じになってます。
Gridの上側にはサイズ固定のロゴを中央に配置。ウィンドウズサイズに合わせてエリアの大きさが変わります。
IllustratorのパスをXAMLに変換するためにプラグインを入れたんですが、なぜか複合パスがうまく変換できない・・・ 結局、DesignにAIファイルをインポートしてXAML出力。さらにBlendにインポートという手順を踏んでいます。
下側には高さを固定した2x2のGridを配置し、その中にARGB各チャンネル用のスライダが配置してあります。それぞれ0~255の値をとります。

デザインはひどいですが、とりあえずUI部分は完了です。

次はイベント処理。各チャンネルのスライダーに"ValueChanged"イベントハンドラを設定します。
データバインディングを使えばXAML上で完結できるのかもしれませんが、データの加工方法がよく分からなかったので、今回はC#で各チャンネルの値を取得しロゴの色を設定しました。

まずは各スライダーコントロールの値(0≤VAL≤255)を取得します。
スライダーから取得した値はdouble型なのでbyte型にキャストしつつ、SolidColorBrushオブジェクトのColorプロパティに設定します。
パスのFillにBrushを適用すれば完成です。

最終的に出来上がったのがコレ。

ColorSlider
デフォルト
ColorSlider
各チャンネルのスライダーを変更

実用レベルにはまだまだ長い道のりがありますが、WPFの第一歩ということで一安心です。

関連リンク
はじめてのWPF ~Blendをさわろう~
WPF RSS READER
はじめてのWPF ~環境構築~
知の探求

Comment(1)

Commented by treadmills (2012年2月 6日 03:18)

I was a great deal happy when I first went to Kansas, for it was a big relief from stresses. His pain crushes me here that I can enter in to His forgiveness henceforth.

Trackbacks (0)

http://www.nloc-web.com/mt/mt-tb.cgi/15

関連リンク
はじめてのWPF ~Blendをさわろう~
WPF RSS READER
はじめてのWPF ~環境構築~
知の探求

ページの先頭へ