Neutral Scent

[ソースコードをダウンロード]
(download sample source code)

さて、環境はできました、でもSilverlightってナニ? さっぱりですよ? という方々のために、とりあえず基礎の基礎だけ解説します。

先の[環境整備編]でも書いたように、基本的なSilverlightアプリの構造は、
XAML(ザムル)によるマークアップ + コーディング(.NET or LL)
です。

Silverlight2からは、どのプラットフォーム(IE,Firefox,Safari,Windows,Mac、先々はMoonlightでLinux)でもCLRが動き、.NETが利用可能ですよ、どこでもC#やVB.NETが使えますよ、というところが一つの売りではあるのですが、ここでは.NET周りについては全く触れません。

また、Silverlightと言うと、Flash対抗馬、的なとらえ方がよくあると思うのですが、むしろポストHTMLととらえて、HTML+CSS+JSをXAML+JS他に置き換えて考えてみると良いと思います。
SilverlightのXAMLはWPF使われているモノのサブセットなのですが、それもここではスルー。

さて、回りくどい話は置いておいて、さっさとXAMLを書いてみることにしましょう。

XAMLによるレイアウトと属性:

前回と同様に新しいフォルダを作り、
index.html
app\app.xaml
app\app.js
を配置します。
とりあえず、内容もそのままでapp.xamlだけ変更してみましょう。

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.UserControl"
    x:Name="JSSample2">
  <StackPanel>
    <TextBlock Text="foo" />
    <TextBlock Text="bar" />
    <TextBlock Text="baz" />
  </StackPanel>
</UserControl> 

新しい要素、<StackPanel>が登場しました。
StackPanelは文字通り配下のコントロールを順番に積み上げてくれるだけのレイアウト用コントロールです。
さらに、

  <StackPanel> 
    <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="hoge" /> 
      <TextBlock Text="fuga" /> 
      <TextBlock Text="piyo" /> 
    </StackPanel> 
    <TextBlock Text="foo" /> 
    <TextBlock Text="bar" /> 
    <TextBlock Text="baz" /> 
  </StackPanel> 

とすると、横にも並べられます。

レイアウト系でStackPanelと並んで代表的に使われるのが、Gridコントロールです。
次の例はちょっと複雑になりますが、さらに一歩進んだXAMLの構文が使われています。

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.UserControl"
    x:Name="JSSample3">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="0">foo</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="0">bar</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="1">baz</TextBlock>
        <Rectangle Width="160" Height="160" Grid.Column="0" Grid.Row="1">
          <Rectangle.Fill>
            <ImageBrush ImageSource="http://www.microsoft.com/silverlight/images/logo.png"/>
          </Rectangle.Fill>
        </Rectangle>
    </Grid>
</UserControl>

Grid(格子)上に列と行を2つずつ定義し、TextBlockの属性として追加された Grid.Column="1" Grid.Row="0" などのAttached Property(添付プロパティ)によって、各々のコントロールがグリッド上でどこに配置されるかが記述されています。

また、このサンプルでは、<Grid.RowDefinitions>や<Rectangle.Fill> のように、子要素となるタグの中で親要素のプロパティを設定しています。
XAML要素のプロパティ設定は、先の例の<StackPanel Orientation="Horizontal"> のようなAttrubyte Syntaxと、この子要素を利用したProperty Element Syntaxの併用が可能です。基本的にどちらの書式で書くこともできますが、一行の文字列に収める制約が無い子要素によるProperty Element Syntaxの方がより複雑で入り組んだ設定が可能です。

[参照と配置編]へ続く...