MAKOTO3.COMに、以下のエントリーを公開しました。
Silverlight2のプログラムをテキストエディタとJavaScriptだけで作成する簡単チュートリアル
Silverlight2のβ2のプログラムを、Silverlight1.0と同様に、テキストエディタとJavaScriptのみで作成する基本手順です。理屈はさておき、とりあえずこの順番に作業すれば、動くものはできると思います。関心のある方は、お試しください。
Silverlightのサイトである http://silverlight.net/ のSilverlight1.0のGALLERYページに、Flickr Search by Silverlight が掲載されました。英語はよく分かりませんでしたが、とりあえずユーザー登録して適当にアップロードしたら掲載されたみたいです。英語の説明も適当に書いて、画面もキャプチャしてアップロードしたのですが、説明文もキャプチャも微妙に変わっているところをみると、係の人が修正してくれたみたいです。係の人、ありがとう。ただ、米国はすでに2.0用のサンプルの方が多いみたいですが．．．
前からドメインだけはとっていた http://www.makoto3.com/ にWordPress 2.5.1を入れて、Flickr Search by Silverlight 1.0を公開しました。Flickr Search by Silverlight 1.0のファイルをダウンロードできるようにしましたので、興味のある方は使ってみてください。なお、利用するにはFlickrにユーザー登録して、API Keyを取得しておく必要があります。
取得したAPI Keyは、config.jsというテキストファイルに書けば、使えるようになります。詳しくはFlickr Search by Silverlight 1.0の設置方法を参照してください。
なお、config.jsを編集すれば、色や背景画像、動きをカスタマイズすることも可能です。これについてもFlickr Search by Silverlight 1.0の設置方法の方に書く予定です。
少し時間ができたので、Fickerの画像を検索してSilverlightで表示する（ベース）で作ったサンプルをベースに、Flickrの画像を検索するSilverlightアプリケーションを作ってみました。
デフォルトでは「cat」の検索結果が表示されます。キーワードを変更して右下のボタンをクリックすると、画像が9つ検索されます（日本語も使えます）。画像をクリックするとクルクル回って中央に移動してから、ビヨーンと拡大します。拡大した状態では右下に三角ボタンが現れ、クリックするとFlickrの該当ページにジャンプします。拡大画像をクリックすると、もとの位置に戻ります。
けっこうゴチャゴチャいじりましたが、思ったよりは面白いものができました。ブログ等にも簡単に設置できて、背景画像や色などをカスタマイズすることも可能なので、もう少しカスタマイズしやすいように修正して、配布しようかと思ってます。
感想などいただけるとありがたいです。
Flickrの画像を検索するスクリプトを使って、Silverlightの検索結果を表示させてみました。キーワードを入力して右下のグレーの四角形をクリックすると、検索された画像が表示されます。特にアニメーション等は用意していないので、これだけだと面白くないですが、できるということは確認できました。
なお、利用しているのはSilverlight 1.0です。日本語は通らないはずですが、このサンプルでは使えます。じつは、テキストフォームはSilverlightのオブジェクトではなくて、HTMLのフォームです。createSilverlight.jsでisWindowless:"true"を指定すると周囲のHTMLの要素と重ねられるので、このように一体化させて見せることも可能になります。
ただし、クリックする四角形はSilverlightのRectangleです。仕組みを大ざっぱに書きます。Rectangleをクリックすると、外のHTMLフォームのテキストを取得してきて、Filickerを検索し、返ってきた画像のURLを9つ並んだRectangleのImageBrushのImageSourceプロパティにセットする感じです。
なお、エントリー中では、<iframe>を使って表示させてます。<iframe>に表示させているのは、これです。
ベースはできたので、アニメーションも組み込んだ、もうちょっとSilverlightっぽいものに改造してみようかと思います。
Flickrの画像を検索するスクリプトです。キーワードを入力して［Search］ボタンをクリックするだけです。日本語も大丈夫です。元ネタはこちらです。こんなに簡単に検索できるんですね。これができれば、検索結果をSilverlightで表示することもできるはずなので、近々サンプルを作ります。
// 画像検索を行う関数
function photo_search ( param ) {
// APIリクエストパラメタの設定
param.api_key = 'c39f94ca8620ae78114bcbfe1701be3f';
param.method = 'flickr.photos.search';
param.per_page = 10;
param.sort = 'date-posted-desc';
param.format = 'json';
param.jsoncallback = 'jsonFlickrApi';
// APIリクエストURLの生成(GETメソッド)
var url = 'http://www.flickr.com/services/rest/?'+
obj2query( param );
// script 要素の発行
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
};
// 現在の表示内容をクリアする
function remove_children ( id ) {
var div = document.getElementById( id );
while ( div.firstChild ) {
div.removeChild( div.lastChild );
}
};
// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
var list = [];
for( var key in obj ) {
var k = encodeURIComponent(key);
var v = encodeURIComponent(obj[key]);
list[list.length] = k+'='+v;
}
var query = list.join( '&' );
return query;
}
// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
// データが取得できているかチェック
if ( ! data ) return;
if ( ! data.photos ) return;
var list = data.photos.photo;
if ( ! list ) return;
if ( ! list.length ) return;
// 現在の表示内容（Loading...）をクリアする
remove_children( 'photos_here' );
// 各画像を表示する
var div = document.getElementById( 'photos_here' );
for( var i=0; i<list.length; i++ ) {
var photo = list[i];
// a 要素の生成
var atag = document.createElement( 'a' );
atag.href = 'http://www.flickr.com/photos/'+
photo.owner+'/'+photo.id+'/';
// img 要素の生成
var img = document.createElement( 'img' );
img.src = 'http://static.flickr.com/'+photo.server+
'/'+photo.id+'_'+photo.secret+'_s.jpg';
img.style.border = '0';
atag.appendChild( img );
div.appendChild( atag );
}
}
【index.html】
<html>
<head>
<title>Flickr API sample</title>
<script type="text/javascript" src="flickr-search.js"></script>
<script type="text/javascript"><!--
window.onload = function () {
photo_search({ text: 'cat' });
}
--></script>
</head>
<body>
<form name="myForm" id="myForm" action="">
<input type="text" name="myText" id="myText" value="dog" size="50"/><br />
<input type="button" value="Search"
onclick="var keyword=document.getElementById('myText').value;
photo_search({ text: keyword })"/><br/>
</form>
<div id="photos_here">Loading...</div>
：
：
</body>
</html>
Silverlight Streamingを使ってデジタル時計をココログのエントリーに公開してみた。できた↓。詳細は、また別途。
Silverlightのサンプルとして動画のビューアを作ってみました。
http://www.makoto3.net/xaml/silverlight0117/index.html
IE6、IE7、Firefoxで動作確認しました。zipで固めた動画ファイルを使っていますが、ダウンロード中はプログレスバーが表示されます。また、動画のサムネイルにマウスポインタを合わせるとピクピクピクッと動いて、クリックすると360度回転しながら拡大され、自動的に再生されます。同時に「Pause」「Play」「Stop」の制御用の文字も出てきます。もう一度クリックすると、出てきたときとは逆方向に720度回転しながらもとに戻ります。
なお、以下はデジタル時計のサンプルです。これも、IE6、IE7、Firefoxで動作確認しました。
http://www.makoto3.net/xaml/silverlight0106/index.html
ただし、次のページで使っているまったく同じ仕組みのデジタル時計が、なぜかIE6でだけ動作しません。
http://makoto3.cocolog-nifty.com/makoto3/2008/05/silverlight_e4e2.html
上はMAKOTO3.NETのトップページで、HTMLファイル中に<div></div>～を使って定石通りにSilverlightプラグインを生成しています。使っているXAMLやJSファイルは前述の 動作しているデジタル時計のサンプル と同じ（はず）なのですが、なぜかエラーが起きます。
下はココログのブログ中に表示させたものですが、これもなぜかIE6でだけエラーが起きるようです。<iframe>内に正常に動作するサンプル（HTMLファイル）を表示させているだけ（のはず）なのですが、なぜかエラーが起きます。ちょっと原因不明です。
以上、メモとして記録します。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
downloaderオブジェクトとMediaElementオブジェクトのsetSourceメソッドを使うと、zipで固めた複数のビデオファイルをダウンロードし、その中のビデオファイルをファイル名を指定して再生することができます。サンプルは コレ です。
サーバー上には、001.wmv～030.wmvの30個の動画ファイルを固めたzipファイル videos.zipを置いてあります。xamlファイルとスクリプトファイルは次のとおりです。
【myxaml.xaml】
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="660" Height="477" Name="baseCanvas">
<MediaElement x:Name="myMediaElement" Opacity="0" IsMuted="True" />
<Canvas Canvas.Top="30" Canvas.Left="179">
<Rectangle x:Name="progressRectangle" Canvas.Left="1" Height="10" Width="0" Fill="Orange" />
<Rectangle Canvas.Top ="-1" Canvas.Left="0" Height="12" Width="302" StrokeThickness="1" Stroke="Black" />
<TextBlock x:Name="progressText" Canvas.Top ="-4" Canvas.Left="150" Text="0%" FontSize="12" />
</Canvas>
<TextBlock Canvas.Top="45" Canvas.Left="310" Height="10" FontSize="12" MouseLeftButtonUp="onMouseLeftButtonUp" Foreground="Blue" Cursor="Hand">Download</TextBlock>
<Rectangle Canvas.Top ="60" Canvas.Left="30" Height="380" Width="600" StrokeThickness="1" Stroke="Black">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement"/>
</Rectangle.Fill>
</Rectangle>
<Canvas Canvas.Top="440" Canvas.Left="10" Opacity="0" x:Name="video_names">
<TextBlock Canvas.Top="0" Canvas.Left="0"
FontSize="10" Height="10" Cursor="Hand"
MouseLeftButtonDown="
chMovie
">001.wmv</TextBlock>
<TextBlock Canvas.Top="0" Canvas.Left="50"
FontSize="10" Height="10" Cursor="Hand"
MouseLeftButtonDown="
chMovie
">002.wmv</TextBlock>
：
(中略)
：
<TextBlock Canvas.Top="20" Canvas.Left="400"
FontSize="10" Height="10" Cursor="Hand"
MouseLeftButtonDown="
chMovie
">029.wmv</TextBlock>
<TextBlock Canvas.Top="20" Canvas.Left="450"
FontSize="10" Height="10" Cursor="Hand"
MouseLeftButtonDown="
chMovie
">030.wmv</TextBlock>
</Canvas>
</Canvas>
【myScript.js】
var downloader;
function onMouseLeftButtonUp(sender, eventArgs) {
var slPlugin = sender.getHost();
downloader = slPlugin.createObject("downloader")
;
downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
downloader.addEventListener("completed", onCompleted);
downloader.open("GET", "
http://www.makoto3.net/xaml/silverlight0113/videos.zip
");
downloader.send();
}
function onDownloadProgressChanged(sender, eventArgs) {
var percentage = Math.floor(sender.downloadProgress * 100);
sender.findName("progressText").text = percentage + "%";
sender.findName("progressRectangle").width = percentage*3;
}
function onCompleted(sender, eventArgs) {
sender.findName("video_names").opacity = "100";
}
function chMovie(sender,args) {
var myMediaElement = sender.findName("myMediaElement");
myMediaElement.setSource(downloader,sender.Text)
;
}
xamlファイルについては、2点ほどポイントを押さえておきましょう。まず、第一は、 動画で塗りつぶすVideoBrush で説明したように、MediaElementを指定し、四角形（Rectangle）の塗りつぶし用にこのMediaElementを指定しています。ただし、MediaElementタグにSourceは指定していないので、読み込んだ直後は、四角形が表示されるだけで内部はビデオで塗りつぶされません。
第二は、TextBlockをクリックしたとき(MouseLeftButtonDownイベントが起きたとき)、chMovie関数を呼び出しています。これについては後述します。
次に、スクリプトファイルを見ていきます。ダウンロード中にローディングバーを表示する仕組みは、 MEMO:downloaderオブジェクトを使ったローディングバーの作り方 と同じです。今回のサンプルは、先に作ったものに追加する形になっているので、重複する部分については説明は省きます。
まず注目したいのが、次です。
downloader.open("GET", " http://www.makoto3.net/xaml/silverlight0113/videos.zip ");
vodeos.zipは、001.wmv～030.wmvの30個の動画ファイルを固めたzipファイルです。そして、このファイルのダウンロードが完了したら、次を実行します。
sender.findName("video_names").opacity = "100";
これは、「001.wmv」「002.wmv」～「030.wmv」という文字を表示する30個のTextBlockを囲んでいるCanvasの透明度を100にする＝不透明にして見えるようにする、という処理です。
30個のTextBlockそれぞれをクリックしたとき実行するchMovie関数の定義は次のとおりです。
var myMediaElement = sender.findName("myMediaElement");
myMediaElement.setSource(downloader,sender.Text)
;
つまり、MediaElementにsetSourceメソッドでSourceとなるビデオファイルをセットしているわけですが、このサンプルで最も重要なのは、その引数です。
第一引数のdownloaderは、次の指定によって作られたdownloaderオブジェクトへの参照です。
downloader = slPlugin.createObject("downloader")
downloaderはいちばん最初にグローバル変数として定義していますから、他の関数でも利用できます。このため、第一引数downloaderには、downloaderオブジェクトへの参照が入ることになります。
第二引数は、senderのTextプロパティです。senderは、chMovie関数が呼び出されたオブジェクトですから、クリックされたTextBlockです。つまり、各TextBlockの文字（001.wmv、002.wmv、……、030.wmv）となります。このため、たとえば最初のTextBlockをクリックすると、
myMediaElement.setSource(downloader,"001.wmv");
が実行され、zipファイルの中にある001.wmvがMediaElementのソースとして設定され、自動的に再生がスタートします。
ちなみに、zipではなく、ダウンロードされるファイルが001.wmvという単一のファイルであった場合は、次のように第二引数を空文字とすることで、downloaderオブジェクトからファイル名を取り出せます。
myMediaElement.setSource(downloader,"");
そのサンプルは コレ になります。参考までに、このサンプルのスクリプトファイルを示しておきます。複数ファイルをzipで固めた場合と、単一ファイルの場合の比較になると思います。
function onMouseLeftButtonUp(sender, eventArgs) {
var slPlugin = sender.getHost();
var downloader = slPlugin.createObject("downloader");
downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
downloader.addEventListener("completed", onCompleted);
downloader.open("GET", "
Bear1.wmv
");
downloader.send();
}
function onDownloadProgressChanged(sender, eventArgs) {
var percentage = Math.floor(sender.downloadProgress * 100);
sender.findName("progressText").text = percentage + "%";
sender.findName("progressRectangle").width = percentage*3;
}
function onCompleted(sender, eventArgs) {
var myMediaElement = sender.findName("myMediaElement");
myMediaElement.setSource(sender,"")
;
}
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
Silverlight1.0にはdownloaderオブジェクトという便利なオブジェクトがあります。XAMLでは使えなくて、使えるのはスクリプト中だけです。こいつを使うと、 こんなローディングバー も作れます。XAMLファイルとスクリプトファイルを示します。
【myxaml.xaml】
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="660" Height="477" Name="baseCanvas">
<Canvas Canvas.Top="30" Canvas.Left="179">
<Rectangle x:Name="progressRectangle" Canvas.Left="1"
Height="10" Width="0" Fill="Orange" />
<Rectangle Canvas.Top ="-1" Canvas.Left="0" Height="12" Width="302" StrokeThickness="1" Stroke="Black" />
<TextBlock x:Name="progressText" Canvas.Top ="-4" Canvas.Left="150" Text="0%" FontSize="12" />
</Canvas>
<TextBlock Canvas.Top="45" Canvas.Left="310"
Height="10" FontSize="12"
MouseLeftButtonUp="onMouseLeftButtonUp" Foreground="Blue" Cursor="Hand">
Download
</TextBlock>
</Canvas>
【myScript.js】
function onMouseLeftButtonUp(sender, eventArgs) {
var slPlugin = sender.getHost();
var downloader = slPlugin.createObject("downloader");
downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
downloader.addEventListener("completed", onCompleted);
downloader.open("GET", "Bear1.wmv");
downloader.send();
}
function onDownloadProgressChanged(sender, eventArgs) {
var percentage = Math.floor(sender.downloadProgress * 100);
sender.findName("progressText").text = percentage + "%";
sender.findName("progressRectangle").width = percentage*3;
}
function onCompleted(sender, eventArgs) {
alert("Completed!");
}
jsファイル側の説明をざっと。まず、「download」という文字をクリックすると、
var slPlugin = sender.getHost();
var downloader = slPlugin.createObject("downloader");
が実行されます。これは新しいオブジェクトを生成するための常道。getHost()メソッドでプラグインへの参照を得て、createObject("downloader")でdownloaderオブジェクトを作ります。次に、作ったdownloaderオブジェクトにイベントが発生したとき実行する処理を指定します。次のコードでは2つ追加しています。
downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
downloader.addEventListener("completed", onCompleted);
1つはdownloadProgressChangedが起きたときです。これは、ダウンロードの状態が変化しているとき起きるイベントで、要はダウンロード中を意味しています。実行するのはonDownloadProgressChanged関数です。つまり、ダウンロード中はonDownloadProgressChanged関数を実行しなさい、という意味です。
もう1つはcompletedが起きたときです。これはダウンロードが完了したときを意味します。実行するのは、onCompleted関数です。
なお、いずれでもaddEventListenerを使っていますが、これはオブジェクトに「イベント」と「イベントハンドラ」を追加するメソッドです。Listenerという文字が使われていますが、そのニュアンスはこんな感じです。たとえば、次のように指定したとします。
オブジェクトＡ.addEventListener("イベントＢ",関数Ｃ)
この場合、「オブジェクトＡ」には、「イベントＢ」が発生したとき「関数Ｃ」を実行するという性質が追加されます。その結果、「オブジェクトＡ」は、「イベントＢ」が発生したかどうかを確認するため、つねに耳を澄ましている状態になります（リスナーになるわけです）。そして、「イベントＡが起きた」という音を聞きつけたら、即座に「関数Ｃ」を実行するのです。ですから、
downloader.addEventListener("completed", onCompleted);
と書いた場合、downloadオブジェクトは、耳を澄ましてcompletedイベントが起きたどうかに神経をとがらせるようになり、completedイベントが起きて「あ、起きた！」となったら、すぐにonCompleted関数を実行するのです。
と、こんな感じです。というわけで、jsファイルの残りは、downloadProgressChangedが起きたとき実行するondownloadProgressChanged関数、completedが起きたとき実行するoncompleted関数の2つを定義しています。
function onDownloadProgressChanged(sender, eventArgs) {
var percentage = Math.floor(sender.downloadProgress * 100);
sender.findName("progressText").text = percentage + "%";
sender.findName("progressRectangle").width = percentage*3;
}
function onCompleted(sender, eventArgs) {
alert("Completed!");
}
ondownloadProgressChanged関数は、バーを伸ばす処理をしています。ポイントはdownloaderオブジェクトのdownloadProgressプロパティです。これは0～1の小数で、初期値ｶﾞ0、ダウンロードがすべて終わったら1となるダウンロードの進行状態を示す数値です。これを使ってRectangleのWidthを変化させているわけです。
onCompleted関数の方は、alert()でメッセージを表示しているだけです。実際には、ダウンロードが終わった後で、いろいろやりたいことをここに書くことになります。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
Silverlightでの動画アプリケーションは、Expression Encoderというツールを使えばノンプログラミングで作成可能です。次は、実際にExpression Encoderで作ったSilverlightの動画アプリです。
http://www.makoto3.net/encoder_sample/default.html
Expression Encoderは、 60日間の評価版をダウンロード できます（上のサンプルも評価版で作りました）。
ここでは、その作成方法を説明します。なお、サンプルで使用した動画ファイルは、 デジカメ動画フリー素材 さんの動画素材を利用させていただきました。また、執筆には こちらの記事 を参考にさせていただきました。ありがとうございます。では、はじまり、はじまり。
▼1.Expression Encoderを起動したら、［ファイル－インポート］を選択します。
▼2.［メディアファイルのインポート］ダイアログボックスが開いたら、動画ファイルを指定して［開く］ボタンをクリックします。
▼3.動画ファイルが読み込まれ、次のような状態で表示されます。
▼4.動画の下にある黄色のラインをドラッグして移動し、マーカーの位置を決めます。マーカーを入れると、動画用のメニューでその位置にすぐにジャンプできるようになります。
▼5.マーカーの位置を決めたら、ウィンドウ右上で［メタデータ］タブに切り替え、［マーカー］の［追加］ボタンをクリックします。
▼6.［マーカー］に、黄色い線の位置の情報が追加されます。［時間］にはマーカー位置の時間が設定されるので、［値］に適当な名前を二有力します。また、マーカーのサムネイルを付く性する場合は、［サムネイル］にチェックを入れます。
▼7.同じ操作を繰り返して、必要な数だけマーカーを追加します。黄色い線をドラッグして位置を決めたら、［メタデータ］タブの［マーカー］にある［追加］ボタンをクリックし、［値］に名前を入力して［サムネイル］にチェックを入れる操作を繰り返します。なお、動画の下にタイムラインを表すバーには、マーカーの位置に白い▼マークが表示されます。
▼8.マーカー設定が終わったら、ウィンドウ右上で［出力］タブに切り替え、［ジョブ出力］の［テンプレート］で、プレーヤーのテンプレートを選択します。テンプレートは、動画を囲む枠や再生・一時停止などのボタンをデザインしたものです。
▼9.テンプレートを選んだら、ウィンドウ最下段にある［エンコード］ボタンをクリックします。
▼10.エンコードが完了すると、ブラウザが起動して、動画が再生されます。なお、出力先は初期設定では
c:\Users\(ユーザー名)\Documents\Expression\Expression Encoder\Output
となっています（Vistaの場合）。エンコードを実行するたびにフォルダが作成され、そこに動画ファイルやJSファイル、サムネイル用の画像などが生成・保存されるようです。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
先に コラム：Silverlight 2.0ベータ1ではRepeatBehavior="1"と書いても無限に繰り返される不具合？ という記事を書きましたが、私が間違っていました。その補足記事です。RepeatBehaviorで回数を指定するときは、RepeatBehavior="1x" や RepeatBehavior="5x" のように「x」を付ける必要があります。なので、先のサンプルは次のように書く必要があります。
<Storyboard x:Name="a6">
<DoubleAnimation
Storyboard.TargetName="menu6_scale"
Storyboard.TargetProperty="ScaleX"
From="1.0" To="1.5" Duration="0:0:0.2"
AutoReverse="True"
RepeatBehavior="1x"
/>
<DoubleAnimation
Storyboard.TargetName="menu6_scale"
Storyboard.TargetProperty="ScaleY"
From="1.0" To="1.5" Duration="0:0:0.2"
AutoReverse="True"
RepeatBehavior="1x"
/>
</Storyboard>
これで、Silverlight 1.0でも2.0ベータ1でも同じ動きをするようになります。Silverlight 1.0でRepeatBehavior="1"と書いたものが正しく動いていたので、その書き方でよいのだと思い込んでいました。RepeatBehaviorの詳細は こちら です。なお、Silverlight 2.0でRepeatBehavior="1"がどう解釈されるのかは、よく分かりません。MSDNの Silverlight－JavaScript のフォーラム に質問したら、すぐに解決しました。あぁ、恥ずかしい。というわけで、サンプル類のRepeatBehaviorの指定は、すべて修正しておきます。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
こちらのページ からSilverlight 2.0 ベータ1がダウンロード可能になっていたので、ダウンロード＆インストールしました。そしたら、以前、 Silverlight1.1を入れるとSilverlight1.0のデータが見られない？ で書いたようなことはなく、Silverlight 1.0用のデータも見られました。ただし、いきなり1.0と2.0β1で異なる動作を確認。
具体的には、Silverlight 1.0ではアニメーションの指定でRepeatBehavior="1"と書くと動作が一回だけ行われるのですが、Silverlight 2.0β1では、同じ指定が無視されて無限に繰り返されてしまうようです。不具合なのかなと思って、 こちらのページ あたりも見たのですが、特に書かれていないようでした。
対処方法としては、RepeatBehaviorの指定そのものを削除します。すると、1.0でも2.0β1でも動作は一回になるようです。
せっかくなので、 MAKOTO3.NET のヘッダ部分のアニメーションに、動作の違いを確認する箇所を残しておきました。丸い円（Ellipse）が6つ並んでいますが、いちばん右端の円だけ、Silverlight 2.0β1だとマウスをのせると動きが止まらなくなります。一方、Silverlight 1.0だと一回の動作で停止します。そこのところのXAMLソースは次のようになっています。
<Storyboard x:Name="a6">
<DoubleAnimation
Storyboard.TargetName="menu6_scale"
Storyboard.TargetProperty="ScaleX"
From="1.0" To="1.5" Duration="0:0:0.2"
AutoReverse="True"
RepeatBehavior="1"
/>
<DoubleAnimation
Storyboard.TargetName="menu6_scale"
Storyboard.TargetProperty="ScaleY"
From="1.0" To="1.5" Duration="0:0:0.2"
AutoReverse="True"
RepeatBehavior="1"
/>
</Storyboard>
ベータ版による不具合だと思いますが、やはり1.0用のデータは2.0でも同じように動いてくれないと、安定している1.0用にがんばってサンプル作ってみよう、という意欲をそがれることになるので、こういう現象はうれしくないです。
なお、Silverlight 2.0β1を入れたので、連載している「JavaScriptでSilverlight 」はそろそろいったん締めて、Silverlight 2.0を追っかける記事を書いていこうかと思ってます。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
今度は、スクリプトを使ってアニメーションを開始したり停止したりする方法を説明します。すでに「Ⅵ. アニメーション」でアニメーションの詳細を説明しましたが、それらは基本的にXAMLによるアニメーションの書き方であり、紹介したサンプルも、ページが読み込まれるとすぐにアニメーションが開始するものばかりでした。そして、そこではJavaScriptはまったく使いませんでした。
実際に、ページが読み込まれると自動的にスタートするタイプのアニメーションは、JavaScriptを使わなくてもXAMLだけで書くことができます。JavaScriptが必要になるのは、マウスをクリックしたり、キーボードを押したりといったイベントによってアニメーションを制御したいときです。
たとえば、画像にマウスポインタをのせると回転が始まり、画像からマウスポインタを離すと回転が止まるアニメーションを実現するためには、JavaScriptが必要です。
この場合、あらかじめ、XAMLを使って回転のアニメーションを記述しておき、画像にマウスがのるというイベントが発生したタイミングで、JavaScriptによって回転のアニメーションをスタートさせます。マウスポインタが画像から離れたら、再びJavaScriptを使って回転のアニメーションをストップする、という処理になります。次が、そのサンプルです。
http://www.makoto3.net/xaml/silverlight0100/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300" Background="lavender">
<Ellipse
Width="200" Height="200" Canvas.Left="50" Canvas.Top="55"
MouseEnter="myFunc1" MouseLeave="myFunc2"
>
<Ellipse.Fill>
<ImageBrush ImageSource="img01.jpg" Stretch="UniformToFill" />
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform Angle="0" CenterX="100" CenterY="100"
x:Name="myRender"
/>
</Ellipse.RenderTransform>
</Ellipse>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myRender"
Storyboard.TargetProperty="Angle"
From="0" By="360" Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</Canvas.Resources>
</Canvas>
【myScript.js】
function myFunc1(sender,args) {
sender.findName("myStoryboard").begin();
}
function myFunc2(sender,args) {
sender.findName("myStoryboard").stop();
}
スクリプトでアニメーションの開始や停止を行う際、最も注意したいポイントは、<Storyboard>の書き方です。具体的には、<Canvas.Resources>～</Canvas.Resources>の内部に<Storyboard>を書きます。
「Ⅵ. アニメーション」で扱ったサンプルでは、ページを読み込むとすぐにアニメーションを開始させましたが、スクリプトで制御する場合は、アニメーションを開始しないで待機させておく必要があります。そのための指定が、<Canvas.Resources>～</Canvas.Resources>なのです。これは、アニメーションをキャンバスのリソースとして定義し、必要なときに呼び出せるようにする指定です。
そして、<Canvas.Resources>～</Canvas.Resources>の内側に<Storyboard>～</Storyboard>を指定します。また、スクリプトで開始するときのために、開始タグの<Storyboard>には、x:Nameで名前を付けておきます。上記のサンプルでは、"myStoryboard"という名前を付けてあります。
<Storyboard>～</Storyboard>の内部は、「Ⅵ. アニメーション」で説明した<DoubleAnimation>や<ColorAnimation>でアニメーションを記述します。書き方は「Ⅵ. アニメーション」で説明したとおりです。上記のサンプルでは、TragetNameで"myRender"、TargetPropertyで"Angle"を指定していますから、変形を行う<RotateTransform>のAngle（角度）をアニメーションさせることになります。具体的には、Angleを0から360まで5秒間で変化させ、それを無限に繰り返します。
画像で塗りつぶした円（Ellipse）では、マウスポインタがのったとき関数myFunc1、マウスポインタが離れたとき関数myFunc2を実行します。
各関数の処理は、いたってシンプルです。まず、マウスポインタがのったとき実行される関数myFunc1は、次のような処理を行います。
sender.findName("myStoryboard").begin();
つまり、"myStoryboard"という名前のオブジェクト（＝待機させておいた<Storyboard>）のbeginメソッドを実行します（findNameメソッドがよく分からない場合は ここ を参照）。beginメソッドは<Storyboard>を開始するメソッドです。
マウスが離れたとき実行する関数myFunc2の処理は、次のとおりです。
sender.findName("myStoryboard").stop();
つまり、"myStoryboard"という名前のオブジェクト（＝待機させておいた<Storyboard>）のstopメソッドを実行します。stopメソッドはアニメーションをストップし、<Storyboard>を初期化するメソッドです。
この他に、一時停止のPause、一時停止したアニメーションを停止箇所から再開するResumeといったメソッドも利用可能です。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
スクリプトを使えば、変形方法を制御することもできます。以下は、マウスポインタをのせると90度回転し、離すと元に戻るサンプルです。
http://www.makoto3.net/xaml/silverlight0099/index.html
ImageBrushのImageSourceプロパティを変えて画像を切り替えている サンプル と同様に、変形を行う<RotateTransform>にx:Nameで名前を付け、スクリプトでfindNameメソッドを使ってその<RotateTransform>を指し示し、Angleプロパティを変える、という仕組みになっています。ソースを示します。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300" Background="lavender">
<Ellipse
Width="200" Height="200" Canvas.Left="50" Canvas.Top="55"
MouseEnter="myFunc1" MouseLeave="myFunc2"
>
<Ellipse.Fill>
<ImageBrush ImageSource="img02.jpg" Stretch="None" />
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
Angle="0"
CenterX="100" CenterY="100"
x:Name="myRender"
/>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
【myScript.js】
function myFunc1(sender,args) {
sender.findName("myRender").Angle="90";
}
function myFunc2(sender,args) {
sender.findName("myRender").Angle="0";
}
円の内部に画像を表示するため<ImageBrush>を使っていますが、今回はスクリプトで画像は変更しないので、x:Nameで名前は付けていません。x:Nameで名前を付けているのは、回転を行う<RotateTransform>です。こちらに"myRender"という名前を付け、AngleXは"0"としています。なお、CenterXとCenterYはともに100なので、回転の中心は、円の左上から右に100px、下に100pxとなります。円は縦横が200pxなので、ちょうど真ん中が回転の中心ということになるわけです。
イベントハンドラは、円の<Ellipse>ら指定しています。MouseEnterで関数myFunc1を実行し、MouseLeaveでmyFunc2を実行します。
関数myFunc1では、finfNameメソッドで"myRender"、つまり回転を行う<<RotateTransform>を見つけ、そのAngleプロパティを90にします。そして、関数myFunc2では同様にしてAngleプロパティを0にします。
このように、スクリプトを使えば変形方法を自由にコントロールすることができます。ここでは<RotateTransform>を取り上げましたが、もちろん<ScaleTransform>や<SkewTransform>などでも、同じ方法で変形方法を制御可能です。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
findNameメソッドの使い方がわかれば、スクリプトを使っていろいろなことができるようになります。ここでは、ブラシのプロパティを変更する例を紹介します。次が、そのサンプルです。
http://www.makoto3.net/xaml/silverlight0098/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300"
Background="lavender">
<Ellipse Width="200" Height="200" Canvas.Left="50" Canvas.Top="55"
MouseEnter="myFunc1"
MouseLeave="myFunc2"
>
<Ellipse.Fill>
<ImageBrush ImageSource="img01.jpg" Stretch="None"
x:Name="myBrush"
/>
</Ellipse.Fill>
</Ellipse>
</Canvas>
【myScript.js】
function myFunc1(sender,args) {
sender.findName("myBrush").ImageSource='img02.jpg';
}
function myFunc2(sender,args) {
sender.findName("myBrush").ImageSource='img01.jpg';
}
まず、円（Ellipse）の内部に画像が表示されます。円にマウスポインタをのせると画像が切り替わり、マウスポインタを離すと再び元の画像に切り替わります。
ポイントは、円の<Ellipse>ではなく、ブラシの<ImageBrush>にx:Nameで"mtBrush"という名前を付けていることです。そして、関数ではsender.findName("myBrush").ImageSource と指定することで、ブラシのimageSourceプロパティを変更しています。
イベントハンドラは<Ellipse>に指定しています。MouseEnter="myFunc1" でマウスポインタが円にのったときmyFunc1を実行します。そして、MouseLeave="myFunc2"でマウスポインタが円から離れたときmyFunc2を実行します。各関数の処理は、前述のように、ブラシのImageSourceプロパティを変更することです。
これはImageBrushでしたが、SolidColorBrushやLinearGradiendBrushなどの他のブラシでも、プロパティを変更することで状態を切り替えることが可能です。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
スクリプトを使って図形の色を変えたり、図形や画像の位置やサイズを変えたりするためには、スクリプト中で図形や画像（これらを「オブジェクト」と呼びます）を正確に指定する必要があります。スクリプトを使って"何を"変化させるかを指定する必要があるわけです。1つの方法は、senderを使う方法です。
スクリプトの基本2～イベントの指定とスクリプトの書き方 で書いたように、JSファイルで関数を定義するとき、第一引数のsenderを使うと、イベントが発生したオブジェクトそのものを指し示すことができます。
しかし、senderが指し示すのはイベントが発生したオブジェクトです。このため、"図形Ａをクリックしたら図形Ａの色を変更する"という処理はできますが、"図形Ａをクリックしたら図形Ｂの色を変更する" ことはできないことになります。それは、ちょっと不便です。
そこで、XAMLで指定されている図形や画像などのオブジェクトを、もっと汎用的に指し示す方法が必要になります。それを実現するのが、findNameというメソッドです。
では、findNameを使ったサンプルを紹介します。
http://www.makoto3.net/xaml/silverlight0097/index.html
2つの四角形が表示されますが、上の四角形をクリックすると下の四角形の色が変化し、下の四角形をクリックすると上の四角形の色が変化します。
以下に、XAMLファイルとJSファイルを示します。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300"
Background="lavender">
<Rectangle
Width="200" Height="50" Canvas.Left="50" Canvas.Top="75"
Fill="Black"
MouseLeftButtonDown="myFunc1"
x:Name="myRectangle1"
/>
<Rectangle
Width="200" Height="50" Canvas.Left="50" Canvas.Top="175" Fill="Black"
MouseLeftButtonDown="myFunc2"
x:Name="myRectangle2"
/>
</Canvas>
【myScript.js】
function myFunc1(sender,args) {
sender.
findName("myRectangle2")
.Fill.Color='Red';
}
function myFunc2(sender,args) {
sender.
findName("myRectangle1")
.Fill.Color='Blue';
}
2つの四角形には、それぞれ名前を付けています。名前を付けるときは、x:Nameに続けて指定します。サンプルでは、上の四角形に"myRectangle1"、下の四角形に"myRectangle2"という名前を付けています。
そして、上の四角形をクリックすると（正確には左ボタンを押し下げると）myFunc1、下の四角形をクリックするとmyFunc2という関数を呼び出すように指定してあります。
JSファイルでは、myFunc1関数とmyFunc2関数を定義しています。それぞれの関数で使用しているのが、finfNameメソッドです。これは、次のように使います。
sender.findName("名前")
これによって、その名前のオブジェクトを指し示すことができます。
myFunc1関数の定義では、"myRectangle2"という名前のオブジェクト、つまり下の四角形を指し示し、そのFill.Colorを赤に変えます。したがって、上の四角形をクリックすると、下の四角形が赤に変化します。
myFunc2関数の定義では、"myRectangle1"という名前のオブジェクト、つまり上の四角形を指し示し、そのFill.Colorを青に変えます。したがって、下の四角形をクリックすると、上の四角形が青に変化します。
このように、findNameメソッドを使用すると、関数の定義中でSilverlightのオブジェクトを自由に指し示すことができます。とても便利なので、ぜひ覚えておきたいメソッドです。
なお、はじめてfindNameメソッドの存在を知ったときは、指定できるオブジェクトに何か制限があるのかと思ったのですが、特にそういうことはないようです。
というのは、XAMLはXMLドキュメントなので、XMLのツリーとして表現できるわけですが、「イベントが発生したオブジェクトの子ノード以下しか指定できないのでは……」と（何となく）疑ったのです。つまり、イベントが発生したオブジェクトの親とか兄弟は指定できないのではないか、と思って、いくつか試してみましたが、親でも兄弟でも指し示すことができました。
なので、関数を定義するとき、オブジェクトのツリー構造を深く考えることなく sender.findName("名前") と書けばオブジェクトを指し示すことができます。便利です。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
では、先ほどと同じ 四角形をクリックすると塗りつぶしの色を赤に変えるサンプル を、もう少し詳しく見ていきます。ここで取り上げるのは、XAMLファイルと追加したJSファイルです。まずは、ソースを再び示します。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300" Background="lavender">
<Rectangle
Width="200" Height="200" Canvas.Left="50" Canvas.Top="50" Fill="Black"
MouseLeftButtonDown="myFunc"
/>
</Canvas>
【myScript.js】
function myFunc(sender,args) {
sender.Fill.Color='Red';
}
まず、XAMLファイルの四角形を描く<Rectangle>で、MouseLeftButtonDown="myFunc" と指定しています。これは、マウスの左ボタンが押し下げられたとき、myFuncを実行するという意味です。そして、myFuncの具体的な内容が、JSファイルに書かれています。
MouseLeftButtonDownを「イベントハンドラ」と呼びます。イベントハンドラによって、四角形などの図形や画像などで発生したイベント（出来事）をとらえ、そのタイミングで実行する処理を指定できるようになります。Silverlightにはさまざまなイベントハンドラが用意されていますが、マウス操作に関するイベントハンドラは、次の5つです。
|
イベント |
意味 |
|---|---|
|
MouseMove |
マウスが動いたとき |
|
MouseEnter |
マウスがオブジェクト内に入ったとき |
|
MouseLeave |
マウスがオブジェクトから離れたとき |
|
MouseLeftButtonDown |
マウスの左ボタンが押し下げられたとき |
|
MouseLeftButtonUp |
マウスの左ボタンが押し上げられたとき |
MouseLeftButtonDown="myFunc" で指定してあるmyFuncは、JavaScriptの関数名です（関数名は特に決まっているわけではなく、適当に付けることができます）。そして、myFuncという関数の中身が、JSファイルに書かれている次の処理です。
function myFunc(sender,args) {
sender.Fill.Color='Red';
}
まず、functionに続けて関数名を書いています。括弧内には引数（ひきすう）と呼ぶ2つの文字が入っています。senderはイベントが発生したオブジェクトそのものを指します。このサンプルの場合、クリックというイベントは四角形で発生していますから、senderはその四角形を指すことになります。
2番目の引数 argsは、発生したイベントのさまざまな情報（たとえば、マウスの座標など）を取得するとき利用しますが、ここではとりあえず説明は割愛します。
関数名(sender.args) と書いたら、実際に実行する処理を括弧の{ と } のあいだに書きます。ここでは、
sender.Fill.Color='Red';
と書いていますが、sender は前述のとおりイベントが発生した四角形そのものを指していますから、その四角形のFill.ColorをRed（赤）にするという意味になります。
sender.Fill='Red';
と書けばよさそうなものですが、この場合、それだとうまくいきません。sender.Fill.Color='Red'; とColorを指定する必要があります。
なお、スクリプトの各行末にはセミコロン(;)が必要です。
HTMLファイルと組み合わせるJavaScriptに慣れている場合は、次のような違いに注意するとよいと思います。
それ以外は、基本的なJavaScriptの知識さえあれば、XAMLで使用するスクリプトは、特に問題なく書けると思います。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
ここからは、JavaScriptを使って、Silverlightでの動的な変化を制御する方法を説明します。まずは、最もベーシックな例として、四角形をクリックしたら、塗りつぶしの色を変化させる例を取り上げます。サンプルは↓。
http://www.makoto3.net/xaml/silverlight0092/index.html
黒い四角形をクリックすると、内部が赤に変化するだけのシンプルな例です。このサンプルを構成しているファイルは、次の5つです、
すべてのファイルのソースを示します。
【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>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById"silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300"
Background="lavender">
<Rectangle Width="200" Height="200" Canvas.Left="50" Canvas.Top="50" Fill="Black"
MouseLeftButtonDown="myFunc"
/>
</Canvas>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myScript.js】
function myFunc(sender,args) {
sender.Fill.Color='Red';
}
createSilverlight.jsとSilverlight.jsは、これまで登場したサンプルと同じなので、特に解説することはありません。
大切なのは、次の3点です。
このように、xamlで描いた図形、画像、文字などをスクリプト（JavaScript）を使って動的に変化させるときは、新しいJSファイル（この例ではmyScript.js）を追加して、そこに具体的な処理を書きます。そして、Silverlightプラグインを表示するHTMLファイル（この例ではindex.html）にこのJSファイルを指定して利用できるようにし、XAMLファイル（この例ではmyxaml.xaml）中に、MouseLeftButtonDownなどの指定（これを「イベントハンドラ」と呼びます）を入れて、処理の名前を指定する、という流れになります。
次に、MouseLeftButtonDownなどのイベントハンドラとJSファイル（この例ではmyScript.js）の書き方について、詳しく見ていきましょう。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
<Storyboard>～</Storyboard>内にColorAnimationを複数記述することで、複数のオブジェクトの色を同時に変化させることもできます。次は、グラデーションの色を変化させるサンプルです。
http://www.makoto3.net/xaml/silverlight0085/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red" Offset="0.0"
x:Name="Stop1"
/>
<GradientStop Color="yellow" Offset="0.5"
x:Name="Stop2"/
>
<GradientStop Color="blue" Offset="1.0"
x:Name="Stop3"/
>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Stop1"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever"/>
<ColorAnimation Storyboard.TargetName="Stop2"
Storyboard.TargetProperty="Color"
From="Yellow" To="Red" Duration="0:0:1.7"
AutoReverse="True" RepeatBehavior="Forever"/>
<ColorAnimation Storyboard.TargetName="Stop3"
Storyboard.TargetProperty="Color"
From="Blue" To="Red" Duration="0:0:2.3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
グラデーションは<LinearGradientBrush>を使い、色の変化点を指定する<GradientStop>にそれぞれx:Nameで名前を付け、アニメーションさせています。
色で分けているのが、対応する指定です。たとえば、赤で示した<GradientStop>は赤から青に1秒間かけて変化し、反復し、動作を無限に繰り返します。青と緑で示した箇所も、FromとToで指定してある色名、およびDurationの値が異なるだけで、書き方はまったく同じです。
このページは
xfy Blog Editor
を利用して作成されました。
色のアニメーション専用に用意されているのがColorAnimationです。次は、四角形の塗りつぶしの色を赤から青へ変化させる例です。
http://www.makoto3.net/xaml/silverlight0084/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
<Rectangle.Fill>
<SolidColorBrush Color="Red"
x:Name="myBrush"
/>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="myBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:2"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
SolidColorBrushに"MyBrush"という名前を付け、<ColorAnimation>で、この"MyBrush"の色を変化させています。FromとToで色名(16進数表記でも可)を指定している点が異なるだけで、それ以外はDoubleAnimationやPointAnimationと同じなのが分かると思います。
念のため書きますね。まず、Storyboard.TargetNameで"MyBrush"を指定し、アニメーションの対象とします。Storyboard.TargetPropertyで"Color"を指定し、変化させるプロパティを"Color"とします。そして、Fromで赤、Toで青、Durationで2秒を指定することで、2秒間かけて赤から青に変化させます。あとは、AutoReverse="True"で反復、RepeatBehavior="Forever"で無限の繰り返しを指定しています。
このページは
xfy Blog Editor
を利用して作成されました。
PointAnimationで一対の数値を変化させてアニメーションさせるケースは、それほど多くないような気もしますが、サンプルが1つだとやはりちょっと寂しいので、もう1つ紹介します。LinearGradientBrushのStartPoint属性を変化させる例です。
http://www.makoto3.net/xaml/silverlight0082/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Name="MyGrad">
<GradientStop Color="red" Offset="0.0"/>
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="blue" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyGrad"
Storyboard.TargetProperty="StartPoint"
From="0,0" To="1,0" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
StartPointブロパティの値を"0,0"から"1,0"のあいだで変化させているのが分かると思います。書き方は、PointAnimationの例1～RadialGradientBrushのCenterプロパティを変化させると同じなので、ここでは繰り返しません。
このページは xfy Blog Editor を利用して作成されました。
PointAnimationは、座標のような2つの数値の組み合わせを変化させるとき便利なアニメーションです。次は、円形のグラデーションであるRadialGradientBrushのCenter属性の値を変化させ、グラデーションの中心点を動かしている例です。
http://www.makoto3.net/xaml/silverlight0083/index.html
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
<Ellipse.Fill>
<RadialGradientBrush Center="0.25,0.25"
x:Name="MyGrad"
>
<GradientStop Color="crimson" Offset="0.0"/>
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="navy" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyGrad"
Storyboard.TargetProperty="Center"
From="0.25,0.25" To="0.75,0.75" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
サンプルでは、<RadialGradientBrush>に"MyGrad"という名前を付けて、<PointAnimation>のStoryboard.TargetNameに指定しています。そして、TragetPropertyでCenterを指定し、Fromで"0.25,0.25"、Toで"0.75,0.75"と指定してあります。FromとToで一対の数値を指定するだけで、それ以外はDoubleAnimationと変わりないことが分かると思います。
このページは
xfy Blog Editor
を利用して作成されました。
DoubleAnimationの最後の例として、グラデーションを変化させる例を紹介します。グラデーションの色の変化ポイントを指定する<GradientStop>タグのOffset属性の値を変化させて、グラデーションをアニメーション化しているサンプルです。
http://www.makoto3.net/xaml/silverlight0081/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle x:Name="MyRect" Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red" Offset="0.0"/>
<GradientStop Color="yellow" Offset="0.5"
x:Name="MyStop1"
/>
<GradientStop Color="blue" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyStop1"
Storyboard.TargetProperty="Offset"
From="0" To="1" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
ソースを見ると分かるように、<GradientStop>タグの1つに"MyStop1"という名前を付け、そのOffsetプロパティの値を0から1まで3秒かけて変化させ、反復＋無限の繰り返しを指定しています。
というわけで、DoubleAnimationを使えば、グラデーションを変化させることも可能です。では、座標のように2つの数値が必要な場合、たとえばRadialGradientBrushのCenter属性などを変化させるときは、どうすればよいでしょうか？ そこで利用するのがPointAnimationです。
次にPointAnimationの例をいくつか紹介します。
このページは
xfy Blog Editor
を利用して作成されました。
先に複数のアニメーションを組み合わせることができると書きましたが、ここでは変形と移動を組み合わせた例を紹介します。
具体的には、 DoubleAnimationの例1～位置を移動する で取り上げた 四角形が左右に移動するサンプル と、 DoubleAnimationの例3～変形をアニメーションさせる で取り上げた 四角形を回転させるサンプル を組み合わせたものです。
http://www.makoto3.net/xaml/silverlight0080/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyRect"
Width="50" Height="50" Fill="red" Canvas.Left="0" Canvas.Top="125">
<Rectangle.RenderTransform>
<RotateTransform Angle="0" CenterX="25" CenterY="25"
x:Name="MyTrans"
/>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="250" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="MyTrans"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
ページを読み込むと、赤い四角形が回転しながら左右に行ったり来たりします。ソース中の赤で示した箇所が左右の移動、青で示した箇所が回転に関係する記述です。それぞれ、 DoubleAnimationの例1～位置を移動する と DoubleAnimationの例3～変形をアニメーションさせる で説明した以上の内容は含まれていません。
このように、複数のDoubleAnimationを組み合わせることで、いろいろな動きを表現することが可能です。
このページは
xfy Blog Editor
を利用して作成されました。
変形の数値を変化させてアニメーションさせることもできます。次は、四角形を回転させるサンプルです。
http://www.makoto3.net/xaml/silverlight0079/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="50" Height="50" Fill="red" Canvas.Left="125" Canvas.Top="125">
<Rectangle.RenderTransform>
<RotateTransform Angle="0" CenterX="25" CenterY="25"
x:Name="MyTrans"
/>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyTrans"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
変形の指定は、<Rectangle.RenderTransform>～<Rectangle.RenderTransform>のあいだにある<RotateTransform>です。四角形は幅と高さが50ピクセルですから、CenterX属性とCenterY属性で25を指定してあるため、回転の中心点が四角形の中心ということになります（CenterXとCenterYを指定しなければ回転の中心は四角形の左上です）。
ポイントは、この<RotateTransform>にx:Nameで"MyTrans"という名前を付けていることです。これにより、<DoubleAnimation Storyboard.TargetName="MyTrans" ……>として、<RotateTransform>をアニメーションの対象にすることができます。あとは、変化させる属性（プロパティ）としてAngleを指定し、0から360まで3秒で変化させ、反復させて、この動作を無限に繰り返します。
このように、変形をアニメーションさせるときは、変形させる図形ではなく、図形の子要素として指定されている変形方法をターゲットとして指定し、その属性を変化させます。「オブジェクト」という言葉を使うなら、Silverlightでは変形方法（この例ではRotateTransform）も「オブジェクト」として扱われる、ということになるわけです。
このページは
xfy Blog Editor
を利用して作成されました。
アニメーションは組み合わせることもできます。具体的には、<Storyboard>～</Storyboard>のあいだには、複数のアニメーションの指定を書くことができます。次は、 DoubleAnimationの例1～位置を移動する で紹介した 四角形が左右に動くサンプル に、別の動きを足したものです。具体的には、Canvas.TopとCanvas.Leftの値を同時に変化させて、ジグザグに移動させています。
http://www.makoto3.net/xaml/silverlight0078/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyRect" Width="50" Height="50" Fill="red" Canvas.Left="0" Canvas.Top="125">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="250" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="(Canvas.Top)"
From="125" To="150" Duration="0:0:0.3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
ソースを見ると分かるように、<Storyboard>～</Storyboard>のあいだには、2つの<DoubleAnimation>タグで2つのアニメーションを指定しています。赤いアニメーションは、 DoubleAnimationの例1～位置を移動する で紹介した 四角形が左右に動くサンプル と同じで、青い部分が追加したアニメーションです。
Canvas.Topの値を125～150まで0.3秒で変化する動作を反復させ、それを無限に繰り返しています。Canvas.LeftとCanvas.Topを変化させる2つの動きが合成されて、四角形がジグザグに動いているように見えるわけです。
このページは
xfy Blog Editor
を利用して作成されました。
まずは、数値を変化させてアニメーションを実現するDoubleAnimationの例をいくつか紹介します。 アニメーションの基本 では 透明度を変化させるサンプル を扱ったので、ここでは位置を変化させるDoubleAnimationのサンプルを紹介します。
http://www.makoto3.net/xaml/silverlight0077/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyRect"
Width="50" Height="50" Fill="red" Canvas.Left="0" Canvas.Top="125">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="250" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
ページを読み込むと、赤い四角形が左端から右端まで移動し、右端にぶつかると反対方向に移動して、この動作を繰り返します。
アニメーションの書き方は アニメーションの基本 で紹介したルール通りです。四角形のRectangleには"MyRec"という名前を付けていますので、DoubleAnimationのStoryboard.TargetNameには"MyRec"と指定し、アニメーションの対象として指定しています。
ちょっと注意したいのはStoryboard.TargetPropertyに"(Canvas.Left)"と指定してあることです。<Rectangle>タグでは、キャンバス左端からの距離をCanvas.Left属性で指定していますが、このようにピリオドで書く属性をTraget.Propertyに指定するときは、全体を括弧( )で囲む仕様となっています。
あとは、特に難しい指定はありません。From="0" To="250" Duration="0:0:3"なので、キャンバス左端からの距離が0から250ピクセルまで3秒間かけて変化し、AutoReverse="True" RepeatBehavior="Forever" と指定していますから、動作が反復されて、それが無限に繰り返されることになります。
このページは
xfy Blog Editor
を利用して作成されました。
Silverlightでは、アニメーションは大きく次の3つに分けることができます。
なお、DoubleAnimationの「Double」とは「倍精度浮動小数点数」のことです。
ここでは、DoubleAnimationの例として四角形の透明度（Opacity）を変化させるアニメーションを取り上げ、Silverlightでのアニメーションの基本的な記述方法を紹介します。以下がサンプルです。ページが読み込まれると、すぐにアニメーションがスタートします。
http://www.makoto3.net/xaml/silverlight0067/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle x:Name="MyRect" Width="100" Height="100" Fill="red" Canvas.Left="100" Canvas.Top="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
色で指定した箇所について、1つずつ説明します。
四角形の<Rectangle>～</Rectangle>の最初の子要素として書いてあるのが<Ractangle.Triggers>～</Ractangle.Triggers>です。Triggerの「トリガー」には「きっかけ」とか「引き金」といった意味があるので、""四角形をアニメーションするきっかけを指定する"と理解しておけばよいと思います。
具体的な"きっかけ"をRoutedEvent属性で指定します。ここはRectangle.Loadedなので、"四角形が読み込まれたとき"がアニメーションが始まる"きっかけ"です。
後述するストーリーボード(Storyboard)を指定するための記述です。ヘルプでは、次のように書かれています。
BeginStoryboard is used as a wrapper around a Storyboard that is being triggered. A BeginStoryboard can only contain one Storyboard, not a collection of them
要するに、<BeginStoryBoard>はストーリーボードを囲むラッパー(wrapper)というもので、<BeginStoryBoard>～</BeginStoryBoard>内には、ストーリーボードを1つだけ書けるということですね。
これが「ストーリーボード」で、内部に書くアニメーションの入れ物・土台といった役割を果たします。
アニメーションの本体であるDoubleAnimationの指定です。Storyboard.TargetName属性は"動かす要素"の指定です。サンプルでは"MyRect"と指定していますが、これは<Rectangle>のx:Nameで指定した名前なので、この四角形を動かすことになります。
Storyboard.TargetProperty属性は、"変化させる性質（プロパティ）"の指定です。ここでは"Opacity"なので透明度を変化させることになります。
Fromは変化させる数値の開始値、Toは終了値、DurationはFromからToまでの所要時間です（時:分:秒で指定します）。このサンプルの場合、Opacityの値を、1.0から0.0まで3秒で変化させることになります。そして、AutoReverse="True"でアニメーションがの逆転再生を行い、RepeatBehavior="Forever"でそれをページが表示されるていあいだは無限に繰り返します。（このあたりの細かい指定は、また改めて説明します）。
※
だいたい以上が、ページが読み込まれたとき実行するアニメーションの基本です。タグの入れ子関係がちょっと面倒ですが、あまり深い意味は追求しないで、決まったルールと思って覚えてしまうのがよいかと思います。
なお、クリックなどの操作でアニメーションをスタートしたりストップさせたりするには、JavaScriptを使った別の方法が必要になります。詳しくは後述しますが、しばらくはJavaScriptは使わないで、XAMLだけに絞った説明を続けます。
このページは
xfy Blog Editor
を利用して作成されました。
文字は図形と同様に変形することができます。次は、RotateTransformによる回転とScaleTransformによる拡大・縮小のサンプルです。
http://www.makoto3.net/xaml/silverlight0064/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="30" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="30" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="yellow" Offset="0.0" />
<GradientStop Color="red" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.RenderTransform>
<RotateTransform Angle="30" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="skyblue">
Silverlight 1.0
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="4.0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
変形の方法は、 変形の基本 で書いたとおりです。指定できる属性も 図形を回転する～RotateTransform と 図形を拡大・縮小する～ScaleTransform で記した内容と変わりありません。
次はSkewTransformで文字をゆがめたサンプルです。
http://www.makoto3.net/xaml/silverlight0065/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="red">
Silverlight 1.0
<TextBlock.RenderTransform>
<SkewTransform AngleX="-30" AngleY="0" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="30" Canvas.Top="160" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="blue">
Silverlight 1.0
<TextBlock.RenderTransform>
<SkewTransform AngleX="30" AngleY="0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
SkewTransformに関しても、指定方法は、 図形を傾ける～SkewTransform と同じです。
最後はTranslateTransformのサンプルです。
http://www.makoto3.net/xaml/silverlight0066/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="black">
Silverlight 1.0
<TextBlock.RenderTransform>
<TranslateTransform X="-4" Y="-2" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="red">
Silverlight 1.0
<TextBlock.RenderTransform>
<TranslateTransform X="0" Y="0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
2つのTextBlockを、TranslateTransformでわずからずらすことで立体的に見せています。指定方法は、 図形を移動する～TranslateTransform と同じです。
このページは
xfy Blog Editor
を利用して作成されました。
文字の色は<TextBlock>のForeground属性で指定できます。次は、赤にする例です。
<TextBlock Foreground="red">Silverlight<TextBlock>
また、次のようにブラシを使うこともできます。
<TextBlock>
Silverlight
<TextBlock.Foreground>
<SolidColorBrush Color="navy"/>
</TextBlock.Foreground>
<TextBlock>
上記ではSolidColorBrushを使っていますが、もちろんグラデーションブラシ(LinearGradientBrushとRadialGradientBrush)やイメージブラシ(ImageBrush)、ビデオブラシ(VideoBrush)を使って文字を塗りつぶすこともできます。ここでは、その例を紹介します。
最初はSolidColorBrushとImageBrushを使った例です。
http://www.makoto3.net/xaml/silverlight0059/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="10" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
<TextBlock.Foreground>
<SolidColorBrush Color="navy"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
<TextBlock.Foreground>
<ImageBrush ImageSource="fab01.jpg"/>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
内部を塗りつぶすブラシの使い方は、図形の場合とほぼ同じです。図形だと<～.Fill>～</～.Fill>のあいだにブラシを指定しますが、文字だと<TextBlock.Foreground>～</TextBlock.Foreground>のあいだに指定する点が異なるだけです。
次はグラデーションで塗りつぶした例です。
http://www.makoto3.net/xaml/silverlight0060/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="10" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="lime" Offset="0.0" />
<GradientStop Color="red" Offset="0.25" />
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="blue" Offset="0.75" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
<TextBlock.Foreground>
<RadialGradientBrush>
<GradientStop Color="lime" Offset="0.0" />
<GradientStop Color="red" Offset="0.25" />
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="blue" Offset="0.75" />
<GradientStop Color="white" Offset="1.0" />
</RadialGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
上がLinearGradientBrush、下がRadialGradientBrushの例となっています。なお、上記サンプルでは文字が自動的に折り返されて2行で表示されていますが、2行全体に1つのグラデーションが表示されるのではなく、各行ごとにそれぞれグラデーションが設定されていることが確認できます。
最後はビデオブラシ(VideoBrush)の例です。
http://www.makoto3.net/xaml/silverlight0061/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement"
Source="../silverlight0043/bear.wmv"
Opacity="0" IsMuted="True" />
<TextBlock Canvas.Left="0" Canvas.Top="80" Width="300" TextWrapping="Wrap" FontSize="100" FontFamily="Verdana" FontWeight="Bold" Text="BEAR">
<TextBlock.Foreground>
<VideoBrush SourceName="myMediaElement" />
</TextBlock.Foreground>
</TextBlock>
</Canvas>
文字の場合も、 動画で塗りつぶすVideoBrush で書いたことがそのままあてはまります。念のため繰り返すと、事前に<MediaElemet>で動画を指定してOpacityを0にし、透明にします。そして、その動画にx:Nameで名前を付けて、<VideoBrush>のSourceName属性でその名前を指定してやるだけです。
このページは
xfy Blog Editor
を利用して作成されました。
<TextBlock>～</TextBlock>で囲まれた文字のうち、特定の文字だけ書式を変えるには、その文字を<Run>～</Run>で括り、<Run>タグにFontFamilyやForegroundなどの属性を指定します。または、書式を変えたい文字を<Run>タグのText属性で指定します。次が<Run>のサンプルです。
http://www.makoto3.net/xaml/silverlight0058/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="10" Canvas.Top="10" Width="280" TextWrapping="Wrap" Foreground="navy">
Silverlight is
<Run Foreground="red" FontFamily="Courier New" FontSize="24">very</Run>
exciting technology.But Silverlight 1.0 cannot handle
<Run Foreground="Blue" FontFamily="Arial" FontSize="40" FontWeight="ExtraBold" FontStyle="Italic">Japanese.</Run>
<Run TextDecorations="underline">Silverlight 2.0</Run>
will can handle Japanese.
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="160" Width="280" TextWrapping="Wrap" Foreground="green" Text="Silverlight is ">
<Run Foreground="red" FontFamily="Courier New" FontSize="24" Text="very"/>
<Run Text="exciting technology.But Silverlight 1.0 cannot handle "/>
<Run Foreground="Blue" FontFamily="Arial" FontSize="40" FontWeight="ExtraBold" FontStyle="Italic" Text="Japanese."/>
<Run TextDecorations="Underline" Text="Silverlight 2.0"/>
<Run Text="will can handle Japanese."/>
</TextBlock>
</Canvas>
上のサンプルの赤い記述は、表示する文字を<Run>～</Run>で括った例、青い記述は表示する文字をText属性で指定した例です。書き方が異なるだけで、結果は同じです。
指定できる属性は、<TextBlock>とほぼ同じと考えよさそうです（Canvas.LeftやWidth、TextWrappingなどはありません）。なお、上記サンプルでは、TextDecorations属性で下線を指定しています。
|
TextDecorations |
文字に下線を設定する。
|
このページは
xfy Blog Editor
を利用して作成されました。
<TextBlock>で長い文章を表示する場合、途中で改行するには<LineBreak/>を挿入します。また、自動的に折り返す場合は、Width属性で幅を指定し、TextWrappint属性で"Wrap"を指定します。Width属性が必要なので注意してください。次がサンプルです。
http://www.makoto3.net/xaml/silverlight0057/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Canvas.Left="10" Canvas.Top="30" Foreground="crimson">
Silverlight is very exciting technology.But Silverlight 1.0 cannot handle Japanese. Silverlight 2.0 will can handle Japanese.
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="60" Foreground="green">
Silverlight is very exciting technology.
<LineBreak/>
But Silverlight 1.0 cannot
<LineBreak/>
handle Japanese.
<LineBreak/>
Silverlight 2.0 will can handle Japanese.
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="180"
Width="280"
TextWrapping="Wrap"
Foreground="navy">
Silverlight is very exciting technology.But Silverlight 1.0 cannot handle Japanese. Silverlight 2.0 will can handle Japanese.
</TextBlock>
</Canvas>
上のサンプルでは同じ文章を3つ使っていますが、いちばん上は<LuneBreak/>も使っていませんし、Width属性もTextWrapping属性も指定していません。このため、Silverlightのエリアから外に文章が切れています。
2番目は<LineBreak/>を挿入した箇所で改行されています。3番目はWidth="280"とTextWrapping="Wrap"を指定しているため、280ピクセルの幅で自動的に折り返されています。
このページは
xfy Blog Editor
を利用して作成されました。
文字を表示するには<TextBlock>を使います。表示する文字を指定する方法は2つあります。1つは次のようにText属性で指定する方法です。
<TextBlock Text="表示する文字" ～ />
もう1つは、表示する文字を次のように<TextBlock>～</TextBlock>で囲む方法です。
<TextBlock>表示する文字</TextBlock>
もちろん、フォントやサイズを指定することもできます。次は、これらの基本的な使い方を盛り込んだサンプルです。
http://www.makoto3.net/xaml/silverlight0056/index.html
次がXAMLのソースです。赤がText属性で指定した例、青が<TextBlock>～</TextBlock>囲んだ例です。なお、Silverlight 1.0では日本語は表示できません。日本語には次の1.1(公開時は2.0になる予定)で対応予定です。
【myxaml.xaml】
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="Hello, Silverlight 1.0" Canvas.Left="10" Canvas.Top="10" />
<TextBlock Canvas.Left="10" Canvas.Top="30" >Hello, Silverlight1.0</TextBlock>
<TextBlock
Canvas.Left="10" Canvas.Top="50"
Text="Hello, Silverlight 1.0"
FontFamily="Verdana"
FontSize="25"
FontStretch="UltraExpanded"
FontStyle="Italic"
FontWeight="ExtraBlack" />
<TextBlock
Canvas.Left="10" Canvas.Top="80"
FontFamily="Cursive"
FontSize="25"
FontStretch="UltraCondensed"
FontStyle="Normal"
FontWeight="Light">
Hello, Silverlight 1.0
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="110" FontSize="20" Foreground="steelblue">Hello, Silverlight1.0</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="130" FontSize="20" Foreground="darkred">Hello, Silverlight1.0 </TextBlock>
</Canvas>
上記サンプルで使用した主な属性を、以下にまとめます（Canvas.Topなどは省略）。
|
FontFamily |
フォントを指定します。Silverlight 1.0で利用できるフォントは次のとおりです。
|
|
FontSize |
フォントサイズを指定します。単位はピクセルです。デフォルトは14.666です。 |
|
FontStretch |
画面上でフォントを縮小または拡大する度合い、です。ただし、試した範囲では特に変化がありませんでしたので、省略します。なお、 これ はMSDNの参考になりそうなページです。 |
|
FontStyle |
Italicを指定すると斜体になり、Normalを指定すると正体になります。 |
|
FontWeight |
フォントの太さを指定します。指定できるのは次の10のキーワードです。フォントによっては、キーワードを変えても変化しないものもあります。
|
なお、次はFontFamilyとFontWeightを切り替えるサンプルです。
http://www.makoto3.net/xaml/silverlight0063/index.html
このページは
xfy Blog Editor
を利用して作成されました。
複数の変形を組み合わせるときは、<TransformGroup>タグで変形方法の指定を囲みます。たとえば、四角形を横方向に2倍に拡大したあと、30度回転するなら、次のようになります。
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2" ScaleY="1" />
<RotateTransform Angle="30" />
</TransformGroup>
</Rectangle.RenderTransform>
実際のサンプルは次のとおりです。
http://www.makoto3.net/xaml/silverlight0054/index.html
XAMLのソース全体を示します。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="../silverlight0043/bear.wmv" Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2" ScaleY="1" />
<RotateTransform Angle="30" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
なお、 <TransformGroup>～</TransformGroup>内の変形指定の順番を変えると、結果が異なる点に注意が必要 です。たとえば、上記サンプルの<TransformGroup>～</TransformGroup>内を、次のように書き換えたとします。
<TransformGroup>
<RotateTransform Angle="30" />
<ScaleTransform ScaleX="2" ScaleY="1" />
</TransformGroup>
すると、結果は次のようになります。
http://www.makoto3.net/xaml/silverlight0055/index.html
これは、最初に30度回転して、回転した状態で横に2倍に拡大するからです。
このページは
xfy Blog Editor
を利用して作成されました。
図形を移動するのが<TranslateTransform>です。移動なので、形は変化しませんが、移動しながら回転させるなど、複数の変形を組み合わせるとき必要になります（複数の変形の組み合わせについては 複数の変形を組み合わせる～TransformGroupを参照 ）。X属性で右方向、Y属性で下方向の移動距離を指定します。次は<TranslateTransform>のサンプルです。
http://www.makoto3.net/xaml/silverlight0052/index.html
ソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="../silverlight0043/bear.wmv" Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TranslateTransform X="100" Y="100"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
このページは
xfy Blog Editor
を利用して作成されました。
図形を傾けるには、<SkewTransform>を利用します。傾ける角度はAngleX属性とAngleY属性で指定します。サンプルを示します。
http://www.makoto3.net/xaml/silverlight0050/index.html
ソースは次とおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="../silverlight0043/bear.wmv" Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<SkewTransform AngleX="15" AngleY="15" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
また、<RotateTransform>と同様に、CenterX属性とCenterY属性で傾きの中心を変更することもできます。
このページは
xfy Blog Editor
を利用して作成されました。
図形をX方向(右方向)、Y方向(下方向)に拡大･縮小するのが<ScaleTransform>です。ScaleX属性でX方向、ScapeY属性でY方向の拡大・縮小率を指定できます。1.0より大きいと拡大、1.0より小さいと縮小です。次は、X方向に2倍に拡大したサンプルです。
http://www.makoto3.net/xaml/silverlight0049/index.html
サービスは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="../silverlight0043/bear.wmv" Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="2.0" ScaleY="1.0" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
なお、ScaleTransformにもCenterXとCenterY属性は用意されています。指定したらどうなるかは、、、試していません。
このページは
xfy Blog Editor
を利用して作成されました。
図形を回転するには<RotateTransform>を使います。回転角度宇はAngle属性で指定できます。次は、内部をビデオブラシで塗りつぶした四角形を、30度回転したサンプルです。
http://www.makoto3.net/xaml/silverlight0047/index.html
ソースは次の通りです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement"
Source="../silverlight0043/bear.wmv"
Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform Angle="30" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
回転の中心となるのは、四角形の左上です。楕円などのその他の図形についても、その図形を囲む四角形の左上が回転の中心となります。
回転の中心を変更するなら、CenterX属性とCenterY属性を指定します。次は、CenterXとCenterYを指定したサンプルです。
http://www.makoto3.net/xaml/silverlight0048/index.html
XAMLのソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="../silverlight0043/bear.wmv" Opacity="0" IsMuted="True" />
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
<Rectangle.Fill>
<VideoBrush SourceName="myMediaElement" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform Angle="30" CenterX="50" CenterY="50"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
CenterXとCenterYを指定することで、四角形の左上を基点に、右方向に50ピクセル、下方向に50ピクセルの位置を回転の中心にしています。
四角形の幅と高さは100ピクセルなので、四角形のちょうど真ん中が中心点となって30度回転することになります。
このページは
xfy Blog Editor
を利用して作成されました。
XAMLには、キャンバス上の図形、画像、文字を変形する機能が用意されています。利用できる変形は、次の4つです。
次は、四角形を30度回転させる指定例です。
<Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="black" Fill="red">
<Rectangle.RenderTransform>
<RotateTransform Angle="30" />
</Rectangle.RenderTransform>
</Rectangle>
このように、変形を行うときは変形したい図形のタグ内に、<～.RenderTransform>～</～.renderTransform>と書き、そのあいだに <RotateTransform Angle="30" /> といった変形の指定を書きます。
以降では、変形に関する以下の5つのトピックについてまとめます。なお、図形の変形を説明しますが、画像や文字（後述）も同じ方法で変形可能です。
このページは
xfy Blog Editor
を利用して作成されました。
ブラシの最後は、VideoBrushを紹介します。名前のとおり、図形内部をビデオで塗りつぶすブラシです。次がサンプルです。
http://www.makoto3.net/xaml/silverlight0043/index.html
XAMLファイルは次のとおりです。
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myMediaElement" Source="bear.wmv" Opacity="0" IsMuted="True" />
<Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
<Path.Fill>
<VideoBrush SourceName="myMediaElement" />
</Path.Fill>
</Path>
</Canvas>
VideoBrushを使うときは、まず使用するビデオを事前に読み込んでおきます。それが<MediaElement>です。Source属性でビデオファイルを指定したら、Opacityで0を指定して透明にし、見えなくしています。また、ビデオに音声が付いている場合は、音声が鳴らないようにIsMuted属性をTrueにして音声を消しています（ビデオを扱う<MediaElement>については、また改めて説明します）。
そして、x:Name属性で名前を付け、、その名前を<VideoBrush>タグのSourceName属性に指定しています。
なお、<MediaElement>タグを使って事前に読み込むビデオで幅や高さ、透明度などを指定しても、ブラシとしてのビデオには影響しません。
このページは
xfy Blog Editor
を利用して作成されました。
図形内部をグラデーションで塗りつぶすのが、次の2つのブラシです。
次は線形グラデーションであるLinearGradientBrushのサンプルです。
http://www.makoto3.net/xaml/silverlight0038/index.html
XAMLのソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
<Path.Fill>
<LinearGradientBrush>
<GradientStop Color="lime" Offset="0.0" />
<GradientStop Color="red" Offset="0.25" />
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="blue" Offset="0.75" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<LinearGradientBrush>～</LinearGradientBrush>のあいだに<GradientStop>タグを使って色の変化するポイントを指定します。Color属性で色、Offset属性で色の位置を0～1の小数点で指定します。
<LinearGradientBrush>にStartPoint属性やEndPoint属性を指定することで、 グラデーションの方向を変えることもできます。たとえば、上記サンプルの<LinearGradientBrush>タグを次のように変更したとします。
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
すると、表示は以下のようになります。
http://www.makoto3.net/xaml/silverlight0039/index.html
円形のグラデーションのサンプルも紹介しましょう。
http://www.makoto3.net/xaml/silverlight0040/index.html
XAMLファイルは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
<Path.Fill>
<RadialGradientBrush>
<GradientStop Color="lime" Offset="0.0" />
<GradientStop Color="red" Offset="0.25" />
<GradientStop Color="yellow" Offset="0.5" />
<GradientStop Color="blue" Offset="0.75" />
<GradientStop Color="white" Offset="1.0" />
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<RadialGradientBrush>～<RadialGradientBrush>のあいだに<GradientStop>タグで色と色が変化するポイントを指定するのは、線形グラデーションとまったく同じです。グラデーションの中心は初期設定では図形の中心となります。
なお、GradientOrigin、Center、RadiusX、RadiusYなどの属性を設定することで、グラデーションの開始位置や方向などをカスタマイズ可能です。たとえば、上記サンプルの<RadialGradientBrush>タグを次のように変更したとします。
<RadialGradientBrush GradientOrigin="1,1">
すると、表示は次のようになります。
http://www.makoto3.net/xaml/silverlight0041/index.html
各属性の詳細は、Silverlight 1.0 SDKのヘルプに載っていますので、興味のある方は調べてみてください。
このページは
xfy Blog Editor
を利用して作成されました。
次は図形内を画像で塗りつぶすブラシ ImageBrushです。まずは、ImageBrushのサンプルからどうぞ。
http://www.makoto3.net/xaml/silverlight0037/index.html
XAMLのソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
<Path.Fill>
<ImageBrush ImageSource="sea01.jpg"/>
</Path.Fill>
</Path>
</Canvas>
書き方は、先のSolidColorBrushと同じです。画像ファイルのurlは<ImageBrush>タグのImageSource属性に指定します。このサンプルでは、XAMLファイルと同じディレクトリに画像を置いてあるので、画像ファイルのみを指定してあります。
なお、ImageBrushには、Stretchという属性が用意されていて、指定によって次のような違いがあります。
|
Stretch属性の値 |
意味 |
|
None |
画像をオリジナルサイズのまま表示します。 |
|
Uniform |
画像全体が図形内にすべて表示されるように自動的にサイズを調整します。オリジナルの縦横比率は保たれます。 |
|
UniformToFill |
画像の縦または横が図形にぴったり合うようにサイズを調整します。画像の縦横比率は保たれます。 |
|
Fill |
画像の縦と横を図形に合うように自動的に調整します。画像の縦横比率は保たれません。 |
せっかくなので、Stretchの指定によって画像がどう変化するかを確認するサンプルも作ってみました。
http://www.makoto3.net/xaml/silverlight0046/index.html
画像をクリックするとStretchの値が順番に切り替わりますので、試してみてください。
このページは
xfy Blog Editor
を利用して作成されました。
まずは、指定した色で均一に塗りつぶすSolidColorBrushを説明します。次がSolidColorBrushのサンプルです。
http://www.makoto3.net/xaml/silverlight0036/index.html
XAMLのソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
<Path.Fill>
<SolidColorBrush Color="navy"/>
</Path.Fill>
</Path>
</Canvas>
この例では、<Path>を使って矢印を描き、その内部をSolidColorBrushで紺色（navy）で塗りつぶしています。<Path>の開始タグではFill属性は指定せず、<Path.Fill>～</Path.Fill>のあいだに<SolidColorBrush>タグを挿入し、Color属性で色を指定しています。
指定そのものはFill属性を使った方が簡単ですが、以降に説明する画像やグラデーションのブラシを指定する際の基本形となりますので、このパターンに慣れた方が、応用はきくはずです。
このページは
xfy Blog Editor
を利用して作成されました。
XAMLで描いた図形内部を塗りつぶす最も簡単な方法は、Fill属性を指定するみとです。たとえば、四角形の内部をオレンジ色で塗りつぶすなら、次のように書けばよいわけです。
<Rectangle Height="80" Width="80"
Canvas.Left="100" Canvas.Top="100" Fill="orange" />
ただし、これにはもう1つの書き方があります。次が、その書き方です。
<Rectangle Height="80" Width="80"
Canvas.Left="100" Canvas.Top="100"/>
<Rectangle.Fill>
<SolidColorBrush Color="orange" />
</Rectangle.Fill>
</Rectangle>
この第二の書き方ではFill属性は使いません。代わりに、<Rectangle>～</Rectangle>と開始タグと終了タグのあいだに、<Rectangle.Fill>～</Rectangle.Fill>を挿入し、そのあいだに
ブラシ
を記述します。ブラシにはいくつかの種類がありますが、上の例では指定した単色で塗りつぶす単色ブラシを使用しています。次がその指定です。
<SolidColorBrush Color="orange" />
このように、Fill属性を使わないで、次のようなパターンでブラシを指定することで、さまざまな塗りつぶしが可能になります。
<図形>
<図形.fill>
ブラシの記述
</図形.fill>
<図形>
以降では、次のようなブラシについて、その指定方法を説明します。
このページは
xfy Blog Editor
を利用して作成されました。
描画ではありませんが、簡単なので画像表示の方法も、ここでまとめておきます。サンプルは次のとおりです。
http://www.makoto3.net/xaml/silverlight0035/index.html
ソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="sea01.jpg" Width="200" Canvas.Top="20" Canvas.Left="20"/>
<Image Source="sea02.jpg" Width="200" Canvas.Top="120" Canvas.Left="80" Opacity="0.5"/>
</Canvas>
画像ファイルはSource属性で指定できます。上のサンプルで使った属性もまとめます。特に難しい点はないと思います。
|
Source |
画像ファイル |
|
Width |
画像の幅 |
|
Height |
画像の高さ |
|
Canvas.Top |
キャンバス上端からの画像の距離 |
|
Canvas.Left |
キャンバス左端からの画像の距離 |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
このページは
xfy Blog Editor
を利用して作成されました。
1つ1つの点を指定して曲線や直線を描くのが<Path>です。点はData属性で指定します。たとえば、次は(10,10)から(100,100)に幅10ピクセルの青い線を引く記述です。
<Path Data="M 10,10 L 100,100" Stroke="blue" StrokeThickness="10" />
Mは「移動」を意味し、Lは直線を意味します。つまり、上記は(10,10)に移動し、そこから(100,100)まで直線を引けという意味になります。
ベジェ曲線も引けます。ベジェ曲線を引くときは、「S 制御点 終点」の形式で制御点と終点を指定します。次はその例です。
<Path Data="M 10,100 S 50,200 100,100" Stroke="lime" StrokeThickness="5" />
この場合、(10,100)に移動し、そこから(50,200)を制御点とし、終点を(100,100)とするベジェ曲線を引きます。
またData属性の最後に Z を指定すると、自動的に始点と終点が結ばれて図形が閉じます。その場合は、Fill属性で塗りつぶしの色を指定することが可能です。
以下に<Path>のサンプルを示します。
http://www.makoto3.net/xaml/silverlight0034/index.html
以下がXAMLのソースです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Data="M 10,10 L 10,90 90,90" Stroke="blue" StrokeThickness="10" />
<Path Data="M 110,10 L 110,90 190,90 190,10" Stroke="red" StrokeThickness="5" />
<Path Data="M 200,10 L 250,90 290,10" Stroke="green" StrokeThickness="5" />
<Path Data="M 10,100 S 50,200 100,100 Z" Stroke="lime" StrokeThickness="5" />
<Path Data="M 100,100 S 150,250 200,100Z" Stroke="crimson" StrokeThickness="8" Fill="gold"/>
<Path Data="M 200,100 S 250,400 300,100" Stroke="navy" StrokeThickness="5" />
<Path Data="M 10,200 S 50,300 100,200 150,250 200,280 250,150 300,10" Stroke="purple" StrokeThickness="10" />
<Path Data="M 10,280 S 50,100 100,200 200,200 300,280" Stroke="white" StrokeThickness="15" Opacity="0.8"/>
</Canvas>
上のサンプルで使用した属性をまとめておきます。なお、<Path>そのものは、ミニ言語と呼んでよいくらいさまざまな指定が可能のようです。より詳細なトピックはSilverlight 1.0 SDKのヘルプに載っていますので、参考にしてください。。
|
Data |
自由曲線の描画点や制御点。
|
|
Stroke |
線の色 |
|
StrokeThickness |
線の太さ |
|
Fill |
図形内部を塗りつぶす色（図形が閉じている場合） |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
このページは
xfy Blog Editor
を利用して作成されました。
<Polyline> の始点と終点を自動的につないで多角形を描くのが<Polygon>です。用意されている属性は<Polyline>とほぼ同じですが、内部を塗りつぶすFill属性を指定できるのが、<Polyline>との違いです。次はサンプルです。
http://www.makoto3.net/xaml/silverlight0033/index.html
ソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polygon Points="10,10 10,80 80,80"
Stroke="green" StrokeThickness="5" Fill="red" />
<Polygon Points="110,10 110,80 180,80 180,10"
Stroke="blue" StrokeThickness="10" Fill="skyblue" />
<Polygon Points="210,10 245,80 290,10"
Stroke="crimson" StrokeThickness="5" Fill="yellow" />
<Polygon Points="10,110 10,180 45,155 80,180 80,110"
Stroke="gray" StrokeThickness="8" Fill="white" />
<Polygon Points="140,118 200,118 230,170 200,222 140,222 110,170"
Stroke="navy" StrokeThickness="15" Fill="orange" />
<Polygon Points="110,88 170,88 200,140 170,192 110,192 80,140"
Stroke="red" StrokeThickness="15" Fill="black" Opacity="0.3" />
<Polygon Points="10,200 10,280 100,280 100,250 150,200"
Stroke="green" StrokeThickness="15" />
<Polygon Points="150,150 150,280 280,280 280,100"
Stroke="pink" StrokeThickness="10"
Canvas.ZIndex="-1" Fill="black" />
</Canvas>
サンプルで使用した属性は次のとおりです。
|
Points |
多角形の頂点。X1,Y1 X2,Y2 X3,Y3……の形式で指定する。 |
|
Stroke |
線の色 |
|
StrokeThickness |
線の太さ |
|
Fill |
図形内部を塗りつぶす色 |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
なお、Fillを指定しない場合は透明になるようです（Fill="transparent"と同じ）。
このページは
xfy Blog Editor
を利用して作成されました。
折れ線を描くには<Polyline>を使います。始点、線を折る位置、終点をPoints属性にXY座標を半角スペースで区切って次のように指定します。
Points="X1,Y1 X2,Y2 X3,Y3……"
サンプルは次のとおりです。
http://www.makoto3.net/xaml/silverlight0032/index.html
ソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polyline Points="0,10 30,50 60,10 90,50 120,10 150,50 180,10 210,50 240,10 270,50" Stroke="gold" StrokeThickness="5"/>
<Polyline Points="0,100 100,150 200,100 300,150"
Stroke="red" StrokeThickness="20"/>
<Polyline Points="10,150 10,200 50,200 50,150 100,150 100,200 150,200 150,150 200,150 250,200" Stroke="blue" StrokeThickness="15" Canvas.ZIndex="-1" />
<Polyline Points="10,250 250,10 250,300 50,50 280,50 50 280" Stroke="lime" StrokeThickness="30" Opacity="0.3" />
</Canvas>
サンプルで使用してある属性は次のとおりです。
|
Points |
始点、折れ線の折る位置、終点をX1,Y1 X2,Y2 X3,Y3……の形式で指定する。 |
|
Stroke |
線の色 |
|
StrokeThickness |
線の太さ |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
このページは
xfy Blog Editor
を利用して作成されました。
直線を描画するのが<Line>です。<Line>では、始点をX1とY1、終点をX2とY2で指定します。原点はキャンバス左上で、右方向がX、下方向がYとなります。以下に<Line>のサンプルを示します。
http://www.makoto3.net/xaml/silverlight0031/index.html
XAMLのソースは次のとおりです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Line X1="10" Y1="10" X2="100" Y2="100"
Stroke="black" StrokeThickness="5"/>
<Line X1="110" Y1="10" X2="200" Y2="100"
Stroke="red" StrokeThickness="10" Opacity="0.5"/>
<Line X1="210" Y1="10" X2="300" Y2="100"
Stroke="blue" StrokeThickness="1"/>
<Line X1="10" Y1="110" X2="100" Y2="200"
Stroke="crimson" StrokeThickness="15"/>
<Line X1="110" Y1="110" X2="200" Y2="200"
Stroke="navy" StrokeThickness="30"/>
<Line X1="210" Y1="110" X2="300" Y2="200"
Stroke="purple" StrokeThickness="8"/>
<Line X1="10" Y1="210" X2="100" Y2="300"
Stroke="silver" StrokeThickness="10"/>
<Line X1="210" Y1="250" X2="100" Y2="280"
Stroke="lime" StrokeThickness="10"/>
<Line X1="210" Y1="210" X2="300" Y2="300"
Stroke="cyan" StrokeThickness="5"/>
<Line X1="280" Y1="10" X2="10" Y2="280"
Stroke="gold" StrokeThickness="30" Opacity="0.3"/>
</Canvas>
主な属性は次のとおりです。
|
X1 |
始点のX座標 |
|
Y1 |
始点のY座標 |
|
X2 |
終点のX座標 |
|
Y2 |
終点のY座標 |
|
Stroke |
線の色 |
|
StrokeThickness |
線の太さ |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、ブラス値だと上) |
このページは
xfy Blog Editor
を利用して作成されました。
円を描くには<Ellipse>を使います。使用できる属性は、四角形の<Rectangle>からRadiusXとRadiusYをのぞいたものと考えるとよさそうです（<Ellipse>でRadiusXとRadiusYを指定するとエラーになります）。以下は、<Ellipse>のサンプルです。
http://www.makoto3.net/xaml/silverlight0030/index.html
以下、XAMLのソースです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="80" Width="80"
Canvas.Left="15" Canvas.Top="15"
Stroke="red" StrokeThickness="10" Fill="blue"/>
<Ellipse Height="80" Width="80"
Canvas.Left="110" Canvas.Top="15"
Stroke="yellow" StrokeThickness="10" Fill="transparent"/>
<Ellipse Height="80" Width="80"
Canvas.Left="205" Canvas.Top="15"
Stroke="purple" StrokeThickness="5" Fill="pink"/>
<Ellipse Height="80" Width="80"
Canvas.Left="15" Canvas.Top="110"
Stroke="black" StrokeThickness="20" Fill="slateblue" />
<Ellipse Height="80" Width="80"
Canvas.Left="110" Canvas.Top="110"
Fill="skyblue" />
<Ellipse Height="80" Width="80"
Canvas.Left="205" Canvas.Top="110"
Fill="red" />
<Ellipse Height="80" Width="80"
Canvas.Left="15" Canvas.Top="205"
Stroke="green" StrokeThickness="10" Fill="lime" Opacity="0.1"/>
<Ellipse Height="80" Width="80"
Canvas.Left="110" Canvas.Top="205"
Stroke="#8888ff" StrokeThickness="3" Fill="#99ff99" />
<Ellipse Height="80" Width="80"
Canvas.Left="205" Canvas.Top="205" Fill="#44ff0000" />
</Canvas>
主な属性は次のとおりです。
|
Width |
円の幅 |
|
Height |
円の高さ |
|
Canvas.Left |
キャンバス左端からの距離 |
|
Canvas.Top |
キャンバス上端からの距離 |
|
Stroke |
円の線の色 |
|
StrokeThickness |
円の線の太さ |
|
Fill |
円の塗りの色 |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
なお、サンプルでは正円だけ描いていますが、WidthとHeightの値を変えれば、もちろん楕円も描けます。
このページは
xfy Blog Editor
を利用して作成されました。
ここからしばらくは、JavaScriptからは少し離れて、XAMLによる描画についてまとめようと思います。基本的な図形を描きたいときのリファレンス的な扱いです。ソースもXAMLファイルだけを示します。まずは、Rectangleによる四角形の描画から。サンプルは↓です。
http://www.makoto3.net/xaml/silverlight0029/index.html
以下、XAMLのソースです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="15"
Stroke="crimson" StrokeThickness="10" Fill="navy"
RadiusX="0" RadiusY="0" />
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="15"
Stroke="blue" StrokeThickness="10" Fill="Transparent"
RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="15"
Stroke="red" StrokeThickness="10" Fill="pink"
RadiusX="20" RadiusY="20" />
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="110"
Stroke="black" StrokeThickness="10" Fill="slateblue"
RadiusX="20" RadiusY="20" Opacity="0.5"/>
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="110"
Fill="green" RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="110"
Fill="orange" RadiusX="10" RadiusY="30" />
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="205"
Stroke="green" StrokeThickness="10" Fill="lime"
RadiusX="0" RadiusY="0" />
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="205"
Stroke="#8888ff" StrokeThickness="10" Fill="#ff2288"
RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="205"
Stroke="crimson" StrokeThickness="10" Fill="#440000ff"
RadiusX="5" RadiusY="5" />
</Canvas>
サンプルで使用した属性は次のとおりです。
|
Width |
四角形の幅 |
|
Height |
四角形の高さ |
|
Canvas.Left |
キャンバス左端からの距離 |
|
Canvas.Top |
キャンバス上端からの距離 |
|
Stroke |
四角形の線の色 |
|
StrokeThickness |
四角形の線の太さ |
|
Fill |
四角形の塗りの色 |
|
RadiusX |
四角形の角の丸み(X方向) |
|
RadiusY |
四角形の角の丸み(Y方向) |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
重ねたときはCanvas.ZIndexによる重なり順も指定できるようです（Z と I は大文字なので注意）。また、色にTransparentを指定すると透明になること、色名の他に6桁の16進数表記（例：#ff88ff）も指定できること、8桁で指定すると、最初の2桁で透明度を指定できること（例：#440000ff）なども覚えておくと便利そうです。
このページは
xfy Blog Editor
を利用して作成されました。
現在、Silverlightは1.0が正式公開され、1.1が開発中です。1.1のリリース時期は2008年第一四半期と言われていて、リリース時には2.0に名称変更される予定です。
Silverlight1.1は以下のページからダウンロードできます。
というわけで、Silverlight1.1を入れても1.0用に作ったサンプルは動くとばかり思い込んでいて、上記サイトから1.1をインストールしたら、1.0用のデータのあるページを表示したとき、「Silverlightをダウンロードしてね」という以下ののロゴが表示されるようになってしまいました。
現在のところ、1.1は1.0への下位互換性を持っていないということかと思います（正式公開時には、そんなことはないと思いますが……）。で、上のロゴをクリックしてSilverlight1.0をインストールしようとしたら、次のようなメッセージが出て、エラーに！
ということで、せっかく作ったSilverlight用の1.0のデータが見られなくなったので「弱ったなぁ」と思い、数時間、試行錯誤して解決した結果をレポートします。似たようなトラブルにあった方の参考になればと思います。
結論から先に書けば、1.1をアンインストールしてから1.0をインストールします。なお、使用OSはVista Ulitimateです。
▼1.［スタート－コントロールパネル－プログラムのアンインストール］で［プログラムのアンインストールと変更］のウィンドウを開きます。
▼2.プログラムの一覧で「Microsoft Silverlight」を選択し、［アンインストール］ボタンをクリックします。
▼3.このあと、Silverlight1.0のデータがあるWebページを表示し、ロゴをクリックすればインストールされます。または、以下のページでダウンロードしてもオッケーです。
http://www.microsoft.com/japan/silverlight/default01.aspx
操作はこれだけですが、ちょっと迷ったのは、Silverlightが、［スタート－コントロールパネル－プログラム－インストールされている更新ブログラム］を選択しても表示されることです。
上記操作で開くウィンドウには、サービスパック等を初めとするWindowsの更新プログラムが一覧表示されますが、以下のように、Silverlightも表示されます。
▼更新プログラムの一覧（Silverlight 1.0）
▼更新プログラムの一覧（Silverlight 1.1）
で、最初、ここでアンインストールしようとしたのですが、選択すると、ツールバーの［アンインストール］ボタンが消えてしまい、アンインストールできなかったのでした。
ということで、Silverlightをアンインストールするときは、Officeなどの一般的なWindowsアプリケーションをアンインストールするウィンドウで行う必要があるようです。
なお、繰り返しになりますが、Silverlight1.1（リリース時にはSilverlight2.0）が正式公開されれば、この問題は解決して1.0のデータも1.1（2.0）で見られるようになるのではないかと思います（というか、でないと困るわけですが）。
このページは
xfy Blog Editor
を利用して作成されました。
"Silverlightの領域をdocument.bodyからdiv内に閉じ込める"の最後のサンプルがFirefoxで動かないのを修正する で、XAMLで書いた四角形をIE7とFirefoxで表示するサンプルを作成しました。念のため、サンプルは これ です。このサンプルでは、HTMLファイル、XAMLファイル、JSファイル（JavaScriptの外部ファイル）を使っていますが、JavaScriptは、Silverlightプラグインの領域をHTMLファイル中に確保し、四角形を描くXAMLを呼び出す、という役割しか果たしていません。JavaScriptが得意とする処理、たとえばマウスの動きによって色を変えるといった処理は、まだ用意されていません。というわけで、ここでは、その処理を追加してみます。具体的には、 このサンプル に次の4つの動きを追加します。
この4つの処理を行うために、myScript.jsという外部JavaScriptファイルを1つ追加しますので、必要なファイルはぜんぶで5つになります（index.html、Silverlight.js、createSilverlight.js、myScript.js、myxaml.xaml）。 先のサンプル から変更した箇所は赤で記しました。
【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>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【myScript.js】
function myFunc1(sender,args) {
sender.stroke="Cyan";
}
function myFunc2(sender,args) {
sender.stroke="Crimson";
}
function myFunc3(sender,args) {
sender.fill="Orange";
}
function myFunc4(sender,args) {
sender.fill="navy";
}
【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"
MouseEnter="myFunc1"
MouseLeave="myFunc2"
MouseLeftButtonDown="myFunc3"
MouseLeftButtonUp="myFunc4"
/>
</Canvas>
index.htmlを読み込むと、次のように表示されます。
http://www.makoto3.net/xaml/silverlight0026/index.html
スクリプトを呼び出すきっかけ（マウスがのったとき、左ボタンを押したとき……等々。一般に「イベントハンドラ」と言います）は、myxaml.xamlの<Rectangle>タグに書いています。MouseEnterがマウスがのったとき、MouseLeaveがマウスが離れたとき、MouseLeftButtonDownがマウスの左ボタンが押されたとき、MouseLeftButtonUpが押した左ボタンを離したとき、を意味しています。
そして、各イベントハンドラのあとにイコール（=）を書き、続けて呼び出す関数をダブルクォーテーション（"）またはシングルクォーテーション（'）で括って書きます。HTMLファイル中に書く一般的なJavaScriptのように、呼び出す関数に括弧を付けない点に注意してください（○MouseEnter="myFunc1" ×MuuseEnter="myFunc()"）。
関数の定義はmyScript.jsで行っています。たとえば関数myFunc1の定義は次のとおりです。
function myFunc1(sender,args) {
sender.stroke="Cyan";
}
第一引数のsenderは、関数の呼び出し元です。この場合ならRectangleです。第二引数のargsはイベントが起きたときのマウス位置を取得できるらしいのですが、まだ検証していません（ということで、argsはここでは無視ということで）。
定義の中身は、senderつまりRectangleのstrokeプロパティをCyanに変える、というだけです。他の関数も仕組みはまったく同じで、strokeだと線の色、fillだと塗りつぶしの色という違いがあるだけです。
また、4つの関数はmyScript.jsという新たに追加した外部ファイル中で定義しているので、index.htmlのヘッダには次の1行も追加しています。
<script type="text/javascript" src="myScript.js"></script>
以上がだいたいの仕組みです。これから、いろんなサンプルを作ってみるつもりですが、基本的な仕組みは、今回のサンプルにすべて含まれています。
極端に言えば、あとは、XAMLファイルとJSファイル（この例ならmyScript.js）の内容が変化したり、複雑になったりするだけです。
XAMLには、図形を描くだけでなく、図形や画像を変形したり、塗りつぶしたり、アニメーションさせたりといった機能があるので、XAMLでこうした記述を行い、必要に応じてJavaScriptでコントロールするというのが、基本的な考え方です。
というわけで、せっかくなのでXAMLでアニメーションを記述し、JavaScriptで、そのアニメーションをスタートさせる、というサンプルを作ってみました。
http://www.makoto3.net/xaml/silverlight0028/index.html
四角形をクリックすると時計回りに90度回転します。とりあえず、このサンプルを構成する5つのファイルをすべて表示します。
【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>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myScript.js】
function myAnime(sender,args) {
sender.findName("myStoryboard").begin();
}
【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"
MouseLeftButtonDown="myAnime">
<Rectangle.RenderTransform>
<RotateTransform Angle="0" CenterX="50" CenterY="50" x:Name="myRotate"/>
</Rectangle.RenderTransform>
</Rectangle>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myRotate"
Storyboard.TargetProperty="Angle"
From="0" To="90" Duration="0:0:0.5" />
</Storyboard>
</Canvas.Resources>
</Canvas>
詳細は、また改めて説明しますが、四角形を回転させているのはXAMLであって、JavaScriptではありません。myScript.jsを見ると分かりますが、ここでは、次のようなmyAnime関数を定義しているだけです。
myAnime(sender,args) {
sender.findName("myStoryboard").begin()
}
そして、四角形がクリックされたとき、このmyAnime関数を呼び出して、XAMLで記述してあるアニメーションをスタートしている（begin()メソッドを実行している）だけです。
JavaScriptに詳しいと、位置や色などを変化させるとき「では、JavaScriptを使って！」と考えがちですが、Silverlightの場合、そういうケースは少なそうです。というのは、アニメーションの仕掛けはXAML側にあるので、アニメーションはXAMLで書いておき、JavaScript側でそのアニメーションをスタートしたり、ストップしたりするケースが多いからです。
その意味では、SilverlightでJavaScriptが果たす役割は必要最小限、という言い方もできると思います。
このページは
xfy Blog Editor
を利用して作成されました。
Silverlightの領域をdocument.bodyからdiv内に閉じ込める では最終的に作成したサンプルは これ です。これ、IE7では動きますが、Firefoxでは動きません。最初、原因がわからなかったのですが、何とかわかりました。まず、先の例では、index.html中に次のような指定を追加しました。
<div id=" silverlightBlock "></div>
そして、createSilverlight.jsのcreateMySilverlightPlugin()関数定義で、作成場所として silverlightBlock を指定しました。次のように、です。
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
silverlightBlock
,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
これで、id名がsilverlightBlockであるdivブロックがSilverlight領域の作成場所になると書きましたが、これが通用するのはIE7だけだったみたいです。FirefoxはIE7のように融通が利かないみたいで、id名だけでは場所を認識してくれません。具体的には、次のようにJavaScriptのgetElementById()メソッドを使って、id名のオブジェクトへの参照をキチンと変数に格納し、その変数をcreateMySilverlightPlugin()の関数定義中で指定する必要があります。
var 変数 = document.getElementById("silverlightBlock");
というわけで、 Firefoxで動かなかったサンプル は、全体を少し修正する必要があります。修正後の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>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",
parenetElement
,"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を読み込んだ結果が↓です。今度は、IE7でもFirefoxでも動くはずです。
http://www.makoto3.net/xaml/silverlight0025/index.html
Firefoxで動かなかったサンプル では、<body>のonloadでcreateMySilverlightPlugin()関数を呼び出していましたが、こちらの方法ではそれをやめて<body>～</body>内にスクリプトを入れています。
HTMLファイルは上から下にレンダリングされていきますから、id名がsilverlightBlockの<div>が読み込まれたあと、次のスクリプトを実行し、このdivオブジェクトへの参照を変数parentElementに格納しています。
var parentElement = document.getElementById("silverlightBlock");
そして、そのあとでcreateMySilverlightPlugin()関数を実行しています。
createSilverlight.jsに書いてあるcreateMySilverlightPlugin()関数の定義では、Silverlightの作成場所として変数のparentElementを指定しているので、<div id="silverlightBlock">～</div>内にSilverlightプラグインが作成されることになります。
というわけで、何とか、IE7でもFirefoxでも動くSilverlightの書き方にたどり着けました。
このページは
xfy Blog Editor
を利用して作成されました。
確保した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
を利用して作成されました。
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
を利用して作成されました。
Silverlightの領域を確保する の手順で領域を確保したら、次に確保した領域上に図形を描いてみます。ここで登場するのが、XAML（ザムル）です。使用するファイルは次の4つです。
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
を利用して作成されました。
Silverlightを作成するには、複数のファイルが必要です。必要最小限のファイルは次の3つです。
ファイル名は、各ファイル間の整合性がとれていれぱ自由に付けてかまいません。後述しますが、このうちSilverlight.jsはMicrosoft Silverlight 1.0 Software Development Kit（通称、Silverlight 1.0 SDK ）をインストールすると、そこに含まれているものです。
では、さっそく3つのファイルを示して、具体的な表示方法を紹介します。なお、以下ではまだXAML（ザムル）は出てきません。結論から先に書くと、以下の3つのファイルを行うのは、Silverlightプラグインの領域を確保するだけです。確保した領域に円や四角、画像や動画を表示するとき、XAMLを使うことになります。
【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("",document.body,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【 Silverlight.js 】（そのまま使うので内容省略）
SilverlightのSDKに含まれるJSファイルをそのまま使います。中身は一切、編集しません。入手する場合は、上のリンクをクリックしてください。
以上の3つのファイルを同一フォルダに置き、index.htmlをブラウザ（Silverlightをインストールしてあれば、IEでもFirefoxでも可）に読み込みます。セキュリティに警告が出たら、許可を与えてください。次が実際の表示です。
http://www.makoto3.net/xaml/silverlight0020/index.html
まず、index.htmlには、Silverlight.jsとcreateSilverlight.jsの2つの外部スクリプトファイルが指定されています。Silverlight.jsは、SDKに含まれるものをそのまま使うので、内容はここでは無視します。"決まり事"ととらえればOKです。
createSilverlight.jsについては、先に示したソースのとおりで、createMySilverlightPlugin()という関数を1つ定義しているだけです。引数の説明をざっとします。最初の""はXAMLファイルを指定するのですが、ここではまだ何も指定してないので空欄です。2番目はSilverlightプラグインを作成する位置を示しています。document.bodyなので、Webページのボディ部に作成されます。次の"firstsample"は、作成するSilverlightプラグインの名前です。次の{ }内は幅、高さ、背景色、バージョンの指定です。最後の{ }内はエラー処理で、nullを指定すると「デフォルト設定の従う」という意味になるそうです。
index.htmlを読み込むと、<body>のonloadイベントハンドラによってcreateMySilverlightPlugin()関数が呼び出され、引数の指定にしたがって、Silverlightプラグインの領域が確保されます。引数で指定してあるとおり、幅300px、高さ300px、背景色がlavenderとなります。
以上、Silverlightの領域を確保する、最もシンプルな例を紹介しました。
このページは
xfy Blog Editor
を利用して作成されました。
JavaScriptでSilverlight | JavaScriptでSilverlight2 | xfy | パソコン・インターネット | ブログ用スクリプト | 一太郎、ATOK | 年金 | 日記・コラム・つぶやき | 書籍・雑誌
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
最近のコメント