Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Transkrypt

1 Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia nowego projektu (poniżej są utworzone projekty)

2 Po kliknięciu New Project pojawi się okno wyboru, w którym należy określić rodzaj aplikacji Okno wyboru projektu typu Silverlight

3 Utworzenie projektu Hello Wybieramy Windows Phone Application w technologii Silverlight for Windows Phone dla Visual C# Ustawiamy nazwę projektu np. Hello i jego położenie np. do D:\Dydaktyka\LAB Wybieramy docelową wersje systemu dla Windows Phone np. Windows Phone OS 7.1

4 Lewa część głównego okna zawiera widok tworzonej aplikacji. Prawa część odzwierciedla ten widok w postaci kodu XAML. Każda zmiana wprowadzona w jednym z tych widoków jest natychmiast odwzorowane w drugim. Zakładka Toolbox Podstawowe komponenty niezbędne do budowy interfejsu aplikacji. Dodany komponent będzie pojawiał się w kodzie XAML, w którym można edytować jego własności (położenie, wielkość, zawartość itp.). Można również posłużyć się graficznym edytorem, klikając wybrany element prawym przyciskiem myszy, a w prawym dolnym rogu wyświetli się edytor (opcje Properties).

5 Okno widoku telefonu (Design) 1. pasek Zoom - umożliwia przybliżanie i oddalanie obszaru roboczego, 2. obszar roboczy na nim można umieścić kontrolkę z okna ToolBox, 3. pasek szybkiej nawigacji pomiędzy elementami projektu, 4. ikonki - wskazują na aktywne okno, strzałki - zamiana miejscami okna widoku telefonu z oknem języka XAML, 5. ikonki - zmiana układu (pionowy, poziomy, strzałki - tylko okno z lewej strony) pomiędzy oknem widoku telefonu i oknem XAML.

6 Uwagi Klawisz F6 - przekompilowanie projektu i sprawdzenie poprawność napisanego kodu Klawisz F5 program zostaje załadowany na emulator ApplicationBar umożliwia aplikacji napisanej na platformę Windows Phone 7 korzystanie z menu aplikacji odkomentowaniu kodu w pliku ctrl + k + u, zakomentowanie kodu ctrl + k + c App.xaml, wraz z pliku kodu App.xaml.cs, definiuje instancję aplikacji klasy.

7 Uruchomienie emulatora i jego obsługa Przechodzimy do widoku projektu. Przed uruchomieniem emulatora wybieramy opcję Windows Phone Emulator (opcja Windows Phone Device służy do uruchomienia projektu na urządzeniu fizycznym, podłączonym do komputera). Uruchamiamy emulator (F5 lub zielona strzałka).

8 Emulator posiada 3 przyciski: Wstecz, Start, Wyszukaj. Po prawej stronie znajduje się pasek z ikonami umożliwiającymi: wyłączenie emulatora, minimalizację okna, obrót urządzenia w lewo, obrót urządzenia w prawo, dopasowanie wielkości emulatora do rozmiarów ekranu komputera, dowolne ustalenie wielkości emulatora, strzałki, umożliwiające przejście do dodatkowych opcji emulatora.

9 Opis dodatkowych opcji emulatora. Accelerometer - umożliwia emulację ruchów urządzenia m.in. potrząsanie. Location - umożliwia emulację poruszania urządzania w określonych współrzędnych geograficznych. Możliwe jest określenie kliku współrzędnych, a następnie ich zapisanie i późniejsze odtworzenie podczas testowania aplikacji. Screenshot - umożliwia wykonanie zrzutu ekranu emulatora.

10 Umieszczenie aplikacji na głównej stronie urządzenia. Naciskamy przycisk Start (środkowy przycisk na dolnej liście przycisków). Na głównej stronie naciskamy przycisk ->(strzałka w prawo) umieszczony w prawym górnym rogu emulatora. Przytrzymamy lewy przycisk myszy na nazwie aplikacji HelloWindowsPhone Wybieramy pin to start (Rys.9.).

11 Kontrolki Kontrolki dodajemy na trzy sposoby: metodą (Drag&Drop) przeciągnij i upuść w oknie widoku telefonu, metodą przeciągnij upuść w okno XAML do znacznika <Grid></Grid>, w oknie XAML możesz dodać kontrolkę, wpisując ją ręcznie. Przykład. Utworzymy nowy projekt i dodamy kontrolki (Boreder, Button) 1. Z zakładki Toolbox wybieramy kontrolkę Border. 2. W oknie XAML zmieniamy właściwość Name na "myborder"

12 1. Za pomocą okna Properties rozwijamy pole Background - określamy dowolne wypełnienie gradientem.

13 Dodajemy kontrolkę Button 1. Z zakładki Toolbox pobieramy kontrolkę Button. 2. Zmieniamy właściwość Name na "mybutton". 3. W polu Content wpisujemy "Przycisk". 4. Określamy gradient (różny od gradientu w poprzedniej kontrolce). 5. Przeciągamy przycisk w obszar Border.

14 Zmiana sposobu wyświetlania kontrolki Border. W oknie XAML przechodzimy do Border. Określamy właściwość Margin na "0,0,0,0". Dla HorizontalAlignment: 1. usuwamyzawartość z cudzysłowów, 2. przyciskamy ctrl + spacja 3. sprawdzamy dostępne właściwości, wybieramy Center,

15 Dodajemy kontrolkę Canvas. Z Toolbox wybieramy kontrolkę Canvas i umieszczoną poniżej przycisku. Zmieniamy rozmiar kontrolki tak, aby wypełniała całą dostępną przestrzeń. Zmieniamy właściwość Name na "mycanvas". W oknie Properties: 1. wybieramy Background, 2. z górnych przycisków zaznaczamy Image Brush, 3. wciskamy Select Image, a następnie Add, 4. wybieramy obraz z biblioteki obrazów w Windows, 5. zatwierdzamy zmiany, wciskając OK..

16 Dodamy możliwość ukrywania/pokazywania obrazka po kliknięciu na przycisk. Zaznaczamy Button i kliknij w niego dwukrotnie lewym przyciskiem myszy.

17 Zmieniamy kod funkcji mybatton_click