Silverlight animasyonları içerisindeki nesnelerin dinamik olarak kullanıcılar tarafından boyutlandırılmasını sağlayabilirsiniz. Bunun için de tabi ki en hızlı yol kullanıcıya fare ile herhangi bir nesneyi tutarak büyütüp küçültme şansı tanımaktır. Bu makalemizde bu çeşit bir işlevselliği nasıl oluşturabileceğimizi inceleyeceğiz.

Yeni bir Silverlight projesi oluşturarak sahneye deneme amaçlı olarak bir Rectangle nesnesi yerleştirelim. Amacımız kullanıcıların bu nesneye tıklayarak dikdörtgeni fare ile büyütüp küçültebilmelerini sağlamak. Dikdörtgene tıkladıktan sonra fare ile nesneden uzaklaştıkça çizim büyüyecek, nesnenin sol üst köşesine yaklaştıkça dikdörtgen küçülecek.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"

  Background="White"

  x:Name="Page"

  >

  <Rectangle MouseLeftButtonDown="FareGeldi" MouseMove="FareHareketli" MouseLeftButtonUp="FareGitti" Width="249" Height="237" Fill="#FFFF0000" Stroke="#FF000000" Canvas.Left="86" Canvas.Top="36"/>

</Canvas>

Yukarıdaki şekliyle Silverlifght animasyonumuzu hazırlıyoruz. XAML kodumuz içerisinde bir dikdörtgen bulunuyor. Bu dikdörtgen yerine siz örneklerinizde MediaElement gibi içerisinde video oynayan nesneler de kullanabilirsiniz. Dikdörtgenimize tıklandığında büyüme ve küçülme işlemleri olacağı için dikdörtgenin MouseLeftButtonDown, MouseMove ve MouseLeftButtonUp durumlarına ayrı ayrı JavaScript fonksiyonları yazmamız gerekiyor. Gelin tek tek bu fonksiyonları yazmaya başlayalım.

var FareBasili;

var SonDurum = {};

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

İlk olarak fareye ilk tıklandığında çalıştırılacak olan FareGeldi fonksiyonunu yazıyor. Söz konusu fonksiyon içerisinde farenin durumunu global olarak yakalayabilmemizi sağlayacakolan captureMouse metodunu çağırdıktan sonra FareBasili adında düzenlemiş olduğumuz global değişkenin değerini true olarak değiştiriyoruz. Böylece bir sonraki adımda fare hareketini yakalarken büyütme işlemi başlatılmış mı yoksa başlatılmamış mı kontrolünü yapabileceğiz. Son olarak da farenin sahnedeki konumunu yine global değişkenimiz olan SonDurum değişkenine aktarıyoruz.

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

Dikdörtgen nesnesi üzerinde fare hareket ettikçe tetiklenecek olan MouseMove durumuna bağlı FareHareketli fonksiyonu içerisinde ilk olarak dikdörtgene basılarak herhangi bir büyütme veya küçültme işleminin başlatılıp başlatılmadığı kontrol etmek için FareBasili değişkeninin değerine bakıyoruz. Eğer öncesinde bir büyütme işlemi başlatılmış ise gerekli değişiklikleri yapıyoruz. Farenin güncel konumu ile bir önceki konumu arasında farkı alıp bu farkı nesnenin genişlik ve yükseklik değerlerine ekliyoruz. Son olarak da farenin güncel konumunu tekrar global değişkenimize kaydederek işlemi bitiyoruz. Böylece fare hareket ettikçe gerçekleşen konum değişikliği kadar piksel değeri nesnenin boyutuna yansıtılacak.

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Son olarak MouseLeftButtonUp durumunda çalışacak olan FareGitti fonksiyonumuzu yazıyoruz. Bu fonksiyon kullanıcı farenin düğmesinden parmağını çektiğinde çalışacak. Yani artık büyütme veya küçültme işlemi sonlandı. Bu durumdan MouseMove event'ını haberdar edebilmek için hemen global değişkenimizi false olarak değiştiriyoruz.

Artık örneğimiz çalışmaya hazır. Örneğin son halinin kaynak kodları şu şekilde;

[Page.xaml.js]

if (!window.Resize)

    window.Resize = {};

Resize.Page = function()

{

}

Resize.Page.prototype =

{

    handleLoad: function(control, userContext, rootElement)

    {

    }

}

var FareBasili;

var SonDurum = {};

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Hepinize kolay gelsin.