MAKOTO3.NET Blog

スクリプトを使えば、変形方法を制御することもできます。以下は、マウスポインタをのせると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  を利用して作成されました。