Makale Özeti

Silverlight uygulamalarında fare imlecini değiştirerek yerine Silverlight içerisinde çizilmiş ve animasyonları düzenlenmiş nesneleri atayabiliyor olmak kullanıcı deneyimi açısından çok önemli. Bu yazımızda animasyonlı örnek bir imleç hazırlayarak fare imleci olarak gösterilebilmesini sağlayacağız.

Makale

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.

Daron Yöndem
MCT, MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com