App.XamlとMainPage.Xaml (3/5)

続いて、もう１つのMainPage.Xamlについてです。これが、実際にアプリケーションを起動した時に表示される画面（ページ）となります。

MainPage.Xamlを開くと、以下のようなソースコードが記述されているのがわかります。また、これはApp.Xamlと違って、ビジュアルなGUIのデザイン画面が表示されます。App.XamlはGUIではありませんが、こちらはGUIのデータですので、Visual Studioに内蔵の専用デザイナでビジュアルに編集できるのです。

ここで記述されている内容は、整理すると以下のようになっていることがわかります。

<Page>
    <Grid>
    </Grid>
</Page>

<Page>タグの中に、<Grid>というタグが組み込まれた形になっていますね。これがページの土台となるものです。

<Page>タグ――ページのベースとなるものです。この中に、実際に画面に表示されるGUI部品を配置していきます。

<Grid>タグ――縦横に部品を整列配置するためのものです。これ自体は画面に何か表示されるわけではありません。この中に組み込まれた部品が整列表示されます。

<Grid>には、Backgroundという属性が用意されています。これによりアプリケーションのテーマの背景に設定されている色が背景として設定されます。

この<Grid>タグの中に部品を配置することで、GUIをデザインしていく――これがMainPage.Xamlの役割なのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<Page
    x:Class="MyWin8App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWin8App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>