Makale Özeti

Bu yazımızda Silverlight 2.0 Beta 2 kullanarak analog bir sistem saati uygulaması hazırlıyoruz.

Makale

Silverlight 2.0 Beta 2 kullanarak analog bir saat gösterimi yapacağımız bu yazı içerisinde StoryBoard kullanımını ve StoryBoard'ların belirli zamanlara özel olarak konumlandırılmasını inceleyeceğiz. Gelin ilk olarak işin görsel tarafını halledelim ve Expression Blend 2.5 ile bir saat görseli yaratalım.

Saatimizde toplam üç adet dikdörtgene ihtiyacımız var. Bu dikdörtgenler saatin akrep, yelkovan ve saniye göstergesini temsil edecek. Ayrıca saatin ana gövdesini oluşturacak bir de Ellipse kullanacağız.

<UserControl x:Class="SilverlightApplication16.Page"

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

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

   Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White">

        <Ellipse HorizontalAlignment="Stretch" Margin="0,0,120,20" VerticalAlignment="Stretch" Fill="#FFFF0000" Stroke="#FF000000" x:Name="Govde"/>

        <Rectangle Height="80" HorizontalAlignment="Left" Margin="136,59,0,0" VerticalAlignment="Top" Width="8" Fill="#FFFFFFFF" Stroke="#FF000000" x:Name="Saat"/>

        <Rectangle Height="107" HorizontalAlignment="Left" Margin="136,32,0,0" VerticalAlignment="Top" Width="8" Fill="#FF00C6FF" Stroke="#FF000000" x:Name="Dakika"/>

        <Rectangle Height="131" HorizontalAlignment="Left" Margin="136,8,0,0" VerticalAlignment="Top" Width="8" Fill="#FFD600FF" Stroke="#FF000000" x:Name="Saniye"/>

    </Grid>

</UserControl>

Bu noktadan sonra animasyonlarımızı hazırlamaya başlayalım. Saniyeyi gösterecek olan saat kolunun toplam 60 saniye içerisinde 360 derece dönmesi gerekiyor. Buna uygun animasyon yaratmadan önce tüm dikdörtgenlerimizin merkez noktasını saatin ortasına gelecek şekilde düzenleyelim. Böylece dikdörtgenler saatin merkez noktasın etrafında dönecektir.

<UserControl x:Class="SilverlightApplication16.Page"

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

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

   Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White">

        <Ellipse HorizontalAlignment="Stretch" Margin="0,0,120,20" VerticalAlignment="Stretch" Fill="#FFFF0000" Stroke="#FF000000" x:Name="Govde"/>

        <Rectangle Height="80" HorizontalAlignment="Left" Margin="136,59,0,0" VerticalAlignment="Top" Width="8" RenderTransformOrigin="0.5,1" Fill="#FFFFFFFF" Stroke="#FF000000" x:Name="Saat"/>

        <Rectangle Height="107" HorizontalAlignment="Left" Margin="136,32,0,0" VerticalAlignment="Top" Width="8" RenderTransformOrigin="0.5,1" Fill="#FF00C6FF" Stroke="#FF000000" x:Name="Dakika"/>

        <Rectangle Height="131" HorizontalAlignment="Left" Margin="136,8,0,0" VerticalAlignment="Top" Width="8" RenderTransformOrigin="0.5,1" Fill="#FFD600FF" Stroke="#FF000000" x:Name="Saniye"/>

    </Grid>

</UserControl>

Uygulamamızın XAML kodunun son hali yukarıdaki şekilde. Hemen saniye koluna ait animasyonu hazırlayalım. SaniyeAnim adını vererek yeni bir StoryBoard yaratıyoruz ve söz konusu StoryBoard'un 60. saniyesinde saniye adındaki dikdörtgeni dönüş açısını 360 derece olarak tanımlıyoruz.

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

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Saniye" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

                <SplineDoubleKeyFrame KeyTime="00:01:00" Value="360"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

Yukarıdaki animasyon içerisinde de gördüğünüz üzere ilk olarak animasyonun RepeatBehavior özelliğine Forever değerini vererek animasyonun sürekli tekrar edeceğini belirtiyoruz. Sonrasında Saniye dikdörtgenini hedef alan animasyon dikdörtgenin dönüş açısını bir dakika içinde 360 dereceye getiriyor.

Saniye kolu için yaptığımız animasyonlarla aynı mantıkta dakika ve saat kolları için de animasyonlar düzenleyeceğiz. Dakika kolu için düzenlediğimiz animasyon dakika kolunu 60 dakika içerisinde 360 derece döndürecek.

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

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Dakika" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

                <SplineDoubleKeyFrame KeyTime="01:00:00" Value="360"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

Son olarak saat kolu için düzenleyeceğimiz animasyonda da saat kolunu 12 saat içerisinde 360 derece döndüreceğiz.

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

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Saat" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

                <SplineDoubleKeyFrame KeyTime="12:00:00" Value="360"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

Tüm bu animasyonlar çalıştığında saatimiz doğru bir şekilde işliyor olacak. Fakat esas mesele Silverlight uygulaması ilk açıldığında tüm saat kollarını doğru başlangıç noktalarına getirmek. Bunu yapabilmek için StoryBoard'ların Seek metodundan faydalanacağız. Seek metodu ile istediğimiz bir StoryBoard'u kendi içinde istediğimiz zaman aralığına getirebiliyoruz.

        SaniyeAnim.Begin()

        DakikaAnim.Begin()

        SaatAnim.Begin()

 

        SaniyeAnim.Seek(New TimeSpan(0, 0, Now.Second))

        DakikaAnim.Seek(New TimeSpan(0, Now.Minute, Now.Second))

        SaatAnim.Seek(New TimeSpan(Now.Hour, Now.Minute, Now.Second))

Yukarıdaki kodun başında tüm animasyonlarımızı hemen başlatıyoruz sonra da her animasyonu uygun başlangıç noktasına getirmek için Seek metodunu kullanıyoruz. Seek metoduna verdiğimiz TimeSpan parametresini yaratırken her bir kola uygun değerleri aktarıyoruz. Saniye koluna sadece içerisinde bulunduğumuz zamanın saniyesini, dakika koluna dakikayı ve saat koluna da saat bilgisini veriyoruz ve animasyonlarımız o konumdan gelerek oynamaya devam ediyor.

Saat uygulamamızı tamamladık, hepinize kolay gelsin.