コントロールのルックアンドフィールのカスタマイズ方法

WPFおよびSilverlightのプログラミングモデルで非常に強力な機能の１つがその中で使用しているコントロールのルックアンドフィールを完全にカスタマイズできることです。これにより、開発者とデザイナはコントロールのUIを微妙にでも、劇的にでも見た目を変更することができ、また非常に柔軟性があるのでユーザが望んだとおりに作成することができます。

このチュートリアルでは、コントロールをカスタマイズする方法をいくつか見ていき、それらの技術を使用してDiggアプリケーションのUIを洗練して仕上げます。

コントロールのコンテンツをカスタマイズ

チュートリアルのパート１では、簡単なボタンコントロールをページに追加して、そのコンテンツに"Push Me!" という文字列を設定する方法をご覧頂きました。その後、クリックされた時にコードを実行するように"Click"イベントハンドラを設定しました。 :

これによりボタンはブラウザで以下の様に描画されました。 :

驚かれるかもしれないことですが、ボタンコントロールの"Content"プロパティは"Push Me!"の様な単純な文字列に限られないのです。実は"Content"プロパティに設定したい一連の形状やコントロールを設定することができるのです。

例えば、StackPanelに<Image>や<TextBlock>を入れたものを埋め込むことができます。 :

これによりボタンは実行時以下の様になります。その後もまだ同じ機能性は保っています。（押下すると、ボタンは押下状態になり、クリックイベントハンドラも以前の様に発生します。） :

またShapeコントロール（以下のEllipseコントロールなど）を使用して、ボタンの中にカスタマイズされたベクター画像を作成することもできます。

上記ではEllipseコントロールをオフセットのRadialGradientBrush で塗りつぶして、反射される光沢をそこへ追加しています。 :

ボタンの中にカレンダーコントロールのような対話的なコントロールを埋め込んでちょっと変わった形にすることも可能です。 :

上記のサンプルではカレンダーは完全に対話的です。つまり、エンドユーザは実際に月を前後させてカレンダー上の日付を選択し、カレンダーが埋め込まれているボタンを押下して"Click"イベントハンドラを発生させることができます。:（注：これがなんでいいユーザ体験なのかは分かりませんが、柔軟性をお見せするにはいい例だと思います！）

上記で概略したこれらのコンテンツのカスタマイズシナリオは、ボタンコントロールだけではありません。ContentControl ベースクラスから派生した全てのコントロールで可能です。

コントロールテンプレートを使用してコントロールをカスタマイズ

SilverlightおよびWPFで使用されたコントロールモデルでは、コントロールの内部コンテンツのカスタマイズだけでなく、それ以上のことを行うことができます。オプションとして、コントロールの動作はそのままで、コントロールのビジュアルツリーを何とでも完全に置換することができます。

例えば、ボタンがデフォルトの四角の押下するボタンではなく、以下のような丸い形のボタンにしたいとします。 :

App.xamlファイルに"RoundButton"スタイルを作成することで行うことができます。その中でボタンの"Template"プロパティをオーバーライドし、ControlTemplateを提供して、そのボタンのデフォルトの四角の形を楕円コントロールにTextBlockを入れて入れ替えます。 :

その後<Button>コントロールがこのスタイルリソースを参照するようにしてこの"RoundButton"のルックアンドフィールを使用するようにします。 :

コントロールテンプレート内へのコンテンツの組み込み

上記の"RoundButton"コントロールテンプレートでお気づきになるかもしれませんが、ボタンのサイズとその中に表示されているコンテンツはハードコードされています。（常に"Push Me!"と表示されます。）

WPFやSilverlightのいいところは、これらの設定もカスタマイズすることができるのです。これを {TemplateBinding ControlProperty} タグ拡張シンタックスをコントロールテンプレート内に使用してコントロールのプロパティをバインドすることができます。これによりこのコントロールテンプレートはプロパティとして適用され、コントロール上で外部の開発者が設定できるようになります。 :

上記では、コンテンツを表示するために<TextBlock>コントロールを追加する代わりに、<ContentPresenter>コントロールを使用しています。これによりボタンは単なる文字列だけでなく他のコンテンツも表示できるようになります。（このチュートリアルで最初の方で行った様に）

そうすると、以下の様に3つのボタン上に上記のスタイルを使用することが出来るようになります。（それぞれ異なるコンテンツとプロパティ設定ができます。） :

そして、上記のボタンは以下の様に表示されます。（カレンダーコントロールには勿論ページングや日付選択機能もあります。） :

もし更に進んで、（ "hover"、"focus"、"pushed"のような状態を処理するために）ControlTemplateにストーリーボードの動画を追加することも可能です。この機能により、非常に洗練されたユーザの対話シナリオが可能になり、またHTMLでは不可能なシナリオも可能になります。

アプリケーションのコントロールを処理する開発者は、このスタイルやコントロールの対話などのカスタマイズは全て忘れて、コントロールのイベントを処理し、コントロールのオブジェクトモデルをいつも通りに操作することができ、またデザイナはスタイルやテンプレートを使用してルックアンドフィールを別々に作成およびカスタマイズすることができます。

Diggアプリケーションの仕上げ

ここまでで、コントロールテンプレートの基本的な動作をいくらかカバーしたので、今回のDiggアプリケーションのUIをもう少し洗練させるためにいくつかの場所に適用してみましょう。

現在アプリケーションには１つ明らかにどうにかしなければ行けない場所があります。ユーザコントロール上の"閉じる"ボタンです。 :

これを修正するのは開発者でも（デザイナでも）簡単にできます。App.xaml ファイルの"CloseButton" スタイルにControlTemplate を追加し、より魅力的な閉じるボタンにするためにいくつかベクター形状を追加します。（注：私より有能なデザイナはマウスオーバーと動画動作をベクター画像形状に追加してより見た目を良くすることもできます。） :

アプリケーションを再度起動させると、ボタンは以下のようになります。 :

アプリケーションでもう少しきれいにすべき2つ目の場所は、ListBoxの外側のUIでしょう。よく見ると、ベータ1のListBoxはデフォルトでネストされた境界線になっています。（注：そのデフォルトスキンはまだ仕上げ中なので、最終リリースでは恐らく変更されます。） :

これを削除して、コントロールテンプレートをカスタマイズすることでListBoxの境界線を平坦にすることができます。以下はこれを行うカスタマイズされたテンプレートでスタイル化されたListBoxです。 :

ListBoxから全て境界線を削除しました。Silverlightで<ScrollViewer>コントロールだけを使用して（その中にあるコンテンツはすべてスクロールできます。）、ListBoxにある実際の項目の描画を行う<ItemsPresenter/> コントロールをそこへ埋め込みます。（これらの項目の描画にパート４で作成した<DataTemplate>を使用します。）

以下ではListに対してより平坦な見た目になっています。 :

すごいのは、これらのルックアンドフィールを変更させるために、アプリケーションでどのコードも変更する必要も、実際のコントロール上のXAMLタグを修正する必要もありません。SilverlightやWPFアプリケーションでの作業は、この様にコードとデザインを分けることで、すばらしい開発者とデザイナのワークフローが可能になります。Expression Blendやその他のExpression Studio製品はこれらのコントロールのデザイン機能をレベルアップさせ、リッチなデザイナツールセットを提供することでカスタマイズを簡単にします。

次の手順

これで、今回のDiggアプリケーションのSilverlightでの実装は完成しました。

最後の手順はこのデスクトップアプリケーションバージョンを実装します。これはそれほど難しいことではありません。SilverlightはすべてWPFや.NET Frameworkのサブセットなので、概念、コード、コンテンツは非常に簡単に移動させることができます。

これは次のチュートリアルで行いましょう。: WPFを使用してデスクトップ版のDiggアプリケーションを作成