Silverlight 開発入門（続き）

Silverlight 開発入門 - mallowlabsの備忘録
で Hello world を作ったので
今回はもうちょっとまともなアプリを作ってみる。

といっても Silverlight はよくわからないので
画像の拡大・縮小・回転ができるだけのアプリにした。

こんな感じ

ディレクトリ構成は
index.html
app/
- app.xaml
- app.js
- image.png

index.html は前回と一緒。

app.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.UserControl"
    x:Name="JSSample1">
  <Canvas>
    <Image Source="image.jpg"
           Width="367" Height="480" Canvas.Left="150" Canvas.Top="10" x:Name="image" >
      <Image.RenderTransform>
        <TransformGroup>
          <RotateTransform Angle="0" CenterX="183" CenterY="240" x:Name="angle" />
          <ScaleTransform ScaleX="1.0" ScaleY="1.0" x:Name="zoom" />
         </TransformGroup>
      </Image.RenderTransform>
    </Image>
    <Button Content="Rotate Left" Canvas.Left="660" Canvas.Top="80" Width="100" x:Name="left"  />
    <Button Content="Rotate Right" Canvas.Left="780" Canvas.Top="80" Width="100" x:Name="right" />
    <Button Content="Zoom In" Canvas.Left="720" Canvas.Top="110" Width="100" x:Name="zin"  />
    <Button Content="Zoom Out" Canvas.Left="720" Canvas.Top="140" Width="100" x:Name="zout" />
  </Canvas>
</UserControl> 

画像の回転をするために Image 要素の下に
Image.RenderTransform というのを仕込むらしい。

app.js

Import("System.Windows.Application") 
Import("System.Windows.Controls.UserControl") 
//Import("System.Windows.Browser.HtmlPage")

function sample_app() { 
    this.scene = Application.Current.LoadRootVisual(
        new UserControl(), "app.xaml"); 
} 
sample_app.prototype = { 
    start:function() {
        var self = this;
        this.scene.right.click += function(sender, args) {
           self.scene.angle.Angle += 10;
        }
        this.scene.left.click += function(sender, args) {
           self.scene.angle.Angle -= 10;
        }
        this.scene.zin.click += function(sender, args) {
           self.scene.zoom.ScaleX += 0.1;
           self.scene.zoom.ScaleY += 0.1;
        }
        this.scene.zout.click += function(sender, args) {
           self.scene.zoom.ScaleX -= 0.1;
           self.scene.zoom.ScaleY -= 0.1;
        }
        //HtmlPage.Window.alert(self.scene.zoom.ScaleX.toString());
    }
} 

app = new sample_app; 
app.start();

JavaScript の書き方がホントわからなかった。
XAML で id をつけた要素は
sample_app.scene の下にプロパティができるので
そこからアクセスすることはできるけど
なんか違うような気もする。
とりあえず動いてるからいいのかも…ダメ？

コメントアウトしてる行を戻すと
Alert で値を出すことができるから
デバッグにお勧め！
でも今時こんなデバッグはありえないので
きっとみんな C# で書くべきだと思う。