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

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

ページの構造

　以上で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>

「Hello, world!」の画面定義（XAML）

　通常の画面は、上のように<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>

「Hello, world!」にTextBlockコントロールをもう1つ追加した（XAML）

　実行してみると、次の画像のようになる。後ろに定義したテキストブロックが、確かに手前に表示されている。

「Hello, world!」にTextBlockコントロールをもう1つ追加した（実行結果）