確保したSilverlightの領域に四角を描く
Silverlightの領域を確保する で領域を確保し、 確保したSilverlightの領域に円を描く で、XAMLファイルを追加して円を描く方法を説明しました。ここでは、円ではなく四角を描いてみます。 確保したSilverlightの領域に円を描く と異なるのは、XAMLファイルのmyxaml.xamlだけです。以下に4つのファイルを示します。
【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">
<Rectangle Height="100" Width="100"
Canvas.Left="100" Canvas.Top="100"
Stroke="crimson" StrokeThickness="10" Fill="navy" />
</Canvas>
以上、4つのファイルを同一フォルダ置いて、index.htmlを読み込むと、次のように表示されます。
http://www.makoto3.net/xaml/silverlight0022/index.html
<Rectangle>が四角を描くXAMLのタグです。ここで使用した属性をざっとまとめます。
|
Height="100" |
高さ100px |
|
Width="100" |
幅100px |
|
Canvas.Left="100" |
キャンバス左端から100px |
|
Canvas.Top="100" |
キャンバス上端から100px |
|
Stroke="crimson" |
線の色はcrimson |
|
StrokeThickness="10" |
線の太さは10px |
|
Fill="navy" |
塗りつぶしの色はnavy |
というわけで、XAMLファイルを書き換えるだけで、いろんな図形を描けることが分かると思います。
とりあえず今回はこのあたりまでとし、XAMLによる図形描画については、また改めてまとめたいと思います。
このページは
xfy Blog Editor
を利用して作成されました。
コメント