Silverlightのテンプレートを読む(xaml)

Visual Studio2005を起動しプロジェクト作成を選択します。C#の項目にSilverlightが 追加されているので、そのなか(マイ テンプレート)からSilverlight Javascript Application を選択します。

プロジェクト内に作成されるファイルは、html,xaml,Javascriptの3種類が作成されます。

Default.html

アプリケーションの基点となるファイルです。

Silverlight.js

Silverlightのコアで、インスタンスを生成するcreateObjectやcreateObjectExなどを持つ 。

Scene.xaml

UIを定義。このサンプルでは、ボタン及びボタン上のテキスト(Click Me)。

上記ファイル以外にDefault.jsとScene.xaml.jsが作成されます。

Scene.xamlを見る

今回作成されたテンプレートを実行してみると、次のようなボタンが表示されます。

このボタンをクリックすると、「clicked」と表示され、マウスカーソルをボタンの上に重ねると ボタンの色が変わります。

従来のHTMLでサンプルと同じようにブラウザ上で実現するには、画像ファイルとスタイルシートを 使ったり画像ファイルとJavaScriptを使ったりして実現してきました。

Silverlightでは、このボタンの描画やボタンの色の変更、ボタン上の文字などをxmlベースの xamlファイルに定義します。

Scene.xamlファイルの中を見てみると、Canvasというタグを見つけることができます。xamlファイルの 中ほどのCanvas Width="120" Height="44"からの部分がボタンの描画になります。

<Canvas Width="120" Height="44">
<Rectangle StrokeThickness="4" RadiusX="17" RadiusY="36" Width="120"
    Height="44" Stroke="#46000000">
  <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
      <GradientStop Color="gray" Offset="0.242"/>
      <GradientStop Color="black" Offset="0.333"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
<TextBlock Width="67" Height="23.2" Canvas.Left="29" Canvas.Top="10" 
    Foreground="#FFEFEFEF" Text="Click Me" />
<Rectangle StrokeThickness="4" RadiusX="16" RadiusY="36" Width="104"
    Height="32" Canvas.Left="8" Canvas.Top="1.3">
  <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
      <GradientStop Color="#00FFFFFF" Offset="0.13"/>
      <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="17" RadiusY="36" Width="114" Height="38" 
    Fill="#00FFFFFF" x:Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>
</Canvas>

ボタン上の「Click Me」の文字は、TextBlockタグで定義されています。

ボタンのイメージは、Rectangleタグで長方形を作成し、RadiusX,RadiusY属性で角を丸めるようにしています。

もうひとつ注目しておきたいのが、最後にあるRectangleタグです。x:NameにhighlightEllipseと定義されています。 これが、マウスカーソルが重なった時の色の変化する部分になります。

xamlでアニメーション

本サンプルでは、マウスカーソルをボタンに重ねるとボタンの見栄えが変わります。 この変化を定義しているのが、Storyboardタグになります。

<Storyboard x:Name="mouseEnter">
  <ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF" 
       Storyboard.TargetName="highlightEllipse" 
       Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>

実際の色の変化は、ColorAnimationタグに定義されておりDurationで指定された時間に渡って Toで指定された色へ変化させます。

色を変化させる対象は、Storyboard.TargetNameとStoryboard.TargetPropertyで指定しています。