特集：Silverlight 2アプリを開発しよう！（後編） 無償環境でSilverlight 2アプリの開発を始めよう！ シグマコンサルティング　菅原 英治 2009/01/07
Page1 Page2 Page3 Page4

■画面のレイアウト方法を押さえよう

　次に、Silverlight 2アプリの画面のレイアウト方法について解説します。

　Silverlight 2では、5つのレイアウト用のコントロールが用意されています。レイアウト用のコントロールは、Silverlight 2アプリの開発時の最も基本となるコントロールです。その特徴をしっかり押さえましょう。

　5つのレイアウト用のコントロールについて、次の表にまとめます。

名前	子要素数	説明
Grid	制限なし	行と列で子要素を整列する
Canvas	制限なし	絶対的なX、Y座標で子要素を配置する。またZ方向の重なりも表現できる
StackPanel	制限なし	水平または垂直方向に、子要素を一列に整列する
Border	1つまで	子要素の周囲に枠線、背景を描画する
ScrollViewer	1つまで	子要素をスクロールできるようにする
Silverlight 2で利用可能なレイアウト用のコントロール

　この表の5つのコントロールは、そのコントロール内に入れ子にできる子要素の数で大きく2つのグループに分かれます。第1に子要素数に制限がない「Grid」、「Canvas」、「StackPanel」の3つと、第2に子要素を1つしか持てない「Border」、「ScrollViewer」の2つです。

　特に子要素数の制限がない「Grid」、「Canvas」、「StackPanel」の3つは、画面レイアウト時の最も基本となる重要なコントロールです。そこで、それぞれのコントロールについて簡単なサンプルを作成し、レイアウトについて理解を深めましょう。

●Gridコントロールを利用してみよう

　まずは、Gridコントロール（＝<Grid>要素。以下、単に「Grid」と表記）を利用してみましょう。先ほど「hello, world」を表示させたアプリをそのまま利用します。

　Page.xamlファイルを編集し、次の太字で示されたコードを入力してください。コード内でTextBlockコントロールのFontSizeプロパティ（＝文字の大きさ）を「100」に指定しているのは、実行画面を見やすくするためです。

<UserControl ……略……>   <Grid x:Name="LayoutRoot" Background="White">     <TextBlock FontSize="100">1</TextBlock>     <TextBlock FontSize="100">2</TextBlock>     <TextBlock FontSize="100">3</TextBlock>     <TextBlock FontSize="100">4</TextBlock>   </Grid> </UserControl>

TextBlockコントロールを4つ追加するXAMLコード（Page.xaml）

見やすくするため、<TextBlock>タグのFontSize属性に「100」を指定している。

　コードの入力後、プレビューを見ると、下図のように「1」〜「4」までの数字が、重なり合ってしまっていることが確認できます。

Gridに4つのTextBlockコントロールを追加した後のプレビュー

上記のコードを入力後、プレビューしたところ。

「TextBlock」の「1」〜「4」の数字が重なり合ってしまっている。

　この重なり合ってしまっている4つのTextBlockコントロールを、Gridのレイアウト機能を使って、2行2列の表に整列します。Page.xamlファイルを、次のように編集してください。

<UserControl ……略……>   <Grid x:Name="LayoutRoot" Background="White">     <!--行の定義-->     <Grid.RowDefinitions>       <RowDefinition></RowDefinition>       <RowDefinition></RowDefinition>     </Grid.RowDefinitions>     <!--列の定義-->     <Grid.ColumnDefinitions>       <ColumnDefinition></ColumnDefinition>       <ColumnDefinition></ColumnDefinition>     </Grid.ColumnDefinitions>     <TextBlock FontSize="100" Grid.Row="0" Grid.Column="0">1</TextBlock>     <TextBlock FontSize="100" Grid.Row="0" Grid.Column="1">2</TextBlock>     <TextBlock FontSize="100" Grid.Row="1" Grid.Column="0">3</TextBlock>     <TextBlock FontSize="100" Grid.Row="1" Grid.Column="1">4</TextBlock>   </Grid> </UserControl>

4つのTextBlockコントロールを2行2列に整列するXAMLコード（Page.xaml）

　するとどうでしょう。次の画面を見てください。先ほど重なり合っていた4つのTextBlockコントロールが、（プレビュー上で）見事に2行2列に整列されることが確認できます。

Grid内で2行2列に整列した後の4つTextBlockコントロールのプレビュー

　さて、このGrid内の子要素を整列させるコードについて簡単に説明します。まず整列させる子要素を持つGrid内に、<Grid.RowDefinitions>要素と<Grid.ColumnDefinitions>要素が定義されています。

　<Grid.RowDefinitions>要素を定義し、その中に<RowDefinition>要素を2つ定義することで、このGridが2行であることを表しています。同様に<Grid.ColumnDefinitions>要素内に<ColumnDefinition>要素を2つ定義することで、このGridが2列であることを表しています

　続いて、「1」〜「4」の各TextBlockコントロールのGrid.RowプロパティとGrid.Columnプロパティに行と列の位置番号を設定しています。行は上から、列は左から、それぞれ0番目から数えます。従って左上の「1」のTextBlockコントロールが0行0列目となり、右下の「4」のTextBlockコントロールは1行1列目となります。

　ところで、子要素のTextBlockコントロール側で、Grid.RowプロパティやGrid.Columnプロパティを指定することに、何となく違和感を覚えませんでしたでしょうか。これらは「添付プロパティ」と呼ばれるもので、Silverlight（正確にはWPF）特有のものです。本稿では詳細な解説は行いませんが、ご興味のある方は次のMSDNをご参照ください。

• MSDN：添付プロパティの概要

　Gridの解説は以上です。

●Canvasコントロールを利用してみよう

　続いて、Canvasコントロール（＝<Canvas>要素。以下、単に「Canvas」と表記）を利用してみましょう。Page.xamlファイルを編集し、次の太字で示されたコードを入力してください。

<UserControl ……略……>   <Canvas Background="White">     <TextBlock FontSize="100" Foreground="Red">1</TextBlock>     <TextBlock FontSize="100" Foreground="Green">2</TextBlock>     <TextBlock FontSize="100" Foreground="Blue">3</TextBlock>     <TextBlock FontSize="100" Foreground="Gray">4</TextBlock>   </Canvas> </UserControl>

Canvasに4つのTextBlockコントロールを追加するXAMLコード（Page.xaml）

重なり合わせの順番がよく分かるように、TextBlockコントロールのForegroundプロパティで文字色を指定している。

　次の画面を見てください。Gridのときと同様、4つのTextBlockコントロールは重なり合ってしまいます。今回は重なり合わせの順番がよく分かるように、文字に色を付けてみました。灰色の「4」のTextBlockコントロールが一番手前にあることを覚えておいてください。

Canvasに4つのTextBlockコントロールを追加した後のプレビュー

　この重なり合ってしまっている4つのTextBlockコントロールを、Canvasのレイアウト機能を使って位置を変更します。Page.xamlファイルを、次のように太字で示されたコードのように変更してください。

<UserControl ……略……>   <Canvas Background="White">     <TextBlock FontSize="100" Foreground="Red" Canvas.ZIndex="1">1</TextBlock>     <TextBlock FontSize="100" Foreground="Green" Canvas.Left="100">2</TextBlock>     <TextBlock FontSize="100" Foreground="Blue" Canvas.Top="100">3</TextBlock>     <TextBlock FontSize="100" Foreground="Gray">4</TextBlock>   </Canvas> </UserControl>

4つのTextBlockコントロールの位置を変更するXAMLコード（Page.xaml）

　今度はどうでしょう。次の画面を見てください。先ほど重なり合っていた4つのTextBlockコントロールの位置が変更されることが確認できます。また、位置だけではなく「1」と「4」のTextBlockコントロールの奥行きの関係にもご注目ください。先ほど一番手前にあった「4」が、「1」の背後となっています。

4つのTextBlockコントロールの位置の移動後のプレビュー

　では、Canvas内の子要素の位置を移動させるコードを簡単に説明しましょう。

　Canvas.LeftプロパティとCanvas.Topプロパティは、左上を原点とした絶対的なX、Y座標により、その子要素の位置を指定します。Y方向は、下向きが正の方向なので注意が必要です。TextBlockコントロールの「2」と「3」は、それぞれのプロパティを指定したので、その位置に移動しました。

　Canvas.ZIndexプロパティは、Zオーダーを指定します。原点が0で、奥に行くほど負の値、手前に来るほど正の値が大きくなります。TextBlockコントロールの「1」のCanvas.ZIndexプロパティは「1」で、TextBlockコントロールの「4」は既定値の0なので、「1」のTextBlockコントロールは「4」より手前に表示されることになりました。

　Canvasの解説は以上です。

●StackPanelコントロールを利用してみよう

　レイアウトの最後として、StackPanelコントロール（＝<StackPanel>要素。以下、単に「StackPanel」と表記）を利用してみましょう。Page.xamlファイルを編集し、次の太字で示されたコードを入力してください。

<UserControl ……略……>   <StackPanel Background="White" Orientation="Vertical" >     <TextBlock FontSize="50" Foreground="Red">1</TextBlock>     <TextBlock FontSize="50" Foreground="Green">2</TextBlock>     <TextBlock FontSize="50" Foreground="Blue">3</TextBlock>     <TextBlock FontSize="50" Foreground="Gray">4</TextBlock>   </StackPanel> </UserControl>

StackPanelに4つのTextBlockコントロールを追加するXAMLコード（Page.xaml）

　次の画面を見てください。今回はGridやCanvasと異なり、4つのTextBlockコントロールが重なり合っていません。StackPanelはこのように子要素側で特に指定しなくても整列できます。

StackPanelに4つのTextBlockコントロールを追加した後のプレビュー

　StackPanel整列する方向は、StackPanel自体のOrientationプロパティで指定できます。既定では、「Vertical」（＝垂直方向）が指定されています。また、「Horizontal」（＝水平方向）を指定すると、下の画面のように整列されます。

StackPanelのOrientationプロパティを「Horizontal」に設定したプレビュー

　Silverlight 2アプリの画面のレイアウト方法は以上です。Grid、Canvas、StackPanelの利用方法についてご理解いただけたでしょうか。

　最後に、イベントの制御について解説します。

INDEX
	特集：Silverlight 2アプリを開発しよう！（前編）
	ついに登場！ Silverlight 2正式版。その概要を押さえよう！
	1．Silverlight 2アプリケーションを動かしてみよう
	2．Silverlight 2の特徴を押さえよう
	3．Silverlight 2の仕組みと開発方法を理解しよう
	特集：Silverlight 2アプリを開発しよう！（後編）
	無償環境でSilverlight 2アプリの開発を始めよう！
	1．Silverlight 2開発環境を作ろう
	2．hello, worldを表示しよう
	3．画面のレイアウト方法を押さえよう
	4．イベントを制御しよう

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）