MAKOTO3.NET Blog

では、先ほどと同じ 四角形をクリックすると塗りつぶしの色を赤に変えるサンプル を、もう少し詳しく見ていきます。ここで取り上げるのは、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つです。

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に慣れている場合は、次のような違いに注意するとよいと思います。

• XAMLでは専用のイベントハンドラを利用し、HTMLファイルで使用する onclick や onmouseenter などのイベントハンドラは利用できない。
• イベントハンドラに続けて指定する関数には、括弧を付けない

それ以外は、基本的なJavaScriptの知識さえあれば、XAMLで使用するスクリプトは、特に問題なく書けると思います。

<< JavaScriptでSilverlight 目次  >>

このページは xfy Blog Editor  を利用して作成されました。