Silverlight (XAML) を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
XAML では、SVG に良く似た構文を使用してベクタグラフィックスを定義できます。
「Hello, world!」にはグラデーションをかけますが、当初考えていた 2通りではなく 1通りだけにします。
これは、Silverlight 1.0 の XAML では、タブのようなリッチコンポーネントがサポートされていないため、
手軽に切り替え表示を実現できないからです（タブなどは Silverlight 2.0 でサポートされる見込みです）。
Silverlight をインストール
している方は、実際に動かしてみることができます。
以下に、インストールしていない方のために実行イメージを掲載しておきます。
作成と実行
作成
適当なテキストエディタを使用して、hello.xaml を作成します。
hello.xaml
<?xml version="1.0"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle Width="350" Height="100" RadiusX="10.0" RadiusY="10.0"
StrokeThickness="5" Stroke="black" Fill="slateblue" />
<TextBlock Canvas.Top="25" Canvas.Left="25" FontSize="40"
FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.1" Color="darkorange" />
<GradientStop Offset="0.9" Color="yellow" />
</LinearGradientBrush>
</TextBlock.Foreground>
Hello, world!
</TextBlock>
</Canvas>
|
実行
通常、Webページに Silverlight コンテンツを埋め込むには、
JavaScript で書かれた補助ファイル（SDK で提供）を使用します。
しかし、本稿では手っ取り早く Silverlight を試すために、
HTML の object 要素を使用します。
hello.xaml の埋め込みは次のようにしています
（これは、一例に過ぎません）。
<object type="application/x-silverlight" width="350" height="100">
<param name="source" value="/usr/2007/167/hello.xaml" />
</object>
|
XAML を HTML の中に記述
XAML のコードは、HTML の script 要素の中に記述することができます。
以下の例では、上で作成した hello.xaml を一切変更せずに hello.html の中に記述しています。
hello.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/xaml" id="hello">
<?xml version="1.0"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle Width="350" Height="100" RadiusX="10.0" RadiusY="10.0"
StrokeThickness="5" Stroke="black" Fill="slateblue" />
<TextBlock Canvas.Top="25" Canvas.Left="25" FontSize="40"
FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0.1" Color="darkorange" />
<GradientStop Offset="0.9" Color="yellow" />
</LinearGradientBrush>
</TextBlock.Foreground>
Hello, world!
</TextBlock>
</Canvas>
</script>
<object type="application/x-silverlight" width="350" height="100">
<param name="source" value="#hello" />
</object>
</body>
</html>
|
script 要素の id には hello を設定しています。
object 要素のパラメータでは、source に #hello を設定することにより XAML を参照しています。
更新履歴
| 日付 |
内容 |
| 2007-12-11 |
再構成 | 他の RIA ソリューションとの一貫性を確保 |
| 2007-12-04 |
初版 |
|
