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

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

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

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

- PR -

　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種類です（下記リストは、インデックスになっています）。

<Canvas>タグ
最も単純なコンテナ。指定された位置どおりに子の位置が決定される
<StackPanel>タグ
積み重ね式のコンテナ。垂直または水平方向に順番に配置される
<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で画面遷移を行うには？」

Silverlight 2で.NET技術をカッコよく使おうバックナンバー連載インデックスへ»

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

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）