実際に使えるアプリを作りながら、Windowsストア・アプリ開発に必要な基礎知識を学ぼう。前後編に分けて紹介。前編ではXAMLの基礎を解説。
powered by Insider.NET
第1回ではWindowsストア・アプリの特徴を学び、前回で開発環境を整えてWindowsストア・アプリをビルドしてデバッグ実行できるようになった。今回からは、実際に使えるアプリを作りながら、Windowsストア・アプリ開発に必要な知識を学んでいこう。
今回はちょっと話が長くなるので、前後編に分けさせていただく。前編で「XAML」(「ザムル」と読む)の基礎知識を説明し、後編ではその知識を使ってアプリのメインとなる画面などを作成する。
XAML(Extensible Application Markup Language)とは、アプリの画面を定義するために作られた言語で、XMLの一種である。従って、厳密な理解のためにはXMLの知識を習得したうえでXAMLを学ばねばならないのだが、ここでは、Windowsストア・アプリの画面を作るのに必要な実用的な解説だけを行う*1。
*1 より詳しく学ぶには、XMLについてはすでに多くの書籍が出ているし、JIS規格にもなっている。XAMLについては、MSDNの「XAML の概要」を起点にするとよいだろう。なお、XAMLはWPFやSilverlightで使われてきた技術なので、調べていくうちにそれらの文献にもたどり着くことがある。細かいところではWindowsストア・アプリ用のXAMLと異なることもあるので、実際に動かしてその動作を確かめるのを忘れないでほしい。
例えば、次のXAMLの要素は、TextBlockコントロール(Windows.UI.Xaml.Controls名前空間)の1つのオブジェクトを表している。
<TextBlock Text="Hello, world!" />
XAMLの記法として、次のように書いても、上と全く同じ意味だ。
<TextBlock Text="Hello, world!"></TextBlock>
ここで「<TextBlock Text="Hello, world!">」の部分を「開始タグ」と呼び、「</TextBlock>」を「終了タグ」という。XMLのルールで、開始タグと終了タグの間に何もないときには、最初の例のように「<TextBlock Text="Hello, world!" />」と1つに合体させて書くことができ、これをXML用語では「空要素タグ」(マイクロソフト用語では「自己終了タグ」)と呼ぶ。
開始タグ(および空要素タグ)には1つの名前と0個以上の属性指定を記述する。
<TextBlock Text="Hello, world!" />
上の例で「TextBlock」が要素の名前で、「Text="Hello, world!"」が属性指定だ。属性指定のうち、「Text」の部分を属性名といい、「Hello, world!」の部分を属性値と呼ぶ。要素の名前と属性指定、および属性指定と属性指定の間には空白文字(改行でも可)を1文字以上入れる必要がある。
XAMLでは、属性はオブジェクトのプロパティを表す。上の例では、TextBlockコントロールのTextプロパティに「Hello, world!」という文字列を設定していることになる。このXAML要素は、次のC#のコードと等価である。
new Windows.UI.Xaml.Controls.TextBlock(){
Text = "Hello, world!",
};
コントロールのプロパティには文字列以外のものもある。例えば、TextBlockコントロールのForegroundプロパティはBrushオブジェクト(Windows.UI.Xaml.Media名前空間)しか受け付けないので、次のC#のコードはコンパイル・エラーになる。
new Windows.UI.Xaml.Controls.TextBlock(){
Foreground = "White", // コンパイル・エラー
};
ところが、XAMLで記述した場合は、Windowsストア・アプリのランタイムが文字列からBrushオブジェクトへと、自動的に変換してくれる。そのため、次のように記述できるのだ。
<TextBlock Foreground="White" />
ほかにも、日付型やbool型、あるいはThicknessオブジェクト(Windows.UI.Xaml名前空間)など、多くのものが文字列から自動変換される。何が自動変換されるかは、実際に試してみるのが手っ取り早い。
また、XAMLの属性値では、中カッコ(「{」と「}」)が「XAMLマークアップ拡張」と解釈される。これは、データ・バインディング(第5回で説明予定)やリソース指定(後編で説明予定)に使用される。次にリソース指定の例を示しておく。
<TextBlock Text="{StaticResource AppName}" />
なお、属性値の中で文字として左中カッコ「{」を使いたい場合は、「{}{」と記述する。
Copyright© Digital Advantage Corp. All Rights Reserved.