BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Aktualności


Kurs Windows Phone 7.5 by Niewęgłowski: Lekcja 1: cześć trzecia

10-02-2013 16:35 Paweł Niewegłowski
Szkolenie

Po krótkiej (bynajmniej dla mnie przerwie) wracam do publikacji kolejnej części Kursu Windows Phone 7.5. Dziś zaprogramujemy sobie pierwszą aplikację, w której nauczycie się jak stworzyć nowy projekt, jak podzielona jest formatka, jak dodać kontrolkę obrazka, nawigowanie miedzy stronami oraz użycia messageboxa.

 

*Tworzymy nowy projekt. Otwieramy Visual Studio 2010, w moim przypadku będzie to wersja Express for Windows Phone. Bierzemy File->New Project... następnie w Recent Templates, rozwijamy Visual C# i oznaczamy Silverlight for Windows Phone i na początek wybieramy Windows Phone Application (jak na screenshocie).

*Przy wyborze wersji wybieramy Windows Phone OS 7.1. Tworzy nam się nowy projekt z czystą formatką. Poszczególne sekcja podpisałem tak jakby przed Visual Studia siadało 7 letnie dziecko, zresztą cały kurs ma taką formę.

Wprowadzamy zmiany. Zaznaczamy kontrolkę z napisem 'MY APPLICATION' i w Properties (prawy dolny róg), w sekcji Text zmieniamy na "Kurs Windows Phone by Niewęgłowski", następnie klikamy na kontrolkę zawierającą page name i w Properties w sekcji Text zmieniany na strona pierwsza. Następnie na Formatkę wstawiamy dwie kontrolki Buttona. Zaznaczmy pierwszy button, w jego właściwościach zmieniamy sekcje Content na "Wiadomość", podobnie postępujemy z drugim buttonem wpisując "Pokaż obrazek". Powinno to wyglądać tak:

Następnie klikamy dwukrotnie w Button1, aż otworzy nam się MainPage.xaml.cs czyli miejsce gdzie możemy oprogramować daną kontrolkę. Wpisujemy następujący kod w C#:

 

MessageBox.Show("Hello World");

Następnie sprawdzamy czy w sekcji emulatora wybrana jest Windows Phone Emulator i wciskamy 

F5 co oznacza Start Debugging czyli że nasza aplikacja zostanie otwarta poprzez Emulator. Pierwsze włączenie emulatora jest zawsze najdłuższe gdyż musi on załadować wszelkie komponenty. Po chwilą na ekranie widzimy emulator WP7, klikając na button1("Wiadomość") powinien wyświetlić się nam komunikat w MessageBoxie o treści Hello World, klikamy OK.

Wciskamy Shift+F5 by zakończyć debuggowanie i powrócić do Visual Studio.

 

Teraz pokaże jak zbudowana jest Formatka:

Teraz dodamy do projektu nową stronę. W sekcji nazwanej przeze mnie Baza plików projektu klikamy prawym przyciskiem myszy na PhoneApp1, otwiera nam się menu w którym najeżdżamy na Add i z rozwiniętego menu wybieramy New Item...

Następnie w okienku które nam wyskoczy wybieramy pierwszą pozycję czyli Windows Phone Portrait Page.

 

Po wybraniu tej opcji, w sekcji Baza plików utworzył nam się nowa strona o nazwie Page1.xaml, klikamy w nią dwukrotnie. Widzimy nową czystą Formatkę w nowej zakładce.

Napisz w kontrolce z napisem Page name zmieniamy na "Strona druga" (Properties->Text).

Na formatkę przeciągamy z Toolboxa kontrolkę image.

Tworzymy nowy folder o nazwie Obrazki. Klikamy prawym na PhoneApp1 wybieramy Add i New folder, jego nazwę ustawiamy na Obrazki.

Następnie minimalizujemy Visual Studio, odnajdujemy folder gdzie mamy zapisaną jakąś grafikę i przeciągamy na ikonkę folderu Obrazki w Visual Studio.

Ja wybrałem grafikę img.png.

Następnie w Sekcji Xaml w znaczniku Image dojemy spację i dopisujemy:

Source="./Obrazki/nazwapliki.formatpliku"

u mnie Source="./Obrazki/img.png"



Na Formatce powinien wyświetlić się wskazany przez nas obrazek. W moim przypadku wygląda to tak:

 

Zakończyliśmy tworzenie strony drugiej, a ja oczywiście musiałem zrobić literówkę "stona druga" haha XD

 

Wracamy teraz do MainPage.xaml (pierwsza strona projektu z dwoma buttonami).

Klikamy dwukrotnie w button2, czyli "Pokaż obrazek", po otwarciu MainPage.xaml.cs w sekcji button2 wpisujemy następujący kod umożliwiający nam przejście (nawigowanie) do drugiej strony projektu (Page1.xaml).

 

Wpisujemy:

 NavigationService.Navigate(new Uri("/Page1.xaml"UriKind.RelativeOrAbsolute));  


 

Następnie klikamy F5, czyli odpalamy emulator z aplikacją. Po kliknięciu w przycisk 'Pokaż obrazek' powinna otworzyć nam się druga strona projektu.

 

Oczywiście zawsze możemy to cofnąć wybierając "fizyczny" przycisk wstecz na emulatorze (strzałką w tył).

 

Tak oto napisaliśmy pierwszą aplikację i tym samym kończymy Lekcję 1. Prościej się nie da!

W razie pytań proszę pisać na p-nieweglowski@hotmail.com

 

Przypominam że Kurs jest w pełni darmowy, ale proszę o nie kopiowanie i nie rozpowszechnianie treści w nim zawartych.

 

Publikacja następnej Lekcji niebawem.

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.