第3回 画面は「XAML」で作る(前編)連載:Windowsストア・アプリ開発入門(1/5 ページ)

実際に使えるアプリを作りながら、Windowsストア・アプリ開発に必要な基礎知識を学ぼう。前後編に分けて紹介。前編ではXAMLの基礎を解説。

» 2013年10月03日 15時14分 公開
連載:Windowsストア・アプリ開発入門
業務アプリInsider/Insider.NET

powered by Insider.NET

「連載:Windowsストア・アプリ開発入門」のインデックス

連載目次

 第1回ではWindowsストア・アプリの特徴を学び、前回で開発環境を整えてWindowsストア・アプリをビルドしてデバッグ実行できるようになった。今回からは、実際に使えるアプリを作りながら、Windowsストア・アプリ開発に必要な知識を学んでいこう。

 今回はちょっと話が長くなるので、前後編に分けさせていただく。前編で「XAML」(「ザムル」と読む)の基礎知識を説明し、後編ではその知識を使ってアプリのメインとなる画面などを作成する。

XAMLの基礎

 XAML(Extensible Application Markup Language)とは、アプリの画面を定義するために作られた言語で、XMLの一種である。従って、厳密な理解のためにはXMLの知識を習得したうえでXAMLを学ばねばならないのだが、ここでは、Windowsストア・アプリの画面を作るのに必要な実用的な解説だけを行う*1

*1 より詳しく学ぶには、XMLについてはすでに多くの書籍が出ているし、JIS規格にもなっている。XAMLについては、MSDNの「XAML の概要」を起点にするとよいだろう。なお、XAMLはWPFやSilverlightで使われてきた技術なので、調べていくうちにそれらの文献にもたどり着くことがある。細かいところではWindowsストア・アプリ用のXAMLと異なることもあるので、実際に動かしてその動作を確かめるのを忘れないでほしい。


XAMLの要素はオブジェクトを表す

 例えば、次のXAMLの要素は、TextBlockコントロール(Windows.UI.Xaml.Controls名前空間)の1つのオブジェクトを表している。

<TextBlock Text="Hello, world!" />

XAMLの要素の例(XAML)

 XAMLの記法として、次のように書いても、上と全く同じ意味だ。

<TextBlock Text="Hello, world!"></TextBlock>

XAMLの要素の例(XAML)
前の例と全く同じ意味である。

 ここで「<TextBlock Text="Hello, world!">」の部分を「開始タグ」と呼び、「</TextBlock>」を「終了タグ」という。XMLのルールで、開始タグと終了タグの間に何もないときには、最初の例のように「<TextBlock Text="Hello, world!" />」と1つに合体させて書くことができ、これをXML用語では「空要素タグ」(マイクロソフト用語では「自己終了タグ」)と呼ぶ。

XAMLの属性はプロパティを表す

 開始タグ(および空要素タグ)には1つの名前と0個以上の属性指定を記述する。

<TextBlock Text="Hello, world!" />

XAMLの要素の例(XAML)(再掲)

 上の例で「TextBlock」が要素の名前で、「Text="Hello, world!"」が属性指定だ。属性指定のうち、「Text」の部分を属性名といい、「Hello, world!」の部分を属性値と呼ぶ。要素の名前と属性指定、および属性指定と属性指定の間には空白文字(改行でも可)を1文字以上入れる必要がある。

 XAMLでは、属性はオブジェクトのプロパティを表す。上の例では、TextBlockコントロールのTextプロパティに「Hello, world!」という文字列を設定していることになる。このXAML要素は、次のC#のコードと等価である。

new Windows.UI.Xaml.Controls.TextBlock(){
  Text = "Hello, world!",
};

前述のXAML要素と等価なコード(C#)
ただし、生成したオブジェクトを変数に代入していないので、コンパイルはできない。

XAMLの属性値の特殊機能

 コントロールのプロパティには文字列以外のものもある。例えば、TextBlockコントロールのForegroundプロパティはBrushオブジェクト(Windows.UI.Xaml.Media名前空間)しか受け付けないので、次のC#のコードはコンパイル・エラーになる。

new Windows.UI.Xaml.Controls.TextBlock(){
  Foreground = "White", // コンパイル・エラー
};

Foregroundプロパティに文字列をセットするコード(C#)(誤り)

 ところが、XAMLで記述した場合は、Windowsストア・アプリのランタイムが文字列からBrushオブジェクトへと、自動的に変換してくれる。そのため、次のように記述できるのだ。

<TextBlock Foreground="White" />

Foreground属性を指定する例(XAML)
文字列からBrushオブジェクトに自動的に変換される。

 ほかにも、日付型やbool型、あるいはThicknessオブジェクト(Windows.UI.Xaml名前空間)など、多くのものが文字列から自動変換される。何が自動変換されるかは、実際に試してみるのが手っ取り早い。

 また、XAMLの属性値では、中カッコ(「{」と「}」)が「XAMLマークアップ拡張」と解釈される。これは、データ・バインディング(第5回で説明予定)やリソース指定(後編で説明予定)に使用される。次にリソース指定の例を示しておく。

<TextBlock Text="{StaticResource AppName}" />

XAMLマークアップ拡張の例(XAML)
この属性値は、別の場所で「AppName」という名前で定義されている値になる。

 なお、属性値の中で文字として左中カッコ「{」を使いたい場合は、「{}{」と記述する。

       1|2|3|4|5 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。