Samouczek Windows Phone 7 – Time to Midnight

Wprowadzenie

Moją pierwszą aplikacją(z tej serii :)) na platformie WP7 będzie prosta aplikacyjka, która odmierzała będzie czas do północy.

Setup

Tak jak już wspomniałem w pierwszym wpisie z tej serii, przed przystąpieniem do tworzenia niesamowitych aplikacji na WP7 należy udać się na stronę developer.windowsphone.com i ściągnąć potrzebne do developmentu narzędzia. Dodatkowo zachęcam do ściągnięcia template-ów projektowych dla frameworka nRoute, co przyśpieszy tworzenie projektów.

Na potrzeby aplikacji sugeruję udać się na stronę Font Zone i ściągnąć trzcionkę Quartz Italic, która bardzo ładnie oddaje efekt elektronicznego zegarka z czasem, który można znaleźć u niektórych tuż przy łóżku na biurku 😉

Jak już ściągnęliście i zainstalowaliście trzcionkę to można przystąpić do stworzenia nowego projektu. Z template-ów nRoute wybieramy projekt Windows Phone 7 Application, ja nazwałem go „TimeToMidnight”. Do projektu dodajemy ściągniętą wcześniej trzcionkę i oznaczamy sposób jej kompilacji na „Content”, dzięki czemu zostanie ona dodana do paczki deploymentowej aplikacji i będzie dostępna na komórce.

Tworzymy GUI

GUI naszej aplikacji jest proste – składa się tylko z jednego textbox-a(oprócz tych dotyczących nazwy aplikacji i nazwy strony, które są dodawane standardowo) wyświetlającego pozostały czas do północy. Propertę Text dodanego Textboxa bindujemy z propertą Countdown, którą stworzymy później w ViewModel-u. Dodatkowo dla Textbox-a ustawiamy następujące parametry:

  • Width oraz Height – ustawiamy na automatyczne, czyli nie określamy dokładnych wartości;
  • Margin – czyścimy te, które zostały ustawione przez designera;
  • Horizontal and Vertical Alignment – ustawiamy na Center;
  • Foreground – normalnie ustawilibyśmy kolor trzcionki na czerwony, aby jak najlepiej oddać przykład z apps amuck, ale w tym przypadku ustawimy statyczny Resource PhoneAccentBrush, który będzie reagował na zmiany theme przez użytkownika dla całej komórki.
  • Font – jako trzcionkę ustawiamy wcześniej dodaną przez nas do projektu.
  • Font Size: 120.

Kod XAML dla obiektu ContentGrid powinien wyglądać następująco:

<Grid x:Name="ContentGrid" Grid.Row="1">
			<TextBlock Text="{Binding Countdown}" VerticalAlignment="Center" FontFamily="quartzitalic.ttf#Quartz"
			Foreground="{StaticResource PhoneAccentBrush}" FontSize="120" HorizontalAlignment="Center" />
</Grid>

Timer

Po stworzeniu GUI należy zabrać się za logikę wyliczającą czas. Do tego celu w ViewModel-u stworzymy timer, który będzie co sekunda wywoływał metodę Tick, zmieniającą czas do północy. Kod tego rozwiązania został przedstawiony poniżej:

[MapViewModel(typeof(MainPage))]
    public class MainPageViewModel : ViewModelBase
    {
        private DispatcherTimer m_timer = null;

        public MainPageViewModel()
        {
            m_timer = new DispatcherTimer
            {
                Interval = TimeSpan.FromSeconds(1.0)
            };

            m_timer.Tick += OnTick;

            m_timer.Start();
        }

        void OnTick(object sender, EventArgs e)
        {
            var midnight = DateTime.Today.AddHours(24.0);
            var timeLeft = midnight - DateTime.Now;

            Countdown = String.Format("{0:D2}:{1:D2}:{2:D2}",timeLeft.Hours, timeLeft.Minutes, timeLeft.Seconds);
        }

        public string Countdown
        {
            get
            {
                return m_countdown;
            }
            private set
            {
                m_countdown = value;
                NotifyPropertyChanged(()=>Countdown);
            }
        }

        private string m_countdown;
    }

I to wszystko :). W efekcie jednak, uruchamiając aplikację w swoich środowiskach developerskich nie otrzymacie prawidłowego czasu, ponieważ standardowe ustawienia dla emulatora Windows Phone 7 to Alaska.

Reklamy

~ - autor: kaprys12 w dniu Sierpień 10, 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 blogerów lubi to: