Silverlight animasyonlarında fare imlecini değiştirmek.

0 dakikada yazıldı

6393 defa okundu

Düzenle

Silverlight uygulamaları içerisinde ister sürükle&bırak
sistemleri kullanın ister doğrudan InkPresenter gibi fare imlecinin
farklı anlamlar taşıdığı uygulamalara değinin yeri geldiğinde farenin
imlecini bir Silverlight nesnesi ile değiştirebiliyor olmak gerçekten
hoş olurdu. Bu yazıda bu yolda neler yapabileceğimize bakacağız.

İlk olarak Silverlight uygulamamızda imlecimizi oluşturacak olan nesneyi
oluşturalım. Bunun için ufak bir daire çizerek sahneye yerleştirelim.

<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">

  <Ellipse
x
:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Gördüğünüz gibi yukarıdaki kodumuz içerisinde adını Imlec olarak
koymuş olduğumuz bir Ellipse nesnesi bulunuyor. Bu nesnenin farenin
esas imleci ile aynı konumda yer alması için Silverlight ana
Canvas'ımızın MouseMove durumunu kontrol ederek farenin ekrandaki
pozisyonunu alarak Imlec nesnemizin özelliklerine, yani sahnedeki
yerine yansıtacağız. MouseMove durumunu aşağıdaki gibi tanımlayalım.

<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"

      MouseMove="FareSallandi">

  <Ellipse
x
:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Sıra geldi FareSallandi adındaki JavaScript fonksiyonunu yazmaya.

function FareSallandi(sender, args)

{

  //Farenin mevcut koordinatlarını
değişkenlere alıyoruz.

  var fareX = args.getPosition(null).x;

  var fareY = args.getPosition(null).y;

 

  // Imlec nesnemizin konumunu
fareninkonumuna göre değiştiriyoruz.

  sender.findName("Imlec")["Canvas.Left"] = fareX -
(sender.findName("Imlec")["Width"] / 2);

  sender.findName("Imlec")["Canvas.Top"] = fareY -
(sender.findName("Imlec")["Height"] / 2);

}

Yukarıdaki kod içerisinde özellikle parametre olarak gelen args
deyimine dikkat etmekte fayda var. args parametresi üzerinde
getPosition metodu ile farenin pozisyonunu alabiliyoruz. Aldığımız X
ve Y poziyonlarını kendi değişkenlerimize kaydettikten sonra onları
Imlec nesnesinin Canvas.Left ve Canvas.Top değerlerine
aktarak Imlec'in fare imleci ile aynı konuma gelmesini sağlıyoruz.

Koordinat bilgilerini Imlec nesnesine aktarırken imlecin genişlik ve
yüksekliğinin yarısını çıkartıyoruz, böylece Imlec görseli tam
olarak farenin tıklayacağı yeri ortalayabilecek. Aksi halde biraz sağ
altında kalacaktır.

Geriye tek bir sorun kalıyor; o da hala orijinal imlecin gözüküyor
olması. Imlecin Silverlight içerisinde görünmemesi için ana Canvas
nesnesinin Cursor özelliğini None olarak ayarlıyoruz ve son
olarak XAML kodumuz aşağıdaki gibi oluyor.

<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"

      MouseMove="FareSallandi"

      Cursor="None">

  <Ellipse
x
:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Eğer isterseniz Imlec nesnesine bir de animasyon atayabilirsiniz. Söz
konusu animasyonu Expression Blend 2 içerisinde "Create as a resource"
demeden yaratırsanız Silverlight animasyonu sayfaya yüklendiği gibi
başlayacaktır.

<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"

      MouseMove="FareSallandi"

      Cursor="None">

  <Canvas.Triggers>

    <EventTrigger
RoutedEvent
="Canvas.Loaded">

      <BeginStoryboard>

        <Storyboard
x
:Name="FareAnim"

                 
RepeatBehavior
="Forever">

          <ColorAnimationUsingKeyFrames BeginTime="00:00:00"

                                     
Storyboard.TargetName
="Imlec"

                                     
Storyboard.TargetProperty
="(Shape.Fill).(SolidColorBrush.Color)">

            <SplineColorKeyFrame KeyTime="00:00:00"

                               
Value
="#FFFF0000" />

            <SplineColorKeyFrame KeyTime="00:00:00.5000000"

                               
Value
="#FFFFFFFF" />

            <SplineColorKeyFrame KeyTime="00:00:01"

                               
Value
="#FFFF0000" />

          </ColorAnimationUsingKeyFrames>

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Canvas.Triggers>

  <Ellipse
x
:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Animasyonun sürekli tekrar etmesi için RepeatBehavior özelliğini
Forever olarak ayarlayabilirsiniz. Böylece fare imleci animasyonlu
bir Ellipse olacaktır.

Hepinize kolay gelsin.