Silverlight 2.0 ile Analog Saat Uygulaması

0 dakikada yazıldı

6216 defa okundu

Düzenle

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.