Silverlightの領域をdocument.bodyからdiv内に閉じ込める
確保したSilverlightの領域に円を描く や確保した Silverlightの領域に四角を描く で見たように、xaml.xamlの内容を書き換えるだけで、キャンバス上にさまざまな図形を描けることが分かりました。
では、index.htmlを少し編集して、HTMLのタグを追加してやれば、キャンバスとHTMLで記述した見出しや画像を混在させることもできそうです。
しかし、じつは、ここまでのサンプルではそれができません。実際にデモしてみます。まず、以下の4つのファイルを用意します。4つのファイルは Silverlightの領域に四角を描く と基本的に同じです。異なるのはindex.htmlだけで、相違点は赤で示しています。
【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="setTimeout('createMySilverlightPlugin()',3000)"
>
<h2>JavaScriptでSilverlight</h2>
</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>
まずは、下の結果を見てください。
http://www.makoto3.net/xaml/silverlight0023/index.html
最初、「JavaScriptでSilverlight」と表示され、しばらくするとSilverlightのキャンバスに置き換わったと思います。赤で書いた以下の記述は、わかりやすくするために、JavaScriptの setTimeoutメソッド を使って、createMySilverlightPlugin()関数の実行をページが読み込まれてから3秒後に意図的に遅らせています。
onload="setTimeout('createMySilverlightPlugin()',3000)"
ページ読み込み後、3秒後にcreateMySilverlightPlugin()関数が実行されると、同じく赤で記した、
<h2>JavaScriptでSilverlight</h2>
が消えてしまうわけです。
これはなぜかというと、createSilverlight.jsに定義してあるcreateMySilverlightPlugin()関数の、次の青で示した指定によります。
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
document.body
,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
document.bodyは、Silverlightプラグイン（Silverlightの領域）を作成する位置を示しています。この場合、document.bodyには <h2>JavaScriptでSilverlight</h2> があったわけですが、3秒後にcreateMySilverlightPlugin()が実行され、Silverlight領域と入れ替わってしまった、というわけです。
ですので、HTMLの見出しや画像とSilverlightの領域を混在させるためには、このままではまずいことになります。解決するには、createMySilverlightPlugin()関数の定義に指定されていた document.body を変更します。具体的には、index.htmlのボディ部に、たとえば次のような指定を入れます。
<div id="silverlightBlock"></div>
そして、createMySilverlightPlugin()関数の定義で指定されていた document.body を silverlightBlock に書き換えます。これで、Silverlight領域はid名がsilverlightBlockである<div>～</div>内に作成されるはずです。<div>～</div>ですから、その外部に書いた見出しや画像の指定もそのまま残ります。このように変更した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()">
<h2>JavaScriptでSilverlight</h2>
<div id="
silverlightBlock
"></div>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
silverlightBlock
,"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>
index.htmlを読み込んだ結果は、次のとおりです。
http://www.makoto3.net/xaml/silverlight0024/index.html
今度は、「JavaScriptでSilverlight」という見出しとSilverlightの領域が同時に表示されたと思います。
このページは
xfy Blog Editor
を利用して作成されました。
コメント