‚Hello World‘ für WP8 #1

Nachdem wir in den letzten Beiträgen die Entwicklungsumgebung ‚Visual Studio‘ nach unseren Wünschen eingerichtet haben, möchte ich nun ein erstes Programmierbeispiel geben. Dabei handelt es sich um das klassische ‚Hello World‘-Programm für Windows Phone 8. Ich zeige euch, wie ihr ein neues Projekt anlegt und dann mit der eigentlichen Programmierung beginnt.

Ihr habt die Möglichkeit euch das Tutorial in Form eines kurzen Videos anzuschauen oder ganz klassisch in Textform. Entscheidet selbst!

Zunächst öffnet ihr ‚Visual Studio‘ und klickt oben auf FILE –> NEW –> PROJECT.

Dialog 'New Project' in VS2012

Dialog ‚New Project‘ in VS2012

Anschließend wählt ihr in der linken Spalte Windows Phone aus und im mittleren Teil dann Windows Phone App. Gebt im unteren Bereich des Fensters einen Namen ein, wie zum Beispiel HelloWorld. Anschließend habt ihr noch die Möglichkeit den Speicherort auszuwählen. Bestätigt eure Angaben durch einen Klick auf OK.

Welche OS-Version von Windows Phone?

Welche OS-Version von Windows Phone?

Nun müsst ihr euch entscheiden für welche Betriebssystem-Version von Windows Phone ihr eure App entwickeln wollt. Es stehen euch das neue WP8 sowie WP7.1 zur Verfügung. Ich entscheide mich hier für Windows Phone 8 und bestätige auch diesen Dialog durch einen Klick auf OK.

Nun richtet Visual Studio das entsprechende Projekt ein und öffnet für euch die MainPage.xaml, also die Hauptseite eurer Anwendung. Im linken Bereich des Fensters seht ihr bereits eine Vorschau des Phone-Screens und im rechten Bereich die entsprechende Beschreibung des Layout in Form von XAML1.

Ansicht einer WP-Seite in VS2012

Ansicht einer WP-Seite in VS2012

In diesem ersten Beispiel werden wir zunächst nur mit dem Phone-Emulator arbeiten, so dass wir die XAML-Ansicht ausblenden können2.

Am linken Rand des Fensters finden wir weitere Menüpunkte. Einer von diesen heißt Toolbox, welchen wir anklicken. Es öffnet sich eine Liste von Controls, welche wir in unserer App verwenden können.

ausgeklappte Toolbox mit den Controls

ausgeklappte Toolbox mit den Controls

Sucht in der Liste nach dem Control Button und zieht diesen bei gedrückter Maustaste auf das Phone. Anschließend wir der Button bereits angezeigt. Ihr habt nun die Möglichkeit diesen „frei“ auf dem Phone zu bewegen, wie es euch gefällt.

platzierter Button auf dem Phone-Emulator

platzierter Button auf dem Phone-Emulator

Auf der rechten Seite findet ihr ebenfalls ein Menü. Ein Menüpunkt lautet Properties. Klickt dieses an, während ihr den Button auf dem Phone markiert habt. Anschließend öffnet sich ein Menü, welches es erlaubt die Eigenschaften des markierten Objekts, in unserem Fall der Button, zu bearbeiten.

Eigenschaften eines Objekts bearbeiten

Eigenschaften eines Objekts bearbeiten

Sucht die Eigenschaft Content und ändert den Wert von Button auf Say ‚Hello!‘. Anschließend könnt ihr die Änderung direkt auf dem Button betrachten. Nun klickt ihr doppelt auf den Button, um in die Code-Behind-Datei zu gelangen, welche also für den Code zuständig ist. An der Stelle, wo der Cursor blinkt, tragt ihr die folgende Code-Zeile ein:

Somit erhaltet ihr die komplette Methode, welche beim Klicken auf den Button ausgelöst wird:

Nun ist die erste Version des ‚Hello World‘-Programms bereits fertigt und ihr könnt es im Emulator testen.

App testen

App testen

Dazu klickt ihr einfach auf den kleinen grünen Pfeil in der Menüleiste und nach kurzer Wartezeit startet der Emulator3, welcher euch das folgende Bild4 zeigt und nach einem Klick sieht es dann so aus5:

'Hello World' - Teil 1

‚Hello World‘ – Teil 1

Im zweiten Teil werden wir diese Version als Grundlage nehmen und diese um weitere Features ergänzen.

 

 

  1. XAML (Extensible Application Markup Language) ist eine allgemeine Beschreibungssprache für die Oberflächengestaltung von Anwendungen sowie zur Definition von Workflows. []
  2. Dazu einfach die Trennlinie zwischen dem dargestellten Phone und der Code-Ansicht mit der Maus greifen und ganz an den Rand schieben []
  3. hierfür muss allerdings Windows 8 mit 64 Bit installiert sein und der Rechner muss über SLAT verfügen []
  4. linke Seite des Bildes []
  5. rechte Seite des Bildes []

You may also like...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *