back

プロジェクトの中身を調べよう (2/6)

■MainPage.xamlについて

では、順番にソースコードをチェックしていくことにしましょう。まずは、アプリ作成においてもっとも重要な部品となる「MainPage」からです。

MainPageは、アプリ起動時に最初に画面に表示されるページを定義するためのものです。この表示内容については「MainPage.xaml」ファイルに記述されています。下のリスト欄に、MainPage.xamlにデフォルトで書きだされている内容を掲載しておきました。

xamlファイルは、見ればわかるようにXMLデータです。これはざっと以下のような形をしています。
<phone:PhoneApplicationPage>
    ……表示する内容を示すタグ……
</phone:PhoneApplicationPage>
<phone:PhoneApplicationPage>にはさまざまな属性が指定されています。xmlns～というものは、このXMLデータの記述に関する指定で、これは必ずこのように書きます。その後にある属性は、デフォルトの表示や設定に関するものです。

このタグ内には、実際に表示するコントロール類のタグが記述されます。ここでは、以下のようなタグが用いられています。

<Grid>タグ
これは、「グリッドレイアウト」というものを配置するタグです。これはグリッド（格子）状にコントールを配置していくためのもので、Windows Phoneのページの基本レイアウトとなっています。たいていは、この<Grid>タグ内にコントロール類が記述されることになるでしょう。

<Grid.RowDefinitions>
<RowDefinition>
これらは、グリッドレイアウト内に「行」の配置を用意するためのものです。要するに、縦に幾つかの表示エリアを分割するための定義をするものと考えて下さい。<Grid.RowDefinitions>が、行定義のためのタグです。その中にある<RowDefinition>というのが、それぞれの「行」の定義です。

ここでは、<Grid.RowDefinitions>の中に、２つの<RowDefinition>を用意しておきました。これにより、上下２つの領域が設定されることになります。このあとに用意するタグ（ここでは<Grid>と<StackPanel>というもの）が、ここで定義したそれぞれの<RowDefinition>の領域内にはめ込まれ表示されることになるわけです。つまり、
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition ① />
        <RowDefinition ② />
    </Grid.RowDefinitions>
    <…①にはめ込まれる内容… />
    <…②にはめ込まれる内容… />
</Grid>
こういうことです。<Grid.RowDefinitions>のあとに続くタグの表示が、<RowDefinition>タグにはめ込まれるわけですね。――ここでは、<RowDefinition>にはheightという属性が用意してあります。これは高さの設定で、"auto"だと配置したコントロールにあわせて自動調整され、"*"だと残りのエリアに合うように調整されます。

<StackPanel>
これは、コントロールを一列に並べて配置するためのものです。いくつかのコントロールを縦や横に並べて配置するに便利です。このタグには、Grid.Row="0"という属性がありますね。これは、その前の<Grid>タグの<RowDefinition>のゼロ番（つまり一番最初のもの）に設定することを示すものです。

<TextBlock>
テキストを表示するためのコントロールです。Styleという属性で、表示するフォントやスタイルなどを設定することができます。

――ざっと並べましたが、ここでは<Grid>タグによるレイアウトと、<TextBlock>によるテキストの表示などがわかればとりあえず十分でしょう。細かな使い方はいずれ改めて触れることもあるでしょうから、今はあんまり深く考えないでおきましょう。


(by. SYODA-Tuyano.)

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

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

・MainPage.xamlのソースコード

<phone:PhoneApplicationPage 
	x:Class="PhoneApp1.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
					Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
					Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
	</Grid>
 
</phone:PhoneApplicationPage>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.