SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight入門

Silverlight入門(1)-XAMLの文法

Silverlightの概要とXAML


XAMLの構文

 XAMLは図形や画像を描画する言語ではありません。XAMLの役割は、オブジェクトの構造を静的に宣言することです。すなわち「楕円を描きなさい」ではなく「楕円型の物体を作りなさい」と指示するものがXAMLであると考えてください。

 Silverlightの役割は、XAMLによって宣言されたオブジェクトの構造に従って適切なオブジェクトを生成し、保持することです。サンプル 01のコードの場合、SilverlightはXAMLファイルに書かれているEllipse要素に従ってEllipseオブジェクトを生成します。画面に表示された赤い楕円は、生成されたEllipseオブジェクトそのものとなります。

 XAMLにおける要素の名前は、生成するオブジェクトの型を表しています。例えばEllipse要素の場合は楕円形のEllipseオブジェクトを、Line要素の場合は線のLineオブジェクトを表すことになります。

<オブジェクト名></オブジェクト名>

 このように、要素名が直接オブジェクトの種類に対応しています。当然、オブジェクトはSilverlightによってサポートされているものでなければなりません。Silverlightで利用できるオブジェクトの種類については「Silverlight Reference」のObjectsが参考になります。

 XAMLの属性は、オブジェクトのプロパティに対応しています。プロパティとは、オブジェクトの性質を表す情報のことで、幅や高さ、色、透明度などがあります。属性が指定されている場合、生成されるオブジェクトは指定された属性に対応するプロパティを属性の値で初期化します。属性が指定されていないプロパティは、定められている初期値が与えられます。

<オブジェクト名 プロパティ名="プロパティ値" ...></オブジェクト名>

 例えばEllipseオブジェクトには、幅を表すWidthプロパティや、高さを表すHeightプロパティが存在し、これをXAMLから設定するにはEllipse要素に対してWidth属性、Height属性を指定することになります。

<Ellipse Width="400" Height="300" ... />

 Ellipseオブジェクトは、この他にも多くのプロパティを持ちます。視覚的な演出の多くは、プロパティを設定することで変更できるでしょう。Ellipseオブジェクトの詳細は「Ellipse Object」をご覧ください。

 要素と属性を用いたオブジェクトの宣言はXAMLの最も基本的な書き方です。サンプル 01のEllipse要素を見てください。XAMLの要素でEllipseオブジェクトを宣言すると同時に、属性からプロパティを初期化しています。

プロパティ要素

 より複雑なプロパティをXAMLから宣言するために、プロパティ要素と呼ばれる構文がサポートされています。プロパティ要素は、プロパティの初期化に属性ではなく子要素を用いる方法です。プロパティ要素は、非プリミティブな型のプロパティを初期化するために用いられます。

 プロパティ要素は、プロパティを設定する要素の子要素として次のように指定します。

<オブジェクト名>
 <オブジェクト名.プロパティ名>プロパティ値</オブジェクト名.プロパティ名>
</オブジェクト名>

 プロパティ要素に指定するプロパティ値は、何らかのオブジェクトを子要素として指定します。オブジェクトとして表現される値は、数値や文字列だけで表すことができない複雑な構造をもつ値です。例えば、楕円の内部をグラデーションや画像、ビデオなどで塗りつぶしたい場合に用いられます。

サンプル 02「test.xaml」
<Ellipse  xmlns="http://schemas.microsoft.com/client/2007"
Width="300" Height="200"
>
<Ellipse.Fill><ImageBrush ImageSource="test.png"/></Ellipse.Fill> </Ellipse>

 サンプル 02では、EllipseオブジェクトのFillプロパティを設定するためにプロパティ要素を用いています。このとき、FillプロパティをEllipse要素の子要素Ellipse.Fillとして宣言していることに注目してください。

 Ellipse.Fill要素は、プロパティの値をImageBrush子要素で指定しています。このImageBrush子要素は、FillプロパティにImageBrushオブジェクトを指定することを表しています。ImageBrushImageSource属性に設定されているURIの画像で内部を塗りつぶします。

 Siliverlightでは、このように図形の内部を塗りつぶす方法を抽象化しているため、単色、グラデーション、画像、ビデオなど、さまざまな方法で塗りつぶします。単色で塗りつぶす場合は色の名前をFill属性に指定するだけで可能でしたが、複雑な方法で塗りつぶす場合はプロパティ要素が必要になります。

コンテンツ要素によるプロパティの設定

 一部のオブジェクトのプロパティは、属性や子要素ではなくコンテンツ要素から直接設定することができます。この場合、プロパティ名を省略して簡単にプロパティの値を設定することができます。

 代表的なプロパティの設定は、オブジェクトの設定にテキストが使われている場合です。例えばSilverlightアプリケーションでテキストを表示する主要な方法はTextBlockオブジェクトを使うことです。テキストを表示するには、このオブジェクトのプロパティに表示するテキストを表す文字列を指定しなければなりませんが、TextBlockはコンテンツ要素によるプロパティの設定をサポートしています。

サンプル 03「test.xaml」
<TextBlock xmlns="http://schemas.microsoft.com/client/2007">
 Silverlight!
</TextBlock>

 サンプル 03は、TextBlockオブジェクトを用いて文字列を表示する例です。TextBlockで表示する文字列の設定には、属性やプロパティ要素ではなく、コンテンツ要素を用いています。実行すると、コンテンツ要素に指定した文字列がTextBlockオブジェクト上に表示されることを確認できます。

 実際には、TextBlockオブジェクトには表示するテキストを表すTextプロパティが用意されています。そのため、以下のようにTextBlock要素のText属性から設定することも可能です。

<TextBlock Text="Silverlight!" ... />

 しかし、コンテンツ要素を用いた方が長文のテキストを扱いやすく、直観的でもあります。

次のページ
コレクション

この記事は参考になりましたか?

Silverlight入門連載記事一覧

もっと読む

この記事の著者

赤坂 玲音(アカサカ レオン)

平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。プログラミング入門サイト WisdomSoft の管理人。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/1836 2008/08/20 10:44

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー