ScottGu's blog translated by Chica @ Wankuma

Silverlight チュートリアル パート 4: 上手くルックアンドフィールをカプセル化するためにスタイル要素を使用

  

これは8つのチュートリアルのパート 4で、簡単なDiggクライアントアプリケーションをSilverlight2のベータ1リリースを使用して構築する方法をご紹介します。 このチュートリアルは、順番にご覧頂きながら、Silverlightのプログラム概念のコアな部分をいくらかご説明させていただくことを目的としています。

上手くルックアンドフィールをカプセル化するためにスタイル要素を使用

WPFおよびSilverlightはスタイルのメカニズムをサポートしており、再利用可能なリソースとしてコントロールのプロパティの値をカプセル化できるようになります。これらのスタイルの宣言をページから別ファイルに保存して、アプリケーション内の複数のコントロールやページで(また複数のアプリケーションででも)再利用することができます。これは概念的に基礎的なカスタマイズをHTMLで行うときにCSSを使用するのに概念的に似ています。

注:基本的なプロパティの設定(Color, Font, Size, Marginsなど)を定義するのに加え、WPF およびSilverlight でのスタイルはコントロールテンプレートを定義して再利用するのにも使用することができます。これにより超リッチなスキンとコントロールの構造の適用が可能になります。(現在カスタマイズのサポートはHTMLでのCSSとは可能ではありません。)このシリーズの パート 7 でコントロールテンプレートについてお話します。

このDiggサンプルアプリケーションでは、プロジェクトのApp.xamlファイルでスタイルの宣言を定義します。これはアプリケーションのすべてのページとコントロールで再利用することができます。 :

まずDiggページの<Border>コントロール(およびそこにある<TextBlock>のタイトル)のスタイルをカプセル化していきましょう。 :

App.xamlファイル内に2つのスタイル要素を作成して、前にインラインで以下のタグを使用して宣言した<Border> および <TextBlock>設定をカプセル化します。 :

上記ではユニークな"キー"が各スタイルに与えられていることが確認できます。そこで、<Border> および<TextBlock>コントロールをそれらのキーを使用 使用してスタイルを参照するように更新します。"タグの拡張"と呼ばれるXAMLの機能を使用してこれを行います。タグの拡張はリテラル値以外を設定したい場合(またはデータバインド式を使用する場合など)に使用します。

Page.xamlファイルで他のコントロールもスタイルを使用するために更新した場合、 ファイルは以下のようになります。 :

この様にスタイルの設定をカプセル化すると、開発者はアプリケーションの動作セマンティックスにより集中できるようになり、また他でビルドしたコントロールやページでもスタイルを再利用することができます。

注:ベータ1でお気をつけ頂きたい事は、宣言が明確でないスタイル名やプロパティを入力ミスした時のエラーメッセージです。(これによりエクセプションが発生しますが、何が正確に設定されていないかについては知らされません。)これは、ベータ2で改善されます。それまでの間、もしスタイルのロードでエラーを発見したら、タイプミスがないかどうかをよくご確認ください。

次の手順

スタイルの参照を使用してPage.xaml ファイルのタグがきれいになったところで、次に進んで、記事データの外観をもう少しカスタマイズしましょう。

これは次のチュートリアルで行いましょう。: ListBoxの使用と一覧データの表示へのデータバインディング

ScottGu's blog translated by Chica @ Wankuma 

※本翻訳に関しまして、Scottさんにはご了承頂いております。