Bu makalemizde hızlı bir şekilde örnek bir Silverlight düğmesi tasarlayarak fare ile üzerine gelindiğinde parlamasını üzerinden çekildiğinde de eski haline geri dönmesini sağlayacağız. İlk olarak düğmemizi çizmek için Expression Blend 2 içerisinde yeni bir Silverlight projesi yaratalım ve Rectangle çizim aracı ile bir dikdörtgen çizelim. Dikdörtgeni çizdikten sonra Expression Blend 2 içerisinde "Properties" tabından "Fill" kısmında SolidColor seçerek kırmızı tonlarından biri seçebiliriz. Son olarak da dikdörtgenimizin kenarlarında aşağıdaki fotoğraftaki gibi fare ile tutarak köşelerini yuvarlayalım.

Silverlight düğmemizi yaratıyoruz.

Düğmemizi çizdiğimize göre parlama efekti için biraz değişiklik yapalım. SolidColor yerine Gradient seçerek beyazdan kırmızıya bir geçiş ayarlayarak Expression Blend 2 içerisinde sol araç çubuğundan "Brush Transform" aracını kullanarak aşağıdaki şekilde bir parlama efekti hazırlayalım.

Parlama efekti hazır.

Sıra geldi fare ile üzerine geldiğimizde çalışacak olan animasyonu hazırlamaya. Yapacağımız şey birer saniye arayla BrushTranform aracı ile parlama efektinin yani Gradient'ın yönünü değiştirmek. Animasyonumuzu hazırladıktan sonra düğmenin üzerinden fare ile çekildiğimizde çalıştırılmak üzere animasyonumuzun bir kopyasını yaratacağız.

Animasyonumuzun bir kopyasını alalım.

Animasyonumuzun kopyasını aldıktan sonra "geri çekilme" animasyonunu yaratmak için bir önceki animasyondan aldığımız kopyayı tersine çevireceğiz. Bunun için yukarıdaki görselde de görebileceğiniz Blend içerisinde animasyon menüsünden "Reverse" komutunu kullanacağız. Böylece her iki animasyonumuz da hazır. Artık sıra geldi her iki animasyonun da zamanında çalışmasını sağlayacak kodları yazmaya.

<Canvas

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

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

  Width="300" Height="300"

  Background="White"

  x:Name="Page"

  >

  <Canvas.Resources>

    <Storyboard x:Name="Anim1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00" Value="-0.071,-0.091"/>

        <SplinePointKeyFrame KeyTime="00:00:01" Value="1.008,-0.061"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

    <Storyboard x:Name="Anim_Copy1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00" Value="1.008,-0.061"/>

        <SplinePointKeyFrame KeyTime="00:00:01" Value="-0.071,-0.091"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

  </Canvas.Resources>

  <Rectangle MouseEnter="Geldi" MouseLeave="Gitti" Width="127" Height="33" Stroke="#FF000000" Canvas.Left="62" Canvas.Top="163" RadiusY="10.5" RadiusX="10.5" RenderTransformOrigin="0.189,0.091" x:Name="rectangle">

    <Rectangle.Fill>

      <RadialGradientBrush GradientOrigin="1.008,-0.061">

        <GradientStop Color="#FFFFFFFF" Offset="0"/>

        <GradientStop Color="#FFFF0000" Offset="1"/>

      </RadialGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

</Canvas>

Yukarıdaki XAML kodunda hazırladığımız tüm animasyonlar ve düğmemiz yer alıyor. Düğmemizin MouseEnter ve MouseLeave durumları ayrı JavaScript fonksiyonlarına bağlanmış durumda. Aşağıda söz konusu JavaScript fonksiyonlarını da inceleyebilirsiniz.

function Gitti(sender)

{

  sender.findName("Anim1").Begin();

}

function Geldi(sender)

{

  sender.findName("Anim_Copy1").Begin();

}

Her bir fonksiyon kendisine gönderilen Sender parametresi üzerinden düğmemizi yakalayarak, onun üzerinden de findName ile animasyonları bulup çalıştırıyor.

Böylece üzerine gelince veya fare ile üzerinden ayrıldığımızda uygun animasyonları çalıştıran bir düğmemiz oldu. Hepimize hayırlı olsun ;)