おまたせ致しました！昨日 XAML 系製品をリリースし、2011 Vol.2 全体のリリースが完了しました！本リリースを含め、弊社では「Ease-of-use ：使いやすさ」「Performance ：パフォーマンス」「Styling ：スタイリング」の3本の柱に注力をしております。

その中でも、以前の BLOG 記事でもお伝えした「スタイリング」については、ユーザーインターフェイスに統一感を持たせて、一貫性のある UX を提供するにあたって重要な要素であるといえます。以前の記事では Windows Forms における AppStylist や jQuery の theme roller の話もさせて頂きましたが、 XAML 系製品に新たに搭載された Resouce Washer について紹介させて頂きました。これに関しまして、実際にどんな事が行われているのか、といったご質問を幾つかいただいておりましたので、 本社の BLOG に掲載されていた記事を和訳し、意訳を加える形で再度ご紹介させていただきたいと思います。（個人的にはこの機能はかなり気に入っております。是非実際の動作をサンプルでお確かめ下さい！）

原文：Introduction to Resource Washing in NetAdvantage for Silverlight 11.2 Thanks, Damyan!

トライアルダウンロード：http://jp.infragistics.com/dotnet/netadvantage/ultimate.aspx

サンプルファイル：こちらからダウンロードください

リソースウォッシャーは XAML によるクロスプラットフォームのコンポーネントです。目に見える形のあるものではありませんが、外観についての機能となります。この機能は、単色あるいは複数色を指定された XAML のリソースディクショナリを指定した単色で「染める」ことで、 UI のスタイル適用においてドラマチックな効果を得るためのものです。

リソースディクショナリで提供されるため、アプリケーション全体のカラースキームを変更することが可能になります。この機能はオリジナルのブラシ／カラーを変更するのではなく、ディクショナリのコピーを作り、設定に従ってコピーに対して変更を行います。そのため、オリジナルのディクショナリを変更することなくランタイムにて処理されます。リソースディクショナリは、アプリケーションの中のコンポーネントによって使われるスタイル／テンプレート／カラー／ブラシなどの共有オブジェクトのコレクションを含んでおり、リソースウォッシャーはそれらに対して単色指定により選択されたモードに従って色の変更を加える処理になります。

ウォッシュモード

リソースウォッシャーは2つのモードを備えています。

• SoftLightBlend - これはデフォルトのモードで、RGBのそれぞれを指定された単色と混ぜ合わせることをしています。これは服などを色のついた水で染めるような処理であると想像すれば分かりやすいでしょう。下記の実例をご覧ください。

背景に LinearGradientBrush を適用した2つのボーダーがあります。元々の設定ではこのような状態でした。

これに対して、「赤」でランタイム時にリソースウォッシュするとこのようになります。

見ての通り全域に「赤色」が混ざり、カラーパレットが変更された状態になっています。

• HueSaturationReplacement – このモードは、 一色のみを混色することでは十分に色が支配的な状態にならない場合に、一色を使って色相（ Hue ）と彩度（ Saturation ）を入れ替えてしまいます。そのため明度のみが残り、濃淡だけでグラデーションがつくことになります。

上記と同様のボーダーをこのモードでシアンを指定した場合：

今度は全体がシアンと明度だけで染められています。

リソースウォッシャーを利用する

このコンポーネントを利用する最初のステップは参照とネームスペースの設定です。リソースウォッシャーは、ベースのアセンブリに含まれています。 Silverlight の場合は InfragisticsSL4.v11.2.dll です。かつネームスペースを以下のように設定してください。

そして、スコープに従って該当コンポーネントのリソースとして参照します。（例えば UserControl の中です）基本的な設定は XAML とコードの中に設定できます。プロパティは「読んで字のごとく」のものばかりです。 WashColor , WashMode, そして AutoWash です。最後の一つが SourceDictionary となります。 XAML で記述し、オートウォッシュを利用するとこのような形になります：

コードで制御するやり方の利点は、処理を動的にできることです。上記の例ではオートウォッシュが設定されており、アプリケーションの起動時に設定されるため、 styles.xaml で設定されたオリジナルの状態が表示されることはありません。このコンポーネントのプロパティはデフォルト値を持っており、 WashColor のデフォルトカラーは透明であるため、このままではなにも表示されなくなってしまいます。ウォッシュの実行のために2つの方法があります。

• AutoWash を false に設定し、リソースウォッシャーの WashResources() メソッドをイベントハンドラでコールします：

• WashColor を設定せず、AutoWash を設定しません。（デフォルトは true です。）その後イベントハンドラの中で WashColor を設定します。リソースウォッシャーはこの設定で自動的にリソースを変更します：

更なるカスタマイズ

• アタッチドプロパティ

Styles.xaml のリソースディクショナリの中には、他にも幾つか有用なものがあります。：

リソースウォッシャーはブラシに対して2つのアタッチドプロパティを追加しています。一つは true に設定することでウォッシュ処理の対象外にするものです。

もう一つのプロパティは、ブラシをグループに設定するものです。

これらのグループは、リソースウォッシャーの WashGroupCollection の中で設定され、グループごとに個別のウォッシュ処理の設定を行うことができます。

是非皆さんの UI にてリソースウォッシュをお試しください！

リソースウォッシャーを利用するメリットは、色の変更を簡単に行えることではありますが、最も効果を発揮するのは xamGrid のような複雑なスタイリングが適用されたコントロールのスタイル制御を一括して行えるところです。手動でも確かに可能ではありますが、設定が多ければ多いほど変更が面倒な作業となります。ランタイム時に xamColorPicker と組み合わせればユーザーに自由な配色設定をする機会を与えることができ、全体のバランスを崩さずにパーソナライズされた体験を提供することが可能になります！

XAML は大変自由度が高いだけに設定できる項目も多く、スタイル設定に難しさを感じている方もいらっしゃるようです。そんなかたに是非こちらのリソースウォッシャーを使っていただきたいと思います。まさに目から鱗の簡単さです。

いや、そうではなくて配色そのものに迷ってしまう？？もしそうであれば、是非是非弊社の UX ワークショップ の受講もご検討ください！一般的な UI における配色の基本／どうしてあの色はある程度ウケがいいのか？などもお伝えしております！次回パブリックワークショップは2月23日（木）24日（金）を予定しており、皆様のお申し込みをお待ちしております！