連載インデックスへ

Silverlight 2で.NET技術をカッコよく使おう（2）

無料Visual Studioで始めるSilverlight 2超入門

インフラジスティックス・ジャパン株式会社
テクニカルエバンジェリスト／デベロッパーサポートエンジニア
山田 達也
2009/1/15

初めてでも分かるXAMLの中身

　WebアプリケーションではHTMLファイル、WinFormsならフォームといったように、開発プラットフォームごとにUIを構成する要素は異なりますが、SilverlightではXMLベースのXAML（ザムル）によってすべての画面要素が定義されます。

　XAMLは、eXtensible Application Markup Languageの頭文字を取ったもので、同じマークアップ言語のHTMLと同じように、画面上のすべてのオブジェクトはタグの組み合わせによって表現されます。XAMLについての詳細は、特集「Silverlightは次世代のJavaScriptフレームワーク？」の「XAMLって何ざむるか？」をご覧ください。

　では、先ほど修正したPage.xamlの中身をもう一度見ていきましょう。以下のタグは、.NETでは「コントロール」（要素）と呼ばれていて、Silverlightの1.0では使えませんでしたが、2から使えるようになりました。

■ Silverlightの基本的な“単位”、<UserControl>タグ

<UserControl x:Class="MyFirstSLApp.Page"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   Width="400" Height="300"> ……【省略】…… </UserControl>

　まず<UserControl>タグが出てきましたが、Silverlightでは画面の単位として、さまざまな場面でユーザーコントロール（<UserControl>タグ）を使います。このPage.xamlのようにページ全体の記述にも使いますし、特定のUIのかたまりを共通部品として切り出したい際にも使います。

　このタグの中で、クラス名（MyFirstSLApp.Page）やXAMLの中で必要なネームスペース（名前空間）の設定、Silverlightが表現する画面のサイズ（400×300）を定義しています。

■ レイアウトコンテナの例、<Grid>タグ

<Grid x:Name="LayoutRoot" Background="White"> ……【省略】……   </Grid>

　次に登場するのが<Grid>タグです。XAMLでは、画面上のすべてのオブジェクトは階層的に管理されるため、最上位のオブジェクトは必ず1つです。この<Grid>タグが、Page.xaml全体のレイアウトを握っています。レイアウトの表し方はほかにもあり、まとめて後述します。この中に、先ほど追加した<TextBox>タグがあります。

■ UI部品の例、<TextBox>タグ

<TextBox Text="Hello World!" Foreground="Blue"       Background="Yellow" />

　ここで指定しているのは、テキストと前景色（Foreground="Blue"）、背景色（Background="Yellow"）の設定だけです。特にサイズを指定していないため、このTextBoxの背景色が画面全体に適用されました。TextBoxにサイズの設定を加えると、表示は以下のように変わります。

図13　<TextBox>タグにサイズを指定

　TextBox以外にもSilverlight 2にはさまざまなUI部品があります。ほかのUI部品については後述しますが、いろいろと試してみてください。

Silverlight 2で使用可能な3種類のコンテナ

　このように、XAMLの世界では、コンテナとなる親オブジェクトによって、子のレイアウトが決定されます。Silverlightで使用可能なコンテナは以下の3種類です（下記リストは、インデックスになっています）。

1. <Canvas>タグ
   最も単純なコンテナ。指定された位置どおりに子の位置が決定される
2. <StackPanel>タグ
   積み重ね式のコンテナ。垂直または水平方向に順番に配置される
3. <Grid>タグ
   列と行の定義に従って子を配置可能なコンテナ。HTMLにおける<table>タグと同じ役割

　それぞれのコンテナの使用例を下に挙げておきます。ソースと照らし合わせて確認してみてください。

■ 座標で指定する<Canvas>タグ

図14　<Canvas>タグの例

<Canvas x:Name="LayoutRoot" Background="Aquamarine">     <TextBlock Text="Canvasでは、絶対位置(Left, Top)の指定によりオブジェクトが配置されます。"       Canvas.Top="0" ></TextBlock>     <TextBlock Text="領域が重なる場合、ZIndexの値によって前後関係が決まります。"       Canvas.Top="20" ></TextBlock>     <TextBox Text="Left=50 Top=50 ZIndex=10" Canvas.Left="50"       Canvas.Top="50" Canvas.ZIndex="10" />     <TextBox Text="Left=100 Top=80 ZIndex=10" Canvas.Left="100"       Canvas.Top="80" Background="Orange" Canvas.ZIndex="10" />     <TextBox Text="Left=100 Top=80 ZIndex=20" Canvas.Left="150"       Canvas.Top="95" Background="Red" Canvas.ZIndex="20" />     <Ellipse Fill="Green" Width="100" Height="100" Canvas.Left="100"       Canvas.Top="50" Canvas.ZIndex="5" ></Ellipse>     <Rectangle Stroke="Black" Width="300" Height="100"       Canvas.Left="30" Canvas.Top="50"/>   </Canvas>

　ZIndexの値に従ってオブジェクトが重なります。

■ 垂直または水平方向に順番に配置される<StackPanel>タグ

図15　<StackPanel>タグの例

<StackPanel x:Name="LayoutRoot" Background="LightGreen">     <TextBlock Text="StackPanelの中のオブジェクトは垂直または水平方向に積み重なります">     </TextBlock>     <StackPanel Orientation="Vertical" Background="LightBlue">       <TextBox Text="垂直方向(Orientation=Vertical)" Margin="5">       </TextBox>       <Button Content="ボタン" Width="50"></Button>       <Border Width="100" Height="50" Background="Azure"         BorderThickness="2" BorderBrush="Red" Margin="5"></Border>       <ToggleButton Content="トグル" Width="100"></ToggleButton>     </StackPanel>     <StackPanel Orientation="Horizontal" Background="LightCoral"       Height="50">       <TextBox Text="水平方向(Orientation=Horizontal)" Margin="5" >       </TextBox>       <CheckBox></CheckBox>       <CheckBox IsChecked="True"></CheckBox>       <Ellipse Width="30" Height="30" Fill="Blue"></Ellipse>       <Ellipse Width="30" Height="30" Fill="Yellow"></Ellipse>       <Ellipse Width="30" Height="30" Fill="Red"></Ellipse>     </StackPanel> </StackPanel>

　指定した方向に自動的に整列します。

■ HTMLにおける<table>タグと同じ<Grid>タグ

図16　<Grid>タグの例

<Grid x:Name="LayoutRoot" Background="White">     <Grid.ColumnDefinitions>       <ColumnDefinition Width="100"></ColumnDefinition>       <ColumnDefinition Width="100"></ColumnDefinition>       <ColumnDefinition Width="100"></ColumnDefinition>       <ColumnDefinition Width="100"></ColumnDefinition>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>       <RowDefinition Height="30"></RowDefinition>       <RowDefinition Height="50" ></RowDefinition>       <RowDefinition Height="50" ></RowDefinition>       <RowDefinition Height="50" ></RowDefinition>       <RowDefinition Height="50" ></RowDefinition>       <RowDefinition Height="50" ></RowDefinition>     </Grid.RowDefinitions>     <StackPanel Grid.ColumnSpan="4" Grid.Row="0" Background="Beige">       <TextBlock Text="Gridでは行・列の定義に従ってオブジェクトを格子状に配置できます。" >       </TextBlock>       <TextBlock Text="ColumnSpan:4 Row:0" ></TextBlock>     </StackPanel>     <TextBox Grid.Column="0" Grid.Row="1" Text="Col:0       Row:1"></TextBox>     <TextBox Grid.Column="1" Grid.Row="1" Text="Col:1       Row:1"></TextBox>     <TextBox Grid.Column="2" Grid.Row="1" Text="Col:2       Row:1"></TextBox>     <TextBox Grid.Column="3" Grid.Row="1" Text="Col:3       Row:1"></TextBox>     <TextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2"       Text="Col:0 (ColSpan:2) Row:2"></TextBox>     <Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2"       Grid.RowSpan="2">       <Ellipse Fill="Yellow" Stroke="Red"         StrokeThickness="5" ></Ellipse>       <TextBlock Text="Col:2 (ColSpan:2) Row:2 (RowSpan:2)"         Width="150" TextWrapping="Wrap" VerticalAlignment="Center"         HorizontalAlignment="Center"></TextBlock>     </Grid>     <ListBox Grid.Column="0" Grid.Row="3">       <ListBoxItem Content="ListBox"></ListBoxItem>       <ListBoxItem Content="Col:0 Row:3"></ListBoxItem>       <ListBoxItem Content="ListBox"></ListBoxItem>       <ListBoxItem Content="ListBox"></ListBoxItem>       <ListBoxItem Content="ListBox"></ListBoxItem>     </ListBox>     <Button Grid.Column="1" Grid.Row="3" Content="Col:1       Row:3"></Button>     <TextBox Grid.Column="0" Grid.Row="4" Text="Col:0       Row:4"></TextBox>     <TextBox Grid.Column="1" Grid.Row="4" Text="Col:1       Row:4"></TextBox>     <TextBox Grid.Column="2" Grid.Row="4" Text="Col:2       Row:4"></TextBox>     <TextBox Grid.Column="3" Grid.Row="4" Text="Col:3       Row:4"></TextBox> </Grid>

　行・列の指定通りに格子状に配置します。

　次のページでは、Silverlight 2の標準コントロールを紹介し、対話型のアプリケーションを作成します。

1-2-3-4

INDEX
Silverlight 2で.NET技術をカッコよく使おう（2） 無料Visual Studioで始めるSilverlight 2超入門
	Page1 Silverlight 2開発環境を一からインストール
	Page2 初めてのSilverlight 2プロジェクト
	Page3 初めてでも分かるXAMLの中身 Silverlight 2で使用可能な3種類のコンテナ
	Page4 Silverlight 2の標準コントロールはこんなにたくさん！ 次回は、アニメーションでSilverlightをカッコよく使う コラム　「Silverlight 2で画面遷移を行うには？」

リッチクライアント＆帳票 全記事一覧へ

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