MAKOTO3.NET Blog

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  を利用して作成されました。