第3回 画面は「XAML」で作る(前編):連載:Windowsストア・アプリ開発入門(4/5 ページ)
実際に使えるアプリを作りながら、Windowsストア・アプリ開発に必要な基礎知識を学ぼう。前後編に分けて紹介。前編ではXAMLの基礎を解説。
ページの構造
以上でXAMLの基礎的な知識が得られた。そのほかXAMLで画面を記述する際に必要になる情報をいくつか記載しておく。
まず、XAMLで記述するページの全体の構造を見ておこう。前回の「Hello, world!」アプリの画面定義を次に再掲する。
<Page
x:Class="HelloWorld.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#00a2e8">
<TextBlock Text="Hello, world!"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White" FontFamily="Meiryo UI" FontSize="150" />
</Grid>
</Page>
通常の画面は、上のように<Page>要素(=Windows.UI.Xaml.Controls名前空間のPageコントロール)を親要素とし、そのコンテンツに<Grid>要素(=Windows.UI.Xaml.Controls名前空間のGridコントロール)を1つだけ置く。そして上の例では、<Grid>要素のコンテンツとしては<TextBlock>要素(=Windows.UI.Xaml.Controls名前空間のTextBlockコントロール)を1つしか配置していないが、通常はここに複数のコントロールを配置していく。
上のXAMLコードでは、<Page>開始タグに前述の「x」と「d」のほかにいくつかのXML名前空間が宣言されている。その中で「local」は、そのプロジェクト内のオブジェクトを利用するためのXML名前宣言だ。また「mc」は、「d」プレフィックスを実行時に無視するために使われている。
なお、ユーザー・コントロールでは、最上位の親要素として<Page>ではなく<UserControl>要素(=Windows.UI.Xaml.Controls名前空間のUserControlコントロール)を用いる。
Zオーダー
Zオーダーとは、画面の(仮想的な)奥行き方向の前後関係である。Zオーダーが「奥」にあるオブジェクトは、「手前」にあるオブジェクトに隠される。
XAMLでの記述順がそのままZオーダーになる。後ろに記述した要素が手前に来るのだ。例えば、前述の「Hello, world!」の画面定義に、もう1つTextBlockコントロールを重なるように追加してみよう。
<Page
x:Class="HelloWorld.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#00a2e8">
<TextBlock Text="Hello, world!"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White" FontFamily="Meiryo UI" FontSize="150" />
<TextBlock Text="追加したテキスト"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="DarkRed" FontFamily="Meiryo UI" FontSize="150" />
</Grid>
</Page>
実行してみると、次の画像のようになる。後ろに定義したテキストブロックが、確かに手前に表示されている。
Copyright© Digital Advantage Corp. All Rights Reserved.