Bu makalemizde Silverlight ile bir EKG animasyonu yapacağız. Önce EKG çizimimizi Expression Design ile yapmalıyız. Bunun için 300*200px yeni bir dosya yaratarak "Pen Tool" ile sahneye bir doğru çizelim. Sonrasında çizdiğimiz doğruya "Add Anchor Point" aracını kullanarak birkaç nokta ekleyelim. Son olarak bu eklediğimiz noktalardan istediklerimizi "Direct Selection Tool" ile seçerek yukarı veya aşağı sürükleyerek bir EKG çizimi yaratabiliriz.

Expression Design içerisinde EKG çizimimiz.

Çizimimiz tamamlandığında göre sıra geldi bu çizimi vektörel olarak Expression Blend tarafına almaya. File / Export menüsünden yola çıkarak Silverlight Canvas seçeneği üzerinden bir XAML çıktısı alıyoruz. XAML dosyası içerisindeki Layer1 adındaki Canvas elementini Blend içerisine kopyalayacağız. Tabi bunun için önce Expression Blend 2 ile yeni bir Silverlight projesi yaratmamız gerekiyor.

Expression Design'dan aldığımız XAML kodunu Blend 2 içerisine yapıştırdığımızda Silverlight uygulamamızın XAML kodu aşağıdaki şekilde oluyor.

<Canvas

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

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

  Width="300" Height="200"

  Background="White"

  x:Name="Page"

  >

  <Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">

    <Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>

  </Canvas>

</Canvas>

Kod içerisinde Path olarak gözüken kısım bizim çizimimiz ta kendisi. Layer_1 adındaki Canvas da Expression Design tarafındaki Layer'ımız. Şimdi sıra geldi ince ayarlar yapmaya. İlk olarak Silverlight animasyonunun fonunu siyah yapalım, sonra da Path nesnemizin Stroke rengini parlak yeşile çevirelim. Böylece koyu bir arkaplan üzerinde yeşil kalp atışları gözükecek. Kalp atışlarının normal EKG gibi gözükmesi için bir maske kullanacağız. Maske olarak kullanılmak üzere sahnenin kenarına ekranın dışına bir dikdörtgen çizelim.

Maskemiz kenarda bizi bekliyor.

Maskemizi çizdiğimize göre sıra geldi onu gerçekten Path'imize maske olarak atamaya. Bunun için Expression Blend 2 içerisinde "Objects and Timeline" panelinde hem Path'in içerisinde bulunduğu Canvas'ı hem de dikdörtgenimizi seçerek sağ tuş ile tıklıyoruz. Gelen menüden "Path / Make Clipping Path" komutunu vererek dikdörtgenin bir maske haline gelmesini sağlıyoryz.

"Make Clipping Path" ile maskeleme.

Şimdi sora geldi gerekli animasyonu yaratmaya. Animasyonumuzda maske olarak ayarladığımız dikdörgenin ekranın solundan sağına doğru dolaşması gerekiyor. Bunun için yeni bir StoryBoard yaratalım. Sahne ilk açıldığında animasyonun otomatik başlaması için "Create as a resource" seçeneğini deaktif bırakalım.

Animasyonu maskemize vereceğimiz için bir şekilde maskemizi seçebiliyor olmamız gerekir. Maskeleme yaptığınız herhangi bir nesneyi seçerek araç çubuğundan "Direct Selection Tool"'u seçtiğinizde maskeye müdahale edebildiğinizi göreceksiniz. Bu şekilde animasyonumuz içerisinde iki farklı KeyFrame kaydederek maskeyi farklı konumlara getirebiliriz.

Artık animasyonumuz hazır. Son olarak StoryBoard'un RepeatBehavior özelliğini de Forever yaparsanız sürekli tekrar edecektir. Uygulamanın son haline ait XAML kodu aşağıdaki şekilde.

<Canvas

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

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

  Width="300" Height="200"

  Background="#FF000000"

  x:Name="Page"

  >

  <Canvas.Triggers>

    <EventTrigger RoutedEvent="Canvas.Loaded">

      <BeginStoryboard>

        <Storyboard RepeatBehavior="Forever" x:Name="Storyboard1">

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,227.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,227.5"/>

          </PointAnimationUsingKeyFrames>

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Canvas.Triggers>

    <Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">

      <Canvas.Clip>

        <PathGeometry>

          <PathFigure IsClosed="True" StartPoint="-31.5,-28.5">

            <LineSegment Point="-9.5,-28.5"/>

            <LineSegment Point="-9.5,228.5"/>

            <LineSegment Point="-31.5,228.5"/>

          </PathFigure>

        </PathGeometry>

      </Canvas.Clip>

    <Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF23FF00" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>

  </Canvas>

</Canvas>

Hepinize kolay gelsin.