Samouczek Windows Phone 7 – Fire Light

Kolejną aplikacją z serii samouczków będzie przydatne narządko do oświetlania sobie drogi wracając wieczorową porą 🙂  poprzez wyświetlanie animacji pożaru. Najprościej byłoby wyświetlić animowany obrazek gif i by było po krzyku. Jednak my pokusimy się o zrobienie samodzielnie animacji. W tym celu skorzystamy ze storyboard napisanego programistycznie.

Przypominam, że każda aplikacja z tej serii będzie stworzona przy wykorzystaniu nRoute Toolkit 🙂

GUI

Podobnie jak w poprzednim przykładzie nasze GUI będzie dość proste. Dodajemy do głównego okna obiekt Image, nazywamy go FireImage i ustawiamy propertę Source na pierwsze zdjęcie naszej animacji:

<Grid x:Name="ContentGrid" Grid.Row="1">
          <Image x:Name="FireImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="Resources/fire0.jpg"/>
</Grid>

Czas na animację

Animację pożaru możemy wykonać na kilka sposobów. Jednym byłoby użycie Timera do podmieniania w określonych odstępach czasowych property Source obiektu Image z ViewModel-a. Nie jest to jednak koszerne rozwiązanie, dlatego do realizacji animacji wykorzystamy tzw. Storyboard. Wykorzystując wzorzec MVVM zobowiązani jesteśmy do wykonania całego codebehind w ViewModel-u. Niestety nie udało mi się przenieść kodu odpowiedzialnego za animację do ViewModel-u, dlatego też cały kod zawarłem w widoku.

Pierwszym krokiem było podczepienie się do event-u Loaded widoku. Następnie trzeba było stworzyć za pomocą kodu obiekt Storyboard i ustawić dla niego propertę  RepeatBehavior na Forever jak to pokazano niżej:

var storyboard = new Storyboard
{
    RepeatBehavior = RepeatBehavior.Forever
};

Następnie do wykonania animacji wykorzystamy obiekt ObjectAnimationUsingKeyFrames. Każdy z obrazków naszej animacji będzie oddzielną klatką(KeyFrame) wyświetlaną po sobie w odstępie 50ms.

            var animation = new ObjectAnimationUsingKeyFrames();

            Storyboard.SetTarget(animation, FireImage);
            Storyboard.SetTargetProperty(animation, new PropertyPath("Source"));

            storyboard.Children.Add(animation);

            for (int i = 0; i < 8; i++)
            {
                var keyframe = new DiscreteObjectKeyFrame
                {
                    KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(50 * i)),
                    Value = String.Format("Resources/Fire{0:D1}.jpg", i)
                };

                animation.KeyFrames.Add(keyframe);
            }

            Resources.Add("CandleStoryboard", storyboard);

            storyboard.Begin();

I to wszystko 🙂 Następny samouczek będzie dotyczył uruchamiania z kody zewnętrznych aplikacji takich jak wykonanie połączenia, napisanie wiadomości SMS, uruchomienie linka, itp. Zapraszam 🙂

Advertisements

~ - autor: kaprys12 w dniu Sierpień 17, 2010.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

 
%d bloggers like this: