確保したSilverlightの領域に円を描く
Silverlightの領域を確保する の手順で領域を確保したら、次に確保した領域上に図形を描いてみます。ここで登場するのが、XAML（ザムル）です。使用するファイルは次の4つです。
- index.html
- createSilverlight.js
- Silverlight.js
- myxaml.xaml
Silverlightの領域を確保する と異なっているのは、myxaml.xamlというファイルが追加されていることです。あと、createSilverlight.jsにも、少しだけ手を入れています。index.htmlとSilverlight.jsはまったく同じです。以下にソースを示します。createSilverlight.jsで手を入れた箇所は赤で表示しています。
【index.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body onload="createMySilverlightPlugin()">
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("
myxaml.xaml
",document.body,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse
Canvas.Left="100" Canvas.Top="100"
Height="100" Width="100"
Stroke="crimson" StrokeThickness="10"
Fill="navy" />
</Canvas>
以上、4つのファイルを同一のフォルダに置き、ブラウザに読み込むと、次のように表示されます。
http://www.makoto3.net/xaml/silverlight0021/index.html
まず、createSilverlight.jsで定義した関数createMySilverlightPlugin()では、 Silverlightの領域を確保する では空欄にしてあった第一引数に、myxaml.xamlを指定してありれます。
このmyxaml.xamlが、Silverlightプラグインの領域に描く図形を記述するXAMLファイルです。見ての通り、XML文書で全体を<Canvas>～</Canvas>で囲み、そのあいだに図形の記述をしてあります。このサンプルの場合は、円（Ellipse）を描いているわけです。指定してある属性をざっと説明します。
|
Canvas.Left="100" |
キャンバスの左端から100px |
|
Canvas.Top="100" |
キャンバスの上から100px |
|
Height="100" |
高さ100px |
|
Width="100" |
幅100px |
|
Stroke="crimson" |
線色がcrimson |
|
StrokeThickness="10" |
線幅が10px |
|
Fill="navy" |
塗りつぶし色がnavy |
この他にも、円や直線、曲線を描くことも可能です。以上から、以上4つのファイルを用意し、XAMLファイルの内容だけを書き換えれば、いろんな図形を描けることが分かると思います。XAMLで使えるタグや属性の知識が増えると、描ける図形も増えていくというわけです。
なお、マイクロソフトの Expression Blend というツールを使うと、ペイントのようにマウスで絵を描くことでXAMLファイルを生成できます。複雑な図形をXAMLを直接記述すると、どんでもなく大変な作業になるので、Expression Blendなどのツールを使うわけです。その他にも、 ZAM3D といった3Dの図形をXAMLで吐けるツールもあります。
このページは
xfy Blog Editor
を利用して作成されました。
コメント