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

» 2013年10月03日 15時14分 公開
[山本康彦(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つ追加した(実行結果) 「Hello, world!」にTextBlockコントロールをもう1つ追加した(実行結果)

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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