Erstellen Ihrer ersten Windows Store-App: ein Lernprogramm für Android-Entwickler

Sie erfahren, wie Sie Ihre erste Windows Store-App mit Visual Studio 2013 erstellen, programmieren und ausführen können. Auch wenn alle Entwickler von diesem Lernprogramm profitieren können, werden die Informationen doch speziell aus der Perspektive eines Android-Entwicklers dargestellt.

Lektion 1: Einrichten der Umgebung für die App-Entwicklung

Bevor Sie mit der Erstellung Ihrer ersten Windows Store-App beginnen können, müssen Sie die Umgebung für die App-Entwicklung einrichten.

Schritt 1: Installieren von Windows 8.1

Gehen Sie beim Installieren von Windows 8.1 folgendermaßen vor:

  • Sie sollten entweder eine gesonderte Festplattenpartition erstellen und Windows 8.1 darauf installieren oder eine startbare virtuelle Festplattendatei (VHD) erstellen, auf der Windows 8.1 installiert ist.
  • Falls Sie Mac OS X verwenden, können Sie Boot Camp nutzen, um eine gesonderte Festplattenpartition zu erstellen und Windows 8.1 zum dualen Booten darauf zu installieren. Oder Sie können Apps wie Parallels Desktop, VirtualBox oder VMware Fusion verwenden, um Windows 8.1 auf einem virtuellen Computer unter Mac OS X auszuführen.

Windows 8.1 können Sie auf der Seite Windows 8.1 für Entwickler herunterladen.

Schritt 2: Installieren von Visual Studio 2013

Microsoft Visual Studio ist, ähnlich wie Eclipse, die IDE, die Sie nutzen können, um Windows Store-Apps zu erstellen. Eine Version von Visual Studio, die speziell zum Erstellen von Windows Store-Apps entwickelt wurde – Visual Studio 2013 – finden Sie auf der Seite Windows 8.1 für Entwickler im Abschnitt "Wichtige Downloads".

Hinweis  Mit Visual Studio 2013 können nur Windows Store-Apps für Windows 8.1 erstellt werden.

Schritt 3: Anfordern einer Entwicklerlizenz

Mit einer Entwicklerlizenz können Sie Windows Store-Apps installieren, entwickeln, testen und bewerten, bevor Sie sie für weitere Tests und zur Zertifizierung an den Windows Store senden. Diese Lizenzen sind kostenlos. Wenn Sie Visual Studio 2013 zum ersten Mal ausführen, erhalten Sie automatisch Hilfe, um eine Entwicklerlizenz zu bekommen. Diese Lizenzen laufen zwar jeweils nach einigen Monaten ab, aber Visual Studio hilft Ihnen automatisch dabei, abgelaufene Entwicklerlizenzen bei Bedarf zu erneuern.

In der nächsten Lektion erfahren Sie, wie Sie Ihr erstes Windows Store-App-Projekt erstellen können.

Nach oben

Lektion 2: Erstellen Ihres ersten Projekts

In der vorherigen Lektion haben Sie Ihre Entwicklungsumgebung eingerichtet. Dazu gehörte auch die Installation einer speziellen Version von Visual Studio. In Visual Studio müssen Sie zunächst ein Windows Store-App-Projekt erstellen, bevor Sie mit der Erstellung einer App für Windows 8.1 beginnen können. Dieses Projekt enthält alle Dateien, aus denen der Quellcode Ihrer App besteht.

Eclipse-Tipp

Die Vorlage für Windows Store-Apps in Visual Studio ähnelt der Vorlage Android-Anwendungsprojekt aus dem Android Development Tools (ADT) Bundle bzw. die nach der Installation des Android Development Tools (ADT)-Plug-Ins Eclipse hinzugefügt wurde.

 

In der dieser Lektion werden Sie Ihr erstes Windows Store-App-Projekt erstellen.

  1. Öffnen Sie Visual Studio 2013.
  2. Klicken Sie auf Datei > Neues Projekt.
  3. Blank App (XAML) sollte bereits ausgewählt sein. Ist dies nicht der Fall, erweitern Sie Installiert > Vorlagen > Visual C# > Windows Store, und klicken Sie auf Blank App (XAML), wie im folgenden Screenshot dargestellt.

    Visual Studio-Dialogfeld "Neues Projekt"
  4. Im Feld Name können Sie einen Namen für Ihr Projekt eingeben, beispielsweise MyFirstApp. Dieser wird als Verzeichnisname des Projekts und als der Name verwendet, der im Fenster Projektmappen-Explorer von Visual Studio für das Projekt angezeigt wird.
    Eclipse-Tipps

    Ein Projektverzeichnis unter Visual Studio ähnelt einem Eclipse-Arbeitsbereich.

    Das Fenster Projektmappen-Explorer von Visual Studio ähnelt dem Paket-Explorer von Eclipse.

     

  5. Im Feld Speicherort können Sie einen Speicherort eingeben bzw. einen Speicherort für die Projektdateien auswählen oder den Standardspeicherort beibehalten.
  6. Im Feld Projektmappenname können Sie einen Namen für das Projekt eingeben, der den Namen der Projektmappe enthält. Für dieses Lernprogramm sollten Sie den Standard-Projektmappennamen (beispielsweise MyFirstApp) beibehalten. Sie können Projektmappen verwenden, um mehrere Projekte zu organisieren, die miteinander in Verbindung stehen.
  7. Klicken Sie auf OK.

Möglicherweise sind Ihnen die Projektvorlagen aufgefallen, aus denen Sie unter Visual Studio auswählen können. Dies sind einige dieser Projektvorlagen.

  • Blank App (XAML) (Blank App): Eine einzelne Seite ohne vordefinierte Steuerelemente oder vordefiniertes Layout.
  • Raster-App (XAML) (Grid App): Drei Seiten, auf denen zwischen gruppierten, in einem Raster angeordneten Elementen navigiert wird. Auf den jeweiligen Seiten werden Einzelheiten zu den Gruppen und Elementen angezeigt.
  • Geteilte App (XAML) (Split App): Zwei Seiten, auf denen zwischen gruppierten Elementen navigiert wird. Auf der ersten Seite kann die Gruppe ausgewählt werden, auf der zweiten Seite wird eine Liste der Elemente dargestellt, neben der Einzelheiten zu den ausgewählten Elementen zu finden sind.
  • Klassenbibliothek (Windows Store-Apps): Eine verwaltete Klassenbibliothek für Windows Store-Apps oder Komponenten für Windows-Runtime.
  • Komponente für Windows-Runtime: Eine Komponente für Windows-Runtime, die, unabhängig von den verwendeten Programmiersprachen, in denen die Apps geschrieben sind, von Windows Store-Apps verwendet werden kann.
  • Komponententestbibliothek (Windows Store-Apps): Eine Reihe von Komponententests, die verwendet werden können, um Windows Store-Apps, Komponenten für Windows-Runtime und Klassenbibliotheken für Windows Store-Apps zu testen.

In diesem Lernprogramm verwenden Sie eine Kombination aus Extensible Application Markup Language (XAML) und C#, um Ihre erste Windows Store-App zu erstellen. XAML (ähnlich gesprochen wie "Semmel") ist eine deklarative Programmiersprache, die verwendet wird, um die UI der Windows Store-Apps zu erstellen. Wenn Sie bereits Erfahrung mit der Entwicklung von Android-UI haben, werden Sie keine Schwierigkeiten mit XAML haben, da es sich um eine XML-Datei handelt. Bei Ihren Windows Store-Apps sind Sie nicht auf XAML und C# beschränkt. Sie haben auch die Möglichkeit, eine Kombination von XAML und Microsoft Visual Basic, XAML und Microsoft Visual C++ oder HTML und JavaScript zu verwenden.

In der nächsten Lektion werden Sie das soeben erstellte Projekt näher kennenlernen.

Nach oben

Lektion 3: Kennenlernen des Projekts

In der vorherigen Lektion haben Sie Ihr erstes Windows Store-App-Projekt erstellt. In dieser Lektion lernen Sie das Projekt genauer kennen und erfahren etwas über einige seiner grundlegenden Dateien und Verzeichnisse. Sie finden diese Dateien und Verzeichnisse zu Ihrem Projekt im Fenster Projektmappen-Explorer von Visual Studio, wie im folgenden Screenshot dargestellt.

Fenster "Projektmappen-Explorer"

Datei "package.appxmanifest"

Dies ist das App-Manifest. Es handelt sich um ein XML-Dokument, das Informationen enthält, die das System benötigt, um Windows Store-Apps bereitzustellen, anzuzeigen und zu aktualisieren.

Android-Tipp

Die Datei Package.appxmanifest in einem Windows Store-App-Projekt ist mit der Datei AndroidManifest.xml vergleichbar, die von Android-Apps verwendet wird.

 

Dies sind einige der wichtigsten Punkte zur Manifestdatei.

  • Sie enthält die Paketidentität, Paketabhängigkeiten, erforderliche Funktionen, visuelle Elemente und Erweiterungspunkte.
  • Eine Paketmanifestdatei muss in jedem App-Paket enthalten sein.
  • Die Manifestdatei wird beim Signieren des App-Pakets digital signiert.
  • Nach dem Signieren können Sie die Manifestdatei ändern, ohne dass die Paketsignatur dadurch ungültig wird.
  • Nach der Installation des Pakets wird die Manifestdatei im Verzeichnis für das installierte Paket angezeigt.

Wenn Sie im Fenster Projektmappen-Explorer auf die Manifestdatei doppelklicken, sehen Sie eine UI, mit der Sie die verschiedenen Eigenschaften der Manifestdatei bearbeiten können. In diesem Lernprogramm werden wir die Manifestdatei jedoch nicht bearbeiten.

Die Dateien "MainPage.xaml" und "MainPage.xaml.cs"

XAML ist die deklarative Programmiersprache, die verwendet wird, um die UI der Windows Store-Apps zu erstellen. MainPage.xaml ist die Standardseite für Ihre App. Hier erstellen Sie die UI der App. MainPage.xaml.cs ist der entsprechende C#-Code, der zur UI gehört.

Visual Studio-Tipp

Die Datei *.xaml.cs, die einer *.xaml-Datei zugeordnet ist, wird als CodeBehind-Datei bezeichnet.

 

Eclipse-Tipp

Die Beziehung zwischen *.xaml- und *.xaml.cs-Dateien bei der Entwicklung von Windows Store-Apps ähnelt der Beziehung zwischen Layouts und Aktivitäten bei der Entwicklung von Android-Apps. Wenn Sie eine generische Android-App erstellen, wird eine activity_main.xml-Datei im Verzeichnis \res\layout\ erstellt. In dieser Datei definieren Sie die Benutzeroberfläche für Ihre Android-App. Außerdem wird eine MainActivity.java-Datei im Verzeichnis \src\ erstellt. Hier schreiben Sie den zur UI gehörenden Code. In unserem Windows Store-App-Projekt entspricht die Datei MainPage.xaml der Datei activity_main.xml in Android und die Datei MainPage.xaml.cs entspricht der Datei MainActivity.java.

 

Die Dateien "App.xaml" und "App.xaml.cs"

Die Datei App.xaml kann zum Speichern von Informationen über App-weite Ressourcen verwendet werden, zum Beispiel die Datei StandardStyle.xaml im Verzeichnis \Common\ des Projekts. Die Datei App.xaml.cs bietet App-spezifisches Verhalten. Sie ist der Ort, an dem die Verbindung zur Datei MainPage.xaml als Standardseite der App definiert ist.

Android-Tipp

Normalerweise sieht das Markup in etwa so aus, um die Standardaktivität einer Android-App in der Datei AndroidManifest.xml festzulegen:

<activity
    android:name="com.example.myfirstapp.MainActivity"
    android:label="@string/app_name" >
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>

Wenn Sie die Datei App.xaml.cs in Visual Studio öffnen und zum Ende der OnLaunched-Methode blättern, wird ein Code angezeigt, der in etwa so aussieht:


 rootFrame.Navigate(typeof(MainPage), e.Arguments);

Dieser Code zeigt die UI der Datei MainPage.xaml an, nachdem die App gestartet wurde.

 

Objektverzeichnis

Das Verzeichnis \Assets\ enthält Standardbilder, die beispielsweise für die Kacheln der App und den Begrüßungsbildschirm verwendet werden.

Eclipse-Tipp

Die Elemente im Verzeichnis \Assets\ eines Windows Store-App-Projekts sind mit den Elementen in den \res\drawable-*-Verzeichnissen von Android-Projekten vergleichbar.

 

In der nächsten Lektion erfahren Sie, wie Sie Ihre App ausführen können.

Nach oben

Lektion 4: Ausführen der App

In der vorherigen Lektion haben Sie das Windows Store-App-Projekt kennengelernt, das Visual Studio erstellt hat. Führen Sie nun die App aus diesem Projekt aus, um zu sehen, was geschieht. Sie können die App auf drei verschiede Arten ausführen: auf dem lokalen Computer, im Simulator oder auf einem Remotegerät. In dieser Lektion lernen Sie alle diese Arten die App auszuführen kennen.

Lokaler Computer

Wenn Sie die App auf Ihrem lokalen Entwicklungscomputer ausführen möchten, klicken Sie in Visual Studio auf die Standardsymbolleiste, und klicken Sie dann auf die Schaltfläche Lokaler Computer (Schaltfläche "Lokaler Computer"). Visual Studio führt folgende Aktionen aus:

  1. Die App wird erstellt.
  2. Die App wird gepackt.
  3. Die App wird bereitgestellt und auf dem lokalen Computer installiert.
  4. Die App wird gestartet.

Natürlich ist noch nicht viel zu erkennen, aber die App wird tatsächlich ausgeführt. Wenn Sie neugierig sind, wechseln Sie zum Windows Startbildschirm und vergewissern Sie sich, dass die App wirklich installiert wurde.

Simulator

Wenn Sie die App nicht auf Ihrem lokalen Computer bereitstellen möchten, können Sie alternativ auch den in Visual Studio enthaltenen Simulator verwenden. Der Simulator entspricht dem Emulator, den Sie bei Eclipse und Android nutzen können. Anders als beim Android-Emulator ist es jedoch nicht nötig, so etwas wie das AVD (Android Virtual Device) zu erstellen. Visual Studio erledigt das automatisch. Gehen Sie wie folgt vor, um die App im Simulator auszuführen:

  1. Klicken Sie in Visual Studio auf der Standardsymbolleiste neben der Schaltfläche Lokaler Computer auf den Dropdownpfeil (Schaltfläche "Lokaler Computer").
  2. Klicken Sie auf Simulator.
  3. Klicken Sie auf die Schaltfläche Simulator (Schaltfläche "Simulator").

Visual Studio führt folgende Aktionen aus:

  1. Die App wird erstellt.
  2. Die App wird gepackt.
  3. Der Simulator wird gestartet.
  4. Die App wird im Simulator bereitgestellt und installiert.
  5. Die App wird im Simulator gestartet.

Es gibt verschiedene Gründe, die App zunächst im Simulator und nicht auf Ihrem lokalen Computer auszuführen.

  • Der Simulator ermöglicht die Simulation von Fingereingaben. Dies ist hilfreich, wenn der Monitor Ihres lokalen Computers nicht über einen Touchscreen verfügt.
  • Im Simulator können Sie zwischen Hoch- und Querformat wechseln, um zu überprüfen, wie Ihre App bei unterschiedlichen Bildschirmausrichtungen aussieht.
  • Der Startbildschirm Ihres lokalen Computers wird nicht durch die Apps, die Sie testen, unübersichtlich.

Remotegerät

Eine weitere Alternative besteht darin, Ihre App auf einem Remotegerät bereitzustellen, das an dasselbe Netzwerk angeschlossen ist wie Ihr lokaler Entwicklungscomputer.

Android-Tipp

Eine App in Visual Studio auf einem Remotegerät bereitzustellen funktioniert ähnlich, als würden Sie bei Android ein echtes Gerät zum Testen verwenden.

 

Die Bereitstellung der App auf einem Remotegerät erfolgt in mehreren Schritten. Aber es ist die Mühe wert, vor allem, wenn Sie Ihre Apps auf Geräten wie Microsoft Surface Pro testen möchten. So richten Sie es ein:

  1. Laden Sie die Remotetools für Visual Studio vom Remotegerät herunter, und installieren Sie sie. Vergewissern Sie sich, dass Sie die Tools herunterladen und installieren, die der Architektur des Betriebssystems des Remotegeräts entsprechen: x86, x64 oder ARM. Die Tools finden Sie auf der Seite Windows 8.1 für Entwickler im Abschnitt "Verwandte SDKs".
  2. Führen Sie auf dem Remotegerät den Remotedebugger aus. Wenn Sie den Remotedebugger zum ersten Mal aufrufen, wird das Dialogfeld Konfiguration für Remotedebugging angezeigt.
  3. Wenn die Windows-Webdienste-API nicht installiert ist, klicken Sie auf die Installationsschaltfläche.
  4. Wählen Sie die Netzwerktypen aus, mit denen der Remotedebugger kommunizieren soll (beispielsweise Domänennetzwerke wie ein Arbeitsplatznetzwerk). Sie müssen mindestens einen Netzwerktyp auswählen.
  5. Klicken Sie auf Remotedebugging konfigurieren, um die Firewall des Remotegeräts zu konfigurieren und den Remotedebugmonitor zu starten.
  6. Sobald der Remotedebugmonitor ausgeführt wird, wird er auf dem Desktop des Remotegeräts angezeigt.

Wenn der Remotedebugger ausgeführt wird, können Sie die App auf dem Remotegerät bereitstellen. Tun Sie dies in Visual Studio auf dem lokalen Computer.

  1. Klicken Sie auf der Standardsymbolleiste neben der Schaltfläche Lokaler Computer (oder Simulator) auf den Dropdownpfeil.
  2. Klicken Sie auf Remotegerät.
  3. Blättern Sie im Dialogfeld Remote Debug Connections zum Eintrag für das Remotegerät, und klicken Sie darauf und anschließend auf Auswählen.
  4. Klicken Sie auf der Standardsymbolleiste auf die Schaltfläche Remotegerät (Schaltfläche "Remotegerät").

Visual Studio führt folgende Aktionen aus:

  1. Die App wird erstellt.
  2. Die App wird gepackt.
  3. Eine Verbindung zum Remotegerät wird hergestellt.
  4. Die App wird auf dem Remotegerät bereitgestellt und installiert.
  5. Die App wird auf dem Remotegerät gestartet.

Wenn Sie zum ersten Mal aus Visual Studio eine Verbindung zu diesem Remotegerät herstellen, wird möglicherweise ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, die Konsole des Remotegeräts zu überprüfen, um eine Entwicklerlizenz zu erhalten. Ebenso wie zum Ausführen von mit Visual Studio erstellten Apps auf Ihrem lokalen Entwicklungscomputer benötigen Sie eine Entwicklerlizenz auf dem Remotegerät, um mit Visual Studio erstellte Apps auszuführen. Befolgen Sie einfach die auf dem Bildschirm der Konsole des Remotegeräts angezeigten Schritte.

Visual Studio-Tipp

Nachdem Sie ausgewählt haben, wo Sie Ihre App ausführen möchten (lokaler Computer, Simulator oder Remotegerät), können Sie jetzt das Menü Debuggen in Visual Studio verwenden, um die App im Debugmodus auszuführen, den Code Schritt für Schritt zu überprüfen und so weiter.

 

In der nächsten Lektion beginnen Sie damit, die UI Ihrer App zu erstellen.

Nach oben

Lektion 5: Erstellen einer UI

Eine Windows Store-App besteht aus mehreren Seiten, aus denen die UI der App zusammengesetzt ist. Die einzelnen Seiten sind so konzipiert, dass der Endbenutzer sie zur Kommunikation mit der App verwenden kann. Eine Seite besteht aus Layoutsteuerelementen und verschiedenen Widgets. Der Endbenutzer sieht immer nur eine Seite gleichzeitig.

Android-Tipps

Eine Seite einer Windows Store-App ist mit einer Android-Aktivität vergleichbar.

Anders als bei Android gibt es bei Windows Store-Apps keine Schaltfläche "Zurück" auf der Systemebene und keine Schaltfläche "Nach oben" auf der App-Ebene. Allerdings haben Entwickler die Möglichkeit, innerhalb ihrer Windows Store-Apps Navigation mithilfe von ähnlichen Strukturen für "Zurück" oder "Nach oben" zu implementieren. Damit werden wir uns in Lektion 7 befassen.

 

Diese Tabelle stellt Android-Widgets ihren Entsprechungen in Windows Store gegenüber. Weitere Informationen finden Sie unter Aufgabenzuordnungen von Android zu Windows.

ZweckAndroidWindows Store

Anzeigen von Text

TextView

TextBlock

Bearbeiten von Text

EditText

TextBox

Optionsfeld

RadioButton

RadioButton

Kontrollkästchen

CheckBox

CheckBox

Eingabe der Uhrzeit

TimePicker

TimePicker

Eingabe des Datums

DatePicker

DatePicker

Schaltfläche zum Absenden

Button

Button

Statusanzeige

ProgressBar

ProgressBar

Anzeigen einer Liste von Komponenten

LinearLayout

StackPanel

Vertikale Komponentenliste

ListView

ListView

Zweidimensionales Raster

GridView

Grid

Anzeigen eines Bilds

ImageView

Image

 

Natürlich gibt es noch viel mehr davon. Wie bei den meisten Entwicklungsplattformen für Apps gibt es viele Möglichkeiten, dieselbe Aufgabe zu erfüllen. Beispielsweise können Sie eine vertikale Liste in einer Windows Store-App nicht nur über eine ListView-Ansicht anzeigen, Sie können auch ein StackPanel verwenden und die Ausrichtung entsprechend festlegen. Oder Sie können einen ProgressRing anstelle einer ProgressBar verwenden, um Statusänderungen anders darzustellen.

In dieser Lektion lernen Sie, wie Sie eine UI für Ihre Windows Store-App erstellen können.

Schritt 1: Hinzufügen eines Textfelds

Sie möchten Ihre UI mit einer Beschriftung, die dem Benutzer sagt, was er tun soll, einem Feld, in das er Text eingeben kann, und einer Schaltfläche versehen. Beginnen Sie damit, in Visual Studio das Textfeld hinzuzufügen. Das geht so:

  1. Öffnen Sie im Fenster Projektmappen-Explorer die Datei MainPage.xaml.
    Visual Studio-Tipp

    Wenn Sie eine *.xaml-Datei öffnen, wird standardmäßig eine geteilte Design/XAML-Ansicht angezeigt. Standardmäßig wird oben ein Visual Designer angezeigt und unten das vom Designer generierte Markup. Wenn Sie die XAML direkt ändern möchten und mehr Platz auf dem Bildschirm für die XAML-Ansicht benötigen, können Sie auf die Schaltfläche mit dem Pfeil nach oben/unten (Schaltfläche "Pfeil nach oben/unten") zwischen der Design- und der XAML-Ansicht klicken, um mehr von der XAML-Ansicht zu sehen. Alternativ dazu können Sie auf die Schaltfläche mit dem Doppelchevron (Schaltfläche "Doppelchevron") zwischen der Design- und der XAML-Ansicht klicken, um die Design-Ansicht vollständig zu minimieren.

     

  2. Fügen Sie ein <StackPanel>-Element zu dem <Grid>-Element hinzu, das von Visual Studio hinzugefügt wurde, als die Seite ursprünglich erstellt wurde. Legen Sie als x:Name-Attribut "StackPanel" und als Orientation-Attribut "Vertikal" fest. Ihr Markup sollte wie folgt aussehen:
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="theStackPanel" Orientation="Vertical"></StackPanel>
    </Grid>
    
    
    Visual Studio-Tipp

    Sie können auch ein StackPanel-Steuerelement aus dem Fenster Toolbox in den Visual Designer ziehen und den dazugehörigen Standard-XAML-Code, den Visual Studio erzeugt, zum vorherigen Markup passend abändern. Manchmal kann es jedoch einfacher sein, den XAML-Code manuell einzugeben, wenn Sie Steuerelemente direkt zu Beginn genau so positionieren und schachteln möchten, wie Sie es möchten. Beachten Sie dabei auch, dass eines der Merkmale von StackPanel-Steuerelementen darin besteht, dass sie ihre untergeordneten Steuerelemente automatisch positionieren. Wenn Sie die Steuerelemente innerhalb eines StackPanel an einen anderen Ort ziehen, wird lediglich der dazugehörige XAML-Code neu arrangiert, sodass diese Beziehungen auch visuell dargestellt werden.

     

    Android-Tipps

    Die StackPanel-Klasse in Windows Store-Apps entspricht der LinearLayout-Klasse in Android-Apps. Sie ermöglicht es Ihnen, die untergeordneten Elemente entweder horizontal oder vertikal auszurichten.

    Das Attribut x:Name in Windows Store-Apps ist mit dem Attribut android:id in Android-Apps vergleichbar. Allerdings müssen Sie das Attribut x:Name für rein visuelle Elemente nicht angeben.

    Das Attribut Orientation in Windows Store-Apps ist mit dem Attribut android:Orientation aus der LinearLayout-Klasse in Android-Apps identisch. Der Standardwert für das Attribut Orientation ist "Vertikal".

     

  3. Fügen Sie nun ein <TextBox>-Element innerhalb des <StackPanel>-Elements ein. Geben Sie unbedingt ein x:Name-Attribut dafür ein ("theMessage"), damit Sie sich später im Code darauf beziehen können. Ihr Markup sollte wie folgt aussehen:
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="theStackPanel" Orientation="Vertical">
            <TextBox x:Name="theMessage"></TextBox>
        </StackPanel>
    </Grid>
    
    

Schritt 2: Hinzufügen von Zeichenfolgenressourcen

Als Nächstes fügen Sie Ihrer Seite eine Beschriftung hinzu, die dem Benutzer eine Anweisung gibt. Auch wenn Sie vielleicht ein <TextBlock>-Element hinzufügen und als Text-Attribut den Hinweistext angeben möchten, der angezeigt werden soll, ist dies im Hinblick auf die Lokalisierung nicht ratsam. Fügen Sie Ihrem Projekt eine Ressourcendatei hinzu, in der Sie den Text speichern, der auf der UI angezeigt werden soll, bevor Sie die Beschriftung zu der Seite hinzufügen.

So fügen Sie eine Ressourcendatei hinzu:

  1. Klicken Sie mit der rechten Maustaste im Fenster Projektmappen-Explorer auf das Projekt, und klicken Sie auf Hinzufügen > Neuer Ordner, wie im folgenden Screenshot dargestellt. Geben Sie dem Ordner den Namen Strings.

    Visual Studio-Menübefehl "Neuen Ordner hinzufügen"

  2. Klicken Sie mit der rechten Maustaste auf den Ordner Strings, und klicken Sie auf Hinzufügen > Neuer Ordner. Geben Sie dem Ordner den Namen en-US.
  3. Klicken Sie mit der rechten Maustaste auf den Ordner en-US, und klicken Sie auf Hinzufügen > Neues Element.
  4. Klicken Sie im mittleren Bereich auf Ressourcendatei (.resw), und klicken Sie auf Hinzufügen, wie im folgenden Bildschirmfoto dargestellt:Visual Studio-Dialogfeld "Neues Element hinzufügen"

    Android-Tipp

    Eine Ressourcendatei (*.resw) in Windows Store-Apps ist mit der Datei \res\values\strings.xml in Android-Projekten vergleichbar.

     

    Das Fenster Projektmappen-Explorer sollte nun wie im folgenden Screenshot aussehen.

    Fenster "Projektmappen-Explorer" in Visual Studio mit sichtbarer Ressourcendatei
  5. Wenn die Datei Resources.resw nicht automatisch geöffnet wird, doppelklicken Sie im Fenster Projektmappen-Explorer darauf, um sie zu öffnen.
  6. Geben Sie im Feld Name"messageLabel.Text" ein. Geben Sie im Feld Wert"Enter a message" ein. Das Ergebnis sollte aussehen wie im folgenden Screenshot.

    Ressourcendatei mit sichtbarem messageLabel-Eintrag

Der Name der Zeichenfolgenressource ist wichtig. Der erste Teil ist der Name eines visuellen Elements, für das die Ressource verwendet werden soll (hier messageLabel). Der zweite Teil ist der Name der Eigenschaft des visuellen Elements, für das die Ressource verwendet werden soll (hier die Eigenschaft Text).

Schritt 3: Hinzufügen einer Beschriftung

Jetzt, wo Sie eine Ressourcendatei erstellt haben, können Sie Ihrer Seite eine Beschriftung hinzufügen. Öffnen Sie die Datei MainPage.xaml, und fügen Sie ein <TextBlock>-Element vor dem <TextBox>-Element ein. Geben Sie als x:Name-Attribut dafür "messageLabel" und beim Text-Attribut eine leere Zeichenfolge an. Damit die richtige Zeichenfolge verwendet wird, geben Sie als x:Uid-Attribut den entsprechenden Ressourcennamen ("messageLabel") an. Ihr Markup sollte nun wie folgt aussehen:


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel x:Name="theStackPanel" Orientation="Vertical">
        <TextBlock x:Uid="messageLabel" x:Name="messageLabel" Text=""></TextBlock>
        <TextBox x:Name="theMessage"></TextBox>
    </StackPanel>
</Grid>

Schritt 4: Hinzufügen einer Schaltfläche

Zuletzt fügen Sie der Seite eine Schaltfläche hinzu, damit Sie den vom Benutzer eingegebenen Text an eine zweite Seite senden können. Bevor Sie die Schaltfläche hinzufügen, müssen Sie einen Eintrag in der Datei Resources.resw hinzufügen. Geben Sie im Feld NamesendButton.Content und im Feld WertSend an. Das Ergebnis sollte aussehen wie im folgenden Screenshot.

Ressourcendatei mit sichtbarem sendButton-Eintrag

Fügen Sie nun ein <Button>-Element nach dem <TextBox>-Element ein. Geben Sie als x:Name-Attribut dafür "sendButton" an, und beim Content-Attribut eine leere Zeichenfolge. Geben Sie außerdem beim x:Uid-Attribut "sendButton" für die Lokalisierung an. Ihr Markup sollte nun wie folgt aussehen:


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel x:Name="theStackPanel" Orientation="Vertical">
        <TextBlock x:Uid="messageLabel" x:Name="messageLabel" Text=""></TextBlock>
        <TextBox x:Name="theMessage"></TextBox>
        <Button x:Uid="sendButton" x:Name="sendButton" Content=""></Button>
    </StackPanel>
</Grid>

Versuchen Sie nun einmal, Ihre App auszuführen: Klicken Sie im Menü Debuggen von Visual Studio auf Debuggen starten. Wenn Sie die App anhalten möchten, klicken Sie im Menü Debuggen auf Debuggen beenden. Sie werden feststellen, dass noch nichts geschieht, wenn Sie auf die Schaltfläche Send klicken. Damit werden wir uns in der nächsten Lektion befassen.

Nach oben

Lektion 6: Erstellen einer zweiten Seite

In der vorherigen Lektion haben Sie eine UI erstellt, die Texteingaben von Benutzern akzeptiert. In dieser Lektion erstellen Sie eine zweite Seite innerhalb Ihrer App, auf der die Texteingabe des Benutzers angezeigt wird, nachdem er auf die Schaltfläche Send klickt.

Schritt 1: Erstellen der zweiten Seite

  1. Klicken Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf das Projekt und anschließend auf Hinzufügen > Neues Element. Klicken Sie im mittleren Bereich auf Leere Seite. Nennen Sie sie SecondPage.xaml, und klicken Sie auf Hinzufügen, wie im folgenden Screenshot dargestellt.

    Visual Studio-Dialogfeld "Neues Element hinzufügen", "Leere Seite" ausgewählt
  2. Wenn die Datei SecondPage.xaml nicht automatisch geöffnet wird, doppelklicken Sie im Fenster Projektmappen-Explorer darauf, um sie zu öffnen.
  3. Fügen Sie nun ein <TextBlock>-Element zu dem <Grid>-Element hinzu. Legen Sie als x:Name-Attribut "messageFromUser" fest. Ihr Markup sollte wie folgt aussehen:
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="messageFromUser"></TextBlock>
    </Grid>
    
    

Schritt 2: Auf die Schaltfläche "Senden" reagieren

Sie können die Texteingabe des Benutzers von der MainPage nun auf der SecondPage wie folgt anzeigen.

  1. Öffnen Sie die Datei MainPage.xaml.
  2. Fügen Sie dem Click-Attribut ein <Button>-Element hinzu, und geben Sie "sendButton_Click" dafür an. Gleich werden Sie die Implementierung hierfür codieren. Ihr Markup sollte nun wie folgt aussehen:
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="theStackPanel" Orientation="Vertical">
            <TextBlock x:Uid="messageLabel" x:Name="messageLabel" Text=""></TextBlock>
            <TextBox x:Name="theMessage"></TextBox>
            <Button x:Uid="sendButton" x:Name="sendButton" Content="" Click="sendButton_Click"></Button>
        </StackPanel>
    </Grid>
    
    

    Android-Tipp

    Das Click-Attribut des <Button>-Elements von Windows Store-Apps ist mit dem android:onClick-Attribut des <Button>-Elements von Android vergleichbar.

     

  3. Öffnen Sie die Datei MainPage.xaml.cs (die CodeBehind-Datei für die MainPage.xaml-Datei), und fügen Sie eine Definition für die sendButton_Click-Methode hinzu.
    Visual Studio-Tipp

    Wenn die Datei MainPage.xaml.cs im Fenster Projektmappen-Explorer nicht angezeigt wird, erweitern Sie die Datei MainPage.xaml, um die CodeBehind-Datei MainPage.xaml.cs zu sehen. Doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um deren Code einzusehen, wie im folgenden Screenshot dargestellt.

    Fenster "Projektmappen-Explorer"

     

    Ihr Markup dürfte wie folgt aussehen:

    
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
        private void sendButton_Click(object sender, RoutedEventArgs e)
        {
        
        }
    }
    
    
  4. Fügen Sie der Methode sendButton_Click Code hinzu, um zur SecondPage zu navigieren und die Texteingabe des Benutzers aufzurufen. Ihr Code sollte wie folgt aussehen:
    
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
    
        private void sendButton_Click(object sender, RoutedEventArgs e)
        {
            // Get the user's text from the <TextBox> element.
            var message = this.theMessage.Text;
    
            // If there is no text, provide some default text.
            if (string.IsNullOrEmpty(message))
            {
                message = "Hello, World!";
            }
            
            // Show SecondPage.xaml.
            this.Frame.Navigate(typeof(SecondPage), message);
        }
    }
    
    
    Android-Tipp

    In Android würden Sie eine Instanz der Klasse Intent erstellen und die Methode startActivity aufrufen, um zur zweiten Seite zu wechseln. Verwenden Sie dazu Code wie diesen:

    public void sendButton_Click(View view) {
        Intent intent = new Intent(this, SecondPageActivity.class);
        startActivity(intent);
    }

     

Wenn Sie die App jetzt ausführen, wird, wenn Sie auf die Schaltfläche Send klicken, die SecondPage angezeigt. Allerdings wird der Text des Benutzers von der MainPage noch nicht angezeigt. Das codieren wir im nächsten Schritt.

Schritt 3: Anzeigen der Texteingabe

  1. Öffnen Sie die Datei SecondPage.xaml.cs (die CodeBehind-Datei für die Datei SecondPage.xaml).
  2. Fügen Sie die OnNavigatedTo-Methode und den folgenden Code hinzu:
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // Get the user's text that was sent from MainPage.xaml.
        var message = (string)e.Parameter;
    
        // Show the user's text in the <TextBlock> element.
        this.messageFromUser.Text = message;
    }
    
    

Führen Sie die App aus, und klicken Sie auf die Schaltfläche Send. Die SecondPage wird mitsamt des vom Benutzer eingegebenen Textes angezeigt. Beachten Sie jedoch, dass Sie von der SecondPage nicht zur MainPage zurückkehren können. Dieses Problem werden Sie in der nächsten Lektion lösen.

Nach oben

Lektion 7: Hinzufügen einer "Zurück"-Navigation

Die Hardware von Windows 8-Geräten verfügt nicht über eine "Zurück"-Taste. Sie können jedoch eine Komponente der UI und Code für die Rückwärtsnavigation hinzufügen. In dieser Lektion erfahren Sie, wie Sie von der SecondPage auf die MainPage zurückkehren können.

  1. Öffnen Sie die Datei SecondPage.xaml. Integrieren Sie ein <TextBlock>-Element in ein <StackPanel>-Element, und ändern Sie die Ausrichtung des <StackPanel>-Elements in "Vertikal". Ihr Markup sollte wie folgt aussehen:
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <TextBlock x:Name="messageFromUser"></TextBlock>
        </StackPanel>
    </Grid>
    
    
  2. Öffnen Sie die Datei Resources.resw, und fügen Sie einen neuen Eintrag hinzu. Geben Sie im Feld NamegoBack.Content und im Feld WertGo back an.
  3. Öffnen Sie die Datei SecondPage.xaml. Fügen Sie ein <Button>-Element nach dem <TextBlock>-Element hinzu, und geben Sie für die Attribute x:Name, x:Uid, Content und Click"goBack", "goBack", eine leere Zeichenfolge und "goBack_Click" an. Ihr Markup sollte nun wie folgt aussehen:
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <TextBlock x:Name="messageFromUser"></TextBlock>
            <Button x:Name="goBack" x:Uid="goBack" Content="" Click="goBack_Click"></Button>
        </StackPanel>
    </Grid>
    
    
  4. Öffnen Sie die Datei SecondPage.xaml.cs, und fügen Sie eine Implementierung der goBack_Click-Methode hinzu. Ihr Code sollte wie folgt aussehen:
    
    public sealed partial class SecondPage : Page
    {
        public SecondPage()
        {
            this.InitializeComponent();
        }
    
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Get the user's text that was sent from MainPage.xaml.
            var message = (string)e.Parameter;
    
            // Show the user's text in the <TextBlock> element.
            this.messageFromUser.Text = message;
        }
    
        private void goBack_Click(object sender, RoutedEventArgs e)
        {
            // Go back to MainPage.xaml, if the page allows.
            if (this.Frame.CanGoBack)
            {
                this.Frame.GoBack();
            }
        }
    }
    
    
    Android-Tipp

    Wenn Sie etwas Ähnliches in Android vornehmen möchten, können Sie "Nach oben" in der Aktionsleiste in der onCreate-Methode Ihrer Aktivität aktivieren und dazu etwa folgenden Code verwenden:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        ...
        getActionBar().setDisplayHomeAsUpEnabled(true);
        ...
    }

     

Führen Sie nun die App aus, und klicken Sie auf die Schaltfläche Send und dann auf die Schaltfläche Go back.

Nach oben

Nächste Schritte

Sie haben gerade Ihre erste Windows Store-App erstellt, konzipiert, codiert und ausgeführt. Weitere Informationen über das Erstellen von Windows Store-Apps finden Sie in diesen Ressourcen, die speziell für Android-Entwickler zusammengestellt wurden.

Nach oben

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.