Windows Dev Center

Erste Schritte für Android-Entwickler

Wenn Sie Android-Apps entwickeln und auch Apps für Windows 8.1 oder Windows Phone 8.1 entwickeln möchten, bildet dieser Artikel einen sehr guten Einstieg. Hier erfahren Sie, wie Sie Microsoft-Entwicklungstools wie Microsoft Visual Studio und Microsoft-Programmiersprachen wie C# verwenden. Es werden einige der Konzepte vorgestellt, die Sie kennen müssen, um Apps für die neue Windows-UI in Windows 8.1 und Windows Phone 8.1 zu entwickeln.

Mit Windows 8.1 und Windows Phone 8.1 wird eine neue Plattform zum Erstellen beeindruckender Apps eingeführt. Da diese Apps viele einzigartige Features bieten, führt die einfache Portierung einer Android-App höchstwahrscheinlich dazu, dass Sie und die Benutzer die Vorteile dieser Features nicht nutzen können. Vermeiden Sie es daher, Ihre App einfach zu portieren: Überdenken Sie sie stattdessen noch einmal, und nutzen Sie Features wie die App-Leiste, semantischen Zoom, die Such- und Freigabeverträge, die Dateiauswahl, Charms, Live-Kacheln, Info-Center und Popupbenachrichtigungen.

Das folgende Video zeigt eine kurze Gegenüberstellung von Eclipse und Visual Studio.

Anfordern von Windows 8.1 und den Tools zur App-Entwicklung

Für diese Vorgehensweisen benötigen Sie einen Computer, auf dem Windows 8.1 und Microsoft Visual Studio 2013 Update 2 installiert sind. Sie können diese Software auf der Seite Windows 8.1 für Entwickler herunterladen.

Wenn Sie Visual Studio 2013 Update 2 zum ersten Mal starten, werden Sie aufgefordert, eine Entwicklerlizenz anzufordern. Befolgen Sie dazu einfach die Anweisungen auf dem Bildschirm. Mithilfe der Lizenz können Sie Windows Store-Apps auf Ihrem lokalen Computer erstellen und testen, bevor Sie sie an den Windows Store senden. Anstelle eines PCs können Sie auch einen Mac nutzen. Weitere Informationen finden Sie unter Einrichten des Mac.

Zum Vergleich: Wenn Sie mit der Entwicklung einer Android-App begonnen haben, mussten Sie zunächst die Java-Laufzeit-Umgebung (JRE), dann die integrierte Entwicklungsumgebung (IDE) Eclipse, das Android-Softwareentwicklungskit (SDK) und das Android Development Tools-(ADT-)Plug-In installieren.

Erstellen eines Projekts

In dieser exemplarischen Vorgehensweise möchten wir Ihnen die Grundlagen von Visual Studio vorstellen und diese mit ähnlichen Funktionen in Eclipse vergleichen. Jedes Mal, wenn Sie eine App erstellen, führen Sie Schritte aus, die sich an dieser Beschreibung orientieren.

Wenn Sie eine Android-App entwickeln möchten, starten Sie Eclipse für Android, und erstellen Sie ein neues Projekt, indem Sie auf File > New > Android Application Project (Datei > Neu > Android-Anwendungsprojekt) tippen (siehe Abbildung).

Eclipse-Menübefehl für neues Android-App-Projekt

Nachdem Sie in Eclipse ein neues Projekt angelegt haben, können Sie wie in der nachstehenden Abbildung gezeigt den Aktivitätstyp wählen.

Eclipse-Seite für neue Aktivität

In Microsoft Visual Studio wird zunächst die Startseite angezeigt, wie in der folgenden Abbildung dargestellt.

Visual Studio-Startbildschirm

Zum Erstellen einer neuen App müssen Sie zunächst ein neues Projekt anlegen. Gehen Sie hierzu folgendermaßen vor:

  • Tippen Sie im Bereich Start auf Neues Projekt.
  • Tippen Sie auf das Menü Datei und dann auf Neues Projekt.

Sie können aus einer Vielzahl von Projektvorlagen wählen, wie in der folgenden Abbildung dargestellt.

Visual Studio-Dialogfeld für neues Projekt

Hinweis  Mit Visual Studio 2013 Update 2 werden Universal Windows-Apps eingeführt. Dabei handelt es sich um Apps, mit denen eine einzelne Projektmappe Windows 8.1- und Windows Phone 8.1-Projekte sowie (optionalen) geteilten Code und Ressourcen enthalten kann. Mit universellen Apps können so auf einfache Weise für beide Gerätefamilien gleichzeitig Projekte entwickelt werden. Statt Tests zur Laufzeit durchzuführen, verwenden Sie in der Praxis zur Kompilierzeit eine Mischung aus gemeinsam genutzten und plattformspezifischen Quelldateien. Weitere Informationen finden Sie unter Erstellen universeller Windows-Apps für alle Windows-Geräte und Verwenden von Visual Studio zum Entwickeln von zusammengeführten XAML-Apps.

Android-Tipp

Die Windows Store-Projektvorlage in Visual Studio ähnelt der Projektvorlage Android Application Project, die Eclipse durch die Installation der Android Developer Tools (ADT) hinzugefügt wird.

 

Tippen Sie in dieser exemplarischen Vorgehensweise auf Visual C# und dann auf Store Apps, Universal Apps und Blank App (Universal Apps). Geben Sie "MyApp" in das Feld Name ein, und tippen Sie dann auf OK. Daraufhin erstellt Visual Studio Ihr erstes Projekt und zeigt es an. Nun können Sie mit dem Designen der App beginnen und Code hinzufügen.

Android-Tipp

Das Feld Speicherort im Dialogfeld Neues Projekt in Visual Studio ähnelt dem Arbeitsbereich in Eclipse.

 

Während bei einem Android-Eclipse-Projekt eine Aktivität nach der anderen erstellt wird, gibt es in Visual Studio Projektvorlagen, mit denen Apps mit mehreren Seiten und der entsprechenden Navigation zwischen diesen Seiten erstellt werden können.. Die Vorlage Leere App erstellt dagegen eine App mit nur einer Seite. Aber keine Sorge, wir zeigen Ihnen später noch, wie man eine zweite Seite und die entsprechende Navigation hinzufügt.

Nach oben

Auswählen einer Programmiersprache

Bevor wir weiter ins Detail gehen, sollten Sie die Programmiersprachen kennen, die Ihnen bei der Entwicklung von Windows Store-Apps und Windows Phone Store-Apps zur Verfügung stehen. Obwohl bei der exemplarischen Vorgehensweise in diesem Artikel C# verwendet wird, können Sie Apps mit C#, Visual Basic, C++ und JavaScript entwickeln.

Obwohl wir uns in diesem Artikel auf C# konzentrieren, bieten die restlichen Sprachen ebenfalls klare Vorteile, die Sie kennen sollten. Wenn Sie bei der App beispielsweise in erster Linie Wert auf die Leistung legen, ist C++ möglicherweise die richtige Wahl (insbesondere bei einer aufwändigen Grafik). Die Microsoft .NET-Version von Microsoft Visual Basic ist hervorragend für Visual Basic-App-Entwickler geeignet. JavaScript mit HTML5 und die Windows-Bibliothek für JavaScript (WinJS) sind eine gute Wahl für Entwickler mit Webentwicklungshintergrund. Weitere Informationen finden Sie unter einem der folgenden Themen:

Hinweis  Bei Apps mit 3D-Grafiken sind die Standards OpenGL und OpenGL ES für Windows 8.1- und Windows Phone 8.1-Geräte nicht verfügbar. Sie können jedoch Microsoft DirectX mit C++ verwenden. DirectX 11.1 unterstützt eine programmierbare Pipeline. Zudem kommt HLSL (Microsoft High Level Shader Language) zum Einsatz. Dabei handelt es sich um eine Sprache, die mit GLSL (OpenGL Shading Language) vergleichbar ist. Weitere Informationen zu DirectX finden Sie unter den folgenden Themen:

Als Android-Entwickler sind Sie mit Java vertraut. Unserer Meinung nach ist C# die Microsoft-Programmiersprache, die Java am ähnlichsten ist. Daher konzentrieren sich die Informationen und Anleitungen in diesem Artikel auf diese Sprache. Weitere Informationen zu C# finden Sie unter den folgenden Themen:

Es folgt ein Vergleich einer Klasse, die sowohl in Java als auch in C# geschrieben wurde. Die Java-Version wird zuerst dargestellt. Die C#-Version folgt danach. Sie werden sehen, dass der Aufbau sehr ähnlich ist. Das erleichtert den Einstieg in C#. Dieses Beispiel zeigt auch, dass es kleine Unterschiede bei der Groß-/Kleinschreibung und der Dokumentationssyntax gibt. Außerdem werden Sie sehen, dass C#-Klassen explizite Eigenschaften haben können, anstatt die herkömmlichen Getter- und Setter-Methoden zu verwenden, die Sie von Java kennen.


package com.example.MyApp;

// Java class definition.
/** 
 * The Counter class shows key aspects of a Java class.
 */
public class Counter {
    private int count; // Private variables are not visible outside.

    public Counter() 
    {
        count = 0; // Initialize the local variable.
    }

    public int getValue()  // Getter for the local variable.
    {
        return count;      
    }

    public void setValue(int value) // Setter for the local variable.
    {
        count = value;         
    }	

    public int increment(int delta)
    {
    	   // Add the delta to the local count, and then return.
    	   count += delta;
        return count;
    }        

    public int increment()
    {
        return increment(1);
    }    
}

// Java usage.
import com.example.myapp.Counter;

Counter myCounter = new Counter();
int count = myCounter.getValue();
myCounter.setValue(5);
count = myCounter.increment();



// C# class definition.
namespace MyApp
{
    public class Counter
    {
        private int count; // Private variable not visible outside of the class.

        public Counter()
        {
            count = 0; // Initialize the local variable.
        }

        public int Value // Getter for the local variable.
        {
            get
            {
                return count;
            }
            set
            {
                count = value;
            }
        }

        /// <summary>
        /// Increments the counter by the delta.
        /// </summary>
        /// <param name="delta">delta</param>
        /// <returns>Returns the resulting counter.</returns>
        public int Increment(int delta)
        {
            // Add the delta to the local count, and then return.
            count += delta;
            return count;
        }

        public int Increment()
        {
            return Increment(1);
        }
    }

// C# usage.
using MyApp;

Counter myCounter = new Counter();
int count = myCounter.Value;
myCounter.Value = 5;
count = myCounter.Increment();


Wenn Sie mit C# zu arbeiten beginnen, finden Sie vielleicht die folgenden Themen hilfreich:

Nach oben

Aufbau von Visual Studio

Kehren wir nun zum Projekt "MyApp" zurück, das Sie zuvor erstellt haben. Dabei soll der Aufbau der integrierten Entwicklungsumgebung (IDE) von Visual Studio veranschaulicht werden.

Android-Entwickler, die mit Eclipse arbeiten, sollten die in der folgenden Abbildung dargestellte Standardansicht kennen. Dabei befinden sich die Quelldateien im linken Bereich, und der Editor (für UI oder Code) ist in der Mitte angeordnet. Im Bereich auf der rechten Seite sind die Steuerelemente und die zugehörigen Eigenschaften angeordnet.

Integrierte Entwicklungsumgebung von Eclipse

Visual Studio ist ähnlich aufgebaut, obwohl sich die Steuerelemente in der Standardansicht auf der linken Seite in der Toolbox befinden. Die Quelldateien befinden sich im Projektmappen-Explorer auf der rechten Seite, und die Eigenschaften werden unter Eigenschaften auf der rechten Seite aufgeführt. Dieser Aufbau ist in der folgenden Abbildung dargestellt. Beachten Sie, dass es bei einer Universal Windows-App drei Verzweigungen in der Projektmappenansicht gibt: eine für die Windows-App, eine für die Windows Phone-App und eine für geteilte Inhalte.

Visual Studio-Entwicklungsumgebung

Android-Tipps

Der Projektmappen-Explorer in Visual Studio funktioniert ähnlich wie Package Explorer in Eclipse.

Die Datei "ampPackage.appxmanifest" im Projektmappen-Explorer ähnelt der Datei "AndroidManifest.xml", die für Android-Apps verwendet wird.

Im Projektmappen-Explorer entsprechen die Dateien im Verzeichnis Assets in etwa den Elementen in den Verzeichnissen \res\drawable-*\ von Android-Projekten.

 

Wenn Sie für die Quelldateien die linke Seite und für die Steuerelemente die rechte Seite bevorzugen, können Sie die Bereich in Visual Studio neu anordnen. Oder Sie können wie in Eclipse die benötigten Fenster auswählen und beliebig anordnen. Wenn Sie z. B. die Toolbox von der linken Bildschirmseite auf die rechte Seite verschieben möchten, halten Sie die Titelleiste des Bereichs Toolbox gedrückt, ziehen Sie sie, und legen Sie sie dann am Dropziel ganz rechts ab, das in der Mitte des Bildschirms angezeigt wird. In Visual Studio wird ein schattiertes Feld angezeigt, das die Andockposition der Toolbox nach dem Ablegen angibt.

Wenn die IDE wie in der vorherigen Abbildung aussehen soll, führen Sie die folgenden Schritte aus:

  1. Halten Sie im Projektmappen-Explorer die Datei MainPage.xaml (entweder die Windows 8.1- oder die Windows Phone 8.1-Version) gedrückt, um sie zu öffnen.
  2. Tippen Sie auf der linken Seite auf Toolbox, um sie anzuzeigen. Tippen Sie dann in der Titelleiste des Bereichs Toolbox auf das Reißzweckensymbol, um die Toolbox anzuheften. Dies wird in der folgenden Abbildung dargestellt.
Anheften der Toolbox in Visual Studio

Nach oben

Hinzufügen von Steuerelementen, Festlegen der zugehörigen Eigenschaften und Reagieren auf Ereignisse

Lassen Sie uns dem MyApp-Projekt nun einige Steuerelemente hinzufügen. Anschließend ändern wir einige der Steuerelementeigenschaften und schreiben Code, um auf eines der Steuerelementereignisse zu reagieren.

Wenn Sie in Eclipse Steuerelemente hinzufügen möchten, öffnen Sie die Aktivitäts-XML-Datei im Grafik-Modus und fügen dann die gewünschten Steuerelemente hinzu, z. B. Button, EditText oder TextView, wie in der nachstehenden Abbildung gezeigt. XAML-Dateien in Visual Studio ähneln XML-Dateien für Android.

Grafikeditor in Eclipse

Lassen Sie uns nun einen ähnlichen Vorgang in Visual Studio ausführen. Halten Sie in der Toolbox das TextBox-Steuerelement gedrückt, und legen Sie es entweder auf der Windows 8.1- oder der Windows Phone 8.1-Version der Entwurfsoberfläche der Datei MainPage.xaml ab. Wiederholen Sie den Vorgang mit dem Button-Steuerelement, und legen Sie es unter dem TextBox-Steuerelement ab. Platzieren Sie zuletzt wie in der Abbildung gezeigt das TextBlock-Steuerelement unter dem Button-Steuerelement.

Ansicht: Visual Studio Hauptseite

Ähnlich wie die Android-Grafik-XML-Dateien in Eclipse zeigen die .xaml-Dateien in Visual Studio Grafikeigenschaften von Benutzeroberflächen in einer umfangreichen, deklarativen Sprache dar. Weitere Informationen zu Extensible Application Markup Language (XAML) finden Sie in der XAML-Übersicht. Alle im Bereich Entwurf angezeigten Inhalte werden im XAML-Bereich definiert. Dieser Bereich ermöglicht bei Bedarf eine genauere Steuerung, und sobald Sie sich eingearbeitet haben, kommen Sie mit dem Scheiben von Code schneller voran. An dieser Stelle konzentrieren wir uns jedoch ausschließlich auf den Bereich Entwurf und die Eigenschaften.

Visual Studio-Tipps

Die mit einer *.xaml-Datei verknüpfte *.xaml.cs-Datei wird als CodeBehind-Datei bezeichnet.

Eine *.xaml-Datei wird standardmäßig in einer geteilten Ansicht Entwurf/XAML geöffnet. Standardmäßig wird oben ein Visual Designer angezeigt und unten das vom Designer generierte Markup. Wenn Sie das XAML direkt bearbeiten möchten und mehr Platz in der Ansicht XAML benötigen, klicken Sie entweder auf die Pfeilschaltfläche zwischen den Ansichten Entwurf und XAML, um die Ansicht XAML zu vergrößern, oder klicken Sie auf die Schaltfläche zwischen den Ansichten Entwurf und XAML, um die Ansicht Entwurf vollständig zu minimieren.

 

Android-Tipp

Die Beziehung zwischen *.xaml- und *.xaml.cs-Dateien entspricht in etwa der Beziehung zwischen Layouts und Aktivitäten bei der Android-Entwicklung. Beim Erstellen einer generischen Android-App in Eclipse sehen Sie im Verzeichnis \res\layout\ des Projekts eine Datei "activity_main.xml". In dieser Datei definieren Sie die Benutzeroberfläche für Ihre Android-App. Im Verzeichnis \src\ des Projekts sehen Sie außerdem eine Datei "MainActivity.java". In dieser Datei schreiben Sie den Code zur Benutzeroberfläche der App. In unserem Visual Studio-Projekt entspricht die Datei "MainPage.xaml" der Datei "activity_main.xml" in Eclipse, und die Datei "MainPage.xaml.cs" in Visual Studio entspricht der Datei "MainActivity.java" in Eclipse.

 

Lassen Sie uns nun Inhalt und Namen der Schaltfläche ändern. Zum Ändern der Schaltflächeninhalte in Eclipse ändern Sie wie in der folgenden Abbildung dargestellt im Eigenschaftsbereich der Schaltfläche den Wert der Text-Eigenschaft.

Ressourcen-Auswahl in Eclipse

In Visual Studio gehen Sie ähnlich vor. Tippen Sie im Bereich Entwurf auf das Button-Steuerelement, damit es den Fokus erhält. Wenn Sie nun die Schaltflächeninhalte ändern möchten, ändern Sie im Bereich Eigenschaften den Wert des Felds Inhalt von "Button" in "Say Hello". Wenn Sie nun den Namen der Schaltfläche ändern möchten, ändern Sie den Wert im Feld Name wie in der folgenden Abbildung dargestellt von "<No Name>" in "sayHelloButton".

Schaltflächen-Eigenschaften in Visual Studio

Ändern wir nun den Namen und die Inhalte des TextBlock-Steuerelements. Tippen Sie auf das TextBlock-Steuerelement, damit es den Fokus erhält. Ändern Sie im Bereich Eigenschaften den Wert des Felds Text von "TextBlock" in "Hello". Ändern Sie anschließend wie in der folgenden Abbildung dargestellt den Wert des Felds Name von "<No Name>" in "helloMessage".

Textblock-Eigenschaften in Visual Studio

Als Nächstes ändern wir den Namen und die Inhalte des TextBox-Steuerelements. Tippen Sie auf das TextBox-Steuerelement, damit es den Fokus erhält. Ändern Sie im Bereich Eigenschaften den Wert des Felds Inhalt von "TextBox" in "Enter your name". Ändern Sie dann den Wert des Felds Name von "<No Name>" in "nameField".

Lassen Sie uns nun etwas Code schreiben, durch den die Inhalte des TextBlock-Steuerelements so geändert werden, dass der Benutzer begrüßt wird, nachdem er seinen Namen eingegeben und auf die Schaltfläche getippt hat.

In Eclipse würden Sie das Verhalten für ein Ereignis zu einem Steuerelement zuordnen, indem Sie diesen Code dem Steuerelement zuordnen. Siehe folgender Code und folgende Abbildung.

Schaltflächen-Eigenschaften in Eclipse


<Button
    android:id="@+id/sayHelloButton"
    android:layout_width="147dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:onClick="displayMessage"
    android:text="@string/button_title" />


Visual Studio ist ähnlich aufgebaut. Rechts über den Eigenschaften befindet sich eine Schaltfläche mit einem Gewitterblitz. Dort werden die dem ausgewählten Steuerelement zugeordneten Ereignisse aufgelistet, wie in der folgenden Abbildung dargestellt.

Schaltflächen-Ereignishandler in Visual Studio

Um Code für das Klickereignis der Schaltfläche hinzuzufügen, tippen Sie im Bereich Entwurf zuerst auf die Schaltfläche. Tippen Sie dann auf die Schaltfläche mit dem Gewitterblitz unter Eigenschaften, und halten Sie das Feld neben der Bezeichnung Click gedrückt. Visual Studio fügt den Text "sayHelloButton_Click" dem Feld Click hinzu, und anschließend wird der entsprechende Ereignishandler wie im folgenden Code dargestellt der Datei MainPage.xaml.cs hinzugefügt und angezeigt.


private void sayHelloButton_Click(object sender, RoutedEventArgs e)
{

}

Lassen Sie uns nun Code zu diesem Ereignishandler hinzufügen.


private void sayHelloButton_Click(object sender, RoutedEventArgs e)
{
    helloMessage.Text = "Hello " + nameField.Text + "!";
}

Nachstehend sehen Sie ein Beispiel für einen Code, wie Sie ihn in Eclipse schreiben würden.


/** Called when the user clicks the button. */
public void displayMessage(View view) {
    EditText nameField = (EditText) findViewById(R.id.nameField);
    String name = nameField.getText().toString();
    TextView helloMessage = (TextView) findViewById(R.id.messageView);
    helloMessage.setText("Hello "+name+ "!");		
}


Zum Schluss, wenn Sie die App in Visual Studio ausführen möchten, legen Sie das Projekt, an dem Sie gerade arbeiten, als Startprojekt fest, indem Sie mit der rechten Maustaste klicken und Als Startprojekt festlegen auswählen. Tippen Sie anschließend auf das Menü Debuggen und dann auf Debuggen starten oder Starten ohne Debuggen. Nachdem die App gestartet wurde, geben Sie im Feld Enter your name den Namen "Phil" ein. Tippen Sie auf die Schaltfläche Say Hello. Der Inhalt der Bezeichnung ändert sich wie in der folgenden Abbildung dargestellt von "Hello" in "Hello, Phil!"

Beim Aufrufen der App wird "Hello" und der Name des Benutzers angezeigt.

Um die App zu beenden, tippen Sie in Visual Studio auf das Menü Debuggen und dann auf Debugging beenden.

Visual Studio-Tipp

Sie können die App in drei Umgebungen ausführen: auf einem lokalen Rechner (für ein Windows 8.1-Projekt), in einem Simulator oder auf einem Remote-Rechner. Wenn Sie die App auf dem lokalen Rechner ausführen, läuft sie im Vollbildmodus auf demselben Rechner wie Visual Studio. Sie können mit der Maus oder – sofern verfügbar – über Berührungen mit der App interagieren. Der Simulator ist eine Desktop-App, die ebenfalls auf dem lokalen Rechner ausgeführt wird und Berührungen und Drehungen simuliert. Das ist vor allem nützlich, wenn der lokale Rechner diese Aktionen nicht unterstützt. Außerdem ist es dadurch möglich, die App zu debuggen und gleichzeitig den Code anzuzeigen. Alternativ kann die App auch auf einer Maschine ausgeführt werden, die über ein Netzwerk verbunden ist. Das ist vor allem sinnvoll, wenn dieser Rechner Berührungen, Geolocation oder physische Richtungssensoren unterstützt.

Zum Ändern des Ausführungsmodus der App tippen Sie auf der Standardsymbolleiste in Visual Studio auf den Abwärtspfeil neben Lokaler Computer, Simulator oder Remotecomputer, und wählen Sie den gewünschten Modus aus. Um die App in diesem Modus auszuführen, tippen Sie entweder auf den Startpfeil neben dem gewünschten Modus, oder Sie tippen im Menü Debuggen auf Debuggen starten oder Starten ohne Debuggen.

 

Nach oben

Liste allgemeiner Steuerelemente

Im vorherigen Abschnitt haben Sie mit nur drei Steuerelementen gearbeitet. Natürlich steht Ihnen eine Vielzahl weiterer Steuerelemente zur Verfügung. Hier sind einige häufig verwendete Steuerelemente: Die Android-Steuerelemente sind in alphabetischer Reihenfolge und daneben die entsprechenden Windows Store-App-Steuerelemente aufgeführt.

Android-Steuerelement (Klasse)Äquivalentes Windows Store-App-Steuerelement

Statusleiste (ProgressBar)

ProgressRing, ProgressBar

Siehe auch Schnellstart: Hinzufügen von Statussteuerelementen

Werbung (ADView, ADRequest)

Siehe Microsoft Advertising SDK

Schaltfläche (Button)

Button

Siehe auch Schnellstart: Hinzufügen von Schaltflächensteuerelementen

Datumsauswahl (DatePicker)

DatePicker (nur für Windows Store-Apps mit C#, C++ und Visual Basic verfügbar)

DatePicker (nur für Windows Store-Apps mit JavaScript und HTML verfügbar)

Bild (ImageView)

Image

Siehe auch Schnellstart: Image und ImageBrush

Schreibgeschützter Text (TextView)

TextBlock

Siehe auch Schnellstart: Anzeigen von Text

Kartenansicht (MapFragment)

Siehe Bing Maps für Windows Store-Apps

Navigation (Activity) und Navigationshilfen (NavUtils, TaskStackBuilder)

Frame

Siehe auch Schnellstart: Navigation zwischen Seiten

Seite (Activity)

Page

Siehe auch Schnellstart: Navigation zwischen Seiten

Scrollbare Liste (ListView)

ComboBox

Siehe auch Hinzufügen von Kombinationsfeldern und Listenfeldern

Scrollbare Layoutcontainer (ScrollView)

ScrollViewer

Siehe auch Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen

Such-Widget (SearchView)

Siehe Hinzufügen von Suchfunktionen zu einer App

Siehe auch Schnellstart: Hinzufügen von Suchfunktionen zu einer App

Statusanzeige mit Schieberegler (SeekBar)

Slider

Siehe auch So wird's gemacht: Hinzufügen eines Schiebereglers

Wechselschaltfläche (RadioButton), Kontrollkästchen (CheckBox)

ToggleSwitch

Siehe auch So wird's gemacht: Hinzufügen von Umschaltern

Scrollbares Raster (GridView), Zeilen-und-Spalten-Layout (TableLayout)

GridView

Siehe auch Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen

Bearbeitbarer Text (EditText)

TextBox

Siehe auch Schnellstart: Hinzufügen von Steuerelementen für Texteingabe und -bearbeitung

Webseiten-Ansicht (WebView)

WebView

Siehe auch Beispiel für XAML-WebView-Steuerelement

 

Unter Steuerelementliste finden Sie noch mehr Steuerelemente.

Hinweis  Eine Liste mit Steuerelementen für Windows Store-Apps mit JavaScript und HTML finden Sie unter Steuerelementliste.

Nach oben

Hinzufügen von Navigation

In Android sind drei Arten der Navigation möglich: temporale Navigation über zuvor besuchte Seiten, auf- und absteigende Navigation über Intent-Objekte und die startActivity-Methode sowie laterale Navigation über Registerkarten. Für die temporale Navigation ist ein Zurückstapel des Browsers erforderlich. Er wird verwaltet, wenn der Benutzer von einer Aktivität zur nächsten oder von einem Fragment zum nächsten wechselt. Bei der auf- und absteigenden Navigation wird durch eine Aktivität ein Intent-Objekt erstellt und über die startActivity-Methode oder durch Fragmente eine untergeordnete Aktivität gestartet. Die laterale Navigation erfolgt über Registerkarten oder Wischbewegungen.

In Windows 8.1 und Windows Phone 8.1 sollte die Navigation an die Inhalte der App angepasst werden. Dies entspricht einem der Prinzipien für das Design von Windows Store-Apps: „Inhalt ist wichtiger als Spielereien“. Weitere Informationen finden Sie unter Navigationsdesign für Windows Store-Apps.

Bei Windows Store-Apps ist die Verwendung der Frame-Klasse eine der Methoden zum Verwalten der Navigation. Die folgende exemplarische Vorgehensweise veranschaulicht, wie Sie dies ausprobieren können.

Wenn Sie mit der MyApp-Projektmappe fortfahren möchten, öffnen Sie die Datei MainPage.xaml, falls sie noch nicht angezeigt wird. Wählen Sie die MainPage entweder unter MyApp.Windows oder unter MyApp.WindowsPhone aus. Fügen Sie der Datei „MainPage.xaml“ im Bereich Entwurf eine Schaltfläche hinzu. Ändern Sie die Content-Eigenschaft der Schaltfläche von "Button" zu "Go To Page". Erstellen Sie anschließend einen Handler für das Click-Ereignis der Schaltfläche, wie in der folgenden Abbildung dargestellt. Wenn Sie nicht mehr wissen, wie das geht, schlagen Sie unter der exemplarischen Vorgehensweise im vorherigen Abschnitt Erste Schritte: Aufbau von Visual Studio nach (Hinweis: doppelklicken Sie auf die Schaltfläche in der Ansicht Entwurf).

Fügen wir nun eine neue Seite hinzu: Tippen Sie auf das Menü Projekt und dann auf Neues Element hinzufügen. Tippen Sie wie in der folgenden Abbildung dargestellt auf Leere Seite und dann auf Hinzufügen.

Hinzufügen einer neuen Seite in Visual Studio

Android-Tipp

Die Page-Klasse bei Windows Store-Apps stellt eine Seite dar und ähnelt der Activity-Klasse bei der Android-Entwicklung.

 

Fügen Sie als Nächstes der Datei BlankPage.xaml eine Schaltfläche hinzu. Nun wird das AppBarButton-Steuerelement verwendet und soll ein Bild mit einem Zurück-Pfeil erhalten: Fügen Sie hierzu in der Ansicht XAML <AppBarButton Icon="Back"/> zu den <Grid> </Grid>-Elementen hinzu.

Ändern einer Standard-Schaltfläche zu einer Zurück-Schaltfläche

Android-Tipp

Anders als in Android gibt es bei Windows Store-Apps keine Zurück-Schaltflächen auf Systemebene oder Nach-oben-Schaltflächen auf Anwendungsebene. Entwickler können jedoch ähnliche Zurück- oder Nach-oben-Funktionen in Windows Store-Apps implementieren. In diesem Beispiel wird "Zurück" gezeigt.

 

Nun fügen wir der Schaltfläche einen Ereignishandler hinzu: Doppelklicken Sie auf das Steuerelement in der Ansicht Entwurf, und Visual Studio fügt dem Feld "Click" wie in der folgenden Abbildung dargestellt den Text AppBarButton_Click hinzu. Anschließend wird der entsprechende Ereignishandler der Datei BlankPage.xaml.cs hinzugefügt und angezeigt.

Wenn Sie zur Ansicht XAML der Datei „BlankPage.xaml“ zurückkehren, sollte der XAML-Code des <AppBarButton>-Elements nun wie folgt aussehen:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Kehren Sie zur Datei „BlankPage.xaml.cs“ zurück, und fügen Sie diesen Code hinzu, damit der Benutzer zur vorherigen Seite zurückkehrt, nachdem er auf die Schaltfläche getippt hat.


private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Öffnen Sie zum Schluss die Datei "MainPage.xaml.cs", und fügen Sie diesen Code hinzu. Mithilfe dieses Codes wird BlankPage geöffnet, nachdem der Benutzer auf die Schaltfläche getippt hat.



private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage));
}

Führen Sie nun das Programm aus. Tippen Sie auf die Schaltfläche "Go To Page", um zu der anderen Seite zu wechseln, und tippen Sie dann auf die Schaltfläche mit dem Zurück-Pfeil, um zur vorherigen Seite zurück zu wechseln.

Die Vorwärts-Navigation funktioniert unter Windows ähnlich wie bei Android. Bei Android senden wir in der Datei MainActivity.java ein Intent, um die zweite Seite aufzurufen.


public void displayMessage(View view) {
		EditText nameField = (EditText) findViewById(R.id.nameField);
		String name = nameField.getText().toString();		
		Intent intent = new Intent(this, MessageActivity.class);
		intent.putExtra(EXTRA_MESSAGE, name);
		startActivity(intent);		
	}


In der Datei MessageActivity.java erhalten wir das Intent und die damit weitergereichten Daten zur Anzeige der Begrüßung.


protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
	   Intent intent = getIntent();
	   String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);		setContentView(R.layout.activity_message);
	   TextView messageView = (TextView) findViewById(R.id.helloMessage);
	   messageView.setText("Hello "+ message+"!");
	   // Show the Up button in the action bar.
	   setupActionBar();
}


Im Gegensatz zu Windows erfolgt bei Android die Back-Stapelnavigation aber über ActionBar, und es ist keine Eingabe durch den Benutzer erforderlich.

Bei dieser exemplarischen Vorgehensweise wird immer dann eine neue Instanz von BlankPage erstellt, wenn Sie zu dieser Seite navigieren. (Die vorherige Instanz wird vom Garbage Collector automatisch freigegeben.) Wenn nicht jedes Mal eine neue Instanz erstellt werden soll, fügen Sie dem Konstruktor der BlankPage-Klasse in der Datei BlankPage.xaml.cs den folgenden Code hinzu. Dadurch wird das NavigationCacheMode-Verhalten aktiviert.


public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Sie können auch die CacheSize-Eigenschaft der Frame-Klasse abrufen oder festlegen, um zu definieren, wie viele Seiten im Navigationsverlauf zwischengespeichert werden können.

Weitere Informationen zur Navigation finden Sie unter Schnellstart: Navigation zwischen Seiten und XAML-Beispiel für Charakteranimationen.

Hinweis  Informationen zur Navigation für Windows Store-Apps mit JavaScript und HTML finden Sie unter Schnellstart: Verwenden der Einzelseitennavigation.

Android-Tipp

Bei einer generischen Android-App wird die Standard-Aktivität für die App in der Datei "AndroidManifest.xml" festgelegt. Der Code sieht normalerweise etwa so aus:

<activity
    android:name="com.example.myfirstapp.MyActivity"
    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 Ihrem Visual Studio-Projekt öffnen und zum Ende der OnLaunched-Methode blättern, sehen Sie Code wie den folgenden.


if (!rootFrame.Navigate(typeof(MainPage), args.arguments))
{
    throw new Exception("Failed to create initial page");
}

Dieser Code zeigt die Datei "MainPage.xaml" nach dem Start der App an.

 

Nach oben

Hinzufügen von Animationen

In Android werden Animationen programmatisch oder mit Ansichts-XML erstellt. Bei einer Ansichtsanimation werden Animationen über die Transformation einer Ansicht erstellt (mittels Positionierung, Größe, Rotation oder Transparenz) Bei einer Eigenschaftsanimation können die Eigenschaftswerte von Ansichts- und Nicht-Ansichts-Objekten animiert werden. Bei einer zeichenbaren Animation wird nacheinander eine Reihe zeichenbarer Objekte geladen und so eine Animation erstellt. Sowohl Ansichtsanimationen als auch zeichenbare Animationen können entweder mit XML oder mit Code gestaltet werden. Übergangsanimationen wecken die Aufmerksamkeit des Benutzers durch Animationen, wenn eine Steuerelement ausgeführt oder beendet wird oder seine Eigenschaften ändert. Designanimationen bieten zusätzlich Kontrolle über Zeitpunkt und Reihenfolge der Animationen. Bei benutzerdefinierten Animationen können Sie mithilfe von Storyboard-Animationen die Eigenschaften eines Steuerelements animieren.

In Windows Store-Apps können Animationen ebenfalls programmgesteuert erstellt werden. Sie haben aber auch die Möglichkeit, Animationen mit XAML deklarativ zu erstellen. Mit Visual Studio können Sie XAML-Code direkt bearbeiten. Zudem enthält Visual Studio das Tool Blend für Microsoft Visual Studio 2013, das den XAML-Code im Hintergrund bearbeitet, während Sie in einem Designer mit Animationen arbeiten. Mit Blend können Sie sogar komplette Visual Studio-Projekte öffnen, entwerfen, erstellen und ausführen. In der folgenden exemplarischen Vorgehensweise können Sie diese Methode testen.

Erstellen Sie ein neues Projekt (für eine Plattform oder ein allgemeines Projekt), und nennen Sie es z. B. "SimpleAnimation". In diesem Projekt werden wir ein Rechteck verschieben, ausblenden und dann wieder in die Ansicht einblenden. In XAML basieren Animationen auf dem Konzept von Storyboards. Bei Storyboards werden Änderungen von Eigenschaften mithilfe von Keyframes animiert. In Windows Store-Apps gibt es keine impliziten Animationen. Dennoch werden Sie feststellen, dass sich das Animieren von Eigenschaften einfach gestaltet.

Halten Sie bei geöffnetem Projekt im Projektmappen-Explorer den Projektnamen gedrückt. Tippen Sie dann wie in der folgenden Abbildung dargestellt auf In Blend öffnen. Die Ausführung von Visual Studio wird im Hintergrund fortgesetzt.

Menübefehl "In Blend öffnen"

Nachdem Blend gestartet wurde, sollte die Anzeige der folgenden Abbildung ähneln.

Blend-Entwicklungsumgebung

Tippen Sie als Nächstes im Fenster Extras auf das Rechteck, um es auszuwählen, und zeichnen Sie dann wie in der folgenden Abbildung dargestellt in der Designansicht ein Rechteck.

Hinzufügen eines Rechtecks zu der Entwurfsansicht

Wenn Sie das Rechteck grün zeichnen möchten, tippen Sie im Fenster Eigenschaften im Bereich Pinsel auf die Schaltfläche Pinsel mit Volltonfarbe, tippen Sie auf das Symbol Farbformatpipette und dann auf einen Bereich im grünen Farbtonband.

Tippen Sie zum Beginnen der Rechteckanimation wie in der folgenden Abbildung dargestellt im Fenster Objekte und Zeitachsen auf das Plussymbol (Neu) und dann auf OK.

Hinzufügen eines Storyboards

Im Fenster Objekte und Zeitachsen wird ein Storyboard angezeigt. Die Anzeige der Designansicht ändert sich, um anzuzeigen, dass die Zeitachsenaufzeichnung für Storyboard1 aktiviert ist. Tippen Sie zum Erfassen des aktuellen Status des Rechtecks wie in der folgenden Abbildung dargestellt im Fenster Objekte und Zeitachsen über dem gelben Pfeil auf die Schaltfläche Keyframe aufzeichnen.

Aufzeichnen eines Keyframes

Lassen Sie uns das Rechteck nun verschieben und ausblenden. Ziehen Sie dazu den gelben Pfeil auf die 2-Sekundenposition, und ziehen Sie dann das Rechteck leicht nach rechts. Ändern Sie dann wie in der folgenden Abbildung dargestellt im Fenster Eigenschaften im Bereich Darstellung die Eigenschaft Undurchsichtigkeit in den Wert 0. Wenn Sie eine Vorschau der Animation anzeigen möchten, tippen Sie auf die Schaltfläche Wiedergabe (eingekreist in der folgenden Abbildung).

Fenster "Eigenschaften" und Schaltfläche "Wiedergabe"

Als Nächstes möchten wir das Rechteck wieder in die Ansicht einblenden. Tippen Sie im Fenster Objekte und Zeitachsen auf Storyboard1. Tippen Sie dann wie in der folgenden Abbildung dargestellt im Fenster Eigenschaften im Bereich Allgemein auf AutoReverse.

Auswählen eines Storyboards

Tippen Sie schließlich auf die Schaltfläche Wiedergabe, um das Ergebnis zu überprüfen.

Sie können das Projekt ausführen, indem Sie auf das Menü Projekt und anschließend auf Projekt ausführen tippen (oder indem Sie einfach F5 drücken). Wenn Sie dies tun, wird das grüne Rechteck zwar angezeigt, es wird jedoch nicht animiert. Zum Starten der Animation müssen Sie dem Projekt eine Zeile mit Code hinzufügen. Gehen Sie dazu wie folgt vor.

Tippen Sie in Blend im Menü Datei auf Speichern, und kehren Sie dann zu Visual Studio zurück. Wenn in Visual Studio ein Dialogfeld mit der Frage angezeigt wird, ob Sie die geänderte Datei erneut laden möchten, tippen Sie auf Ja. Öffnen Sie die Datei "MainPage.xaml.cs", und fügen Sie folgenden Code hinzu.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

Führen Sie das Projekt erneut aus, und sehen Sie sich die Animation des Rechtecks an.

Wenn Sie die Datei "MainPage.xaml" in der Ansicht XAML öffnen, können Sie den XAML-Code sehen, den Blend für Sie hinzugefügt hat, während Sie im Designer gearbeitet haben. Sehen Sie sich insbesondere den Code in den <Storyboard>- und <Rectangle>-Elementen an. Der folgende Code zeigt ein Beispiel. Auslassungspunkte stellen Code ohne Bezug dar, der aus Platzgründen ausgelassen wird. Zur besseren Lesbarkeit des Codes wurden Zeilenumbrüche hinzugefügt.


...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

Vergleichen Sie dies mit einer ähnlichen Android-Animation, mit der Position und Opazität eines Vierecks animiert werden. Die in XML definierte Animation weist viele Ähnlichkeiten auf, wie der nachstehende Code zeigt.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together" >
    <objectAnimator
        android:propertyName="TranslationX"
        android:duration="2000"
        android:valueFrom="0"
        android:valueTo="400"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="TranslationY"
        android:duration="2000"
        android:valueFrom="0"
        android:valueTo="300"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="Alpha"
        android:duration="2000"
        android:valueFrom="1"        
        android:valueTo="0"        
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>        
</set>


Die Animation wird programmgesteuert mit folgendem Code gestartet:


...
ImageView iView = (ImageView) findViewById(R.id.ImageView1);
iView.setImageResource(R.drawable.green_rect);
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.animation1);
set.setTarget(iView);
set.start();
...

In Eclipse muss die Animation von Hand entworfen werden. Unter Windows ist es dank Blend deutlich einfacher, die Animation interaktiv zu gestalten und zu testen.

Weitere Informationen zu Animationen finden Sie unter Animieren der Benutzeroberfläche.

Hinweis  Informationen zu Animationen für Windows Store-Apps mit JavaScript und HTML finden Sie unter Animieren der Benutzeroberfläche (HMTL).

Nach oben

Nächste Schritte

Sie sind nun in der Lage, basierend auf den in diesen kurzen exemplarischen Vorgehensweisen erstellten Apps, robustere Windows Store-Apps zu erstellen. Damit Sie die hier erworbenen Grundkenntnisse weiter ausbauen können, möchten wir auf die folgenden zusätzlichen Informationsquellen hinweisen:

  • Windows 8-Produkthandbuch für Entwickler: Bietet eine Übersicht über Entwicklungsprinzipien für Windows Store-Apps wie Live-Kacheln, Features wie App-Verträge, Frameworks wie die Windows-Runtime und Tools wie das Windows-Treiberkit (WDK) usw.
  • UX-Design für Apps: Enthält Informationen zum Planen der Benutzeroberfläche, zum Abrufen eines Entwurfsleitfadens für Windows Store-Kategorien wie Spiele- und Produktivitäts-Apps und zum Herunterladen von Designressourcen wie PSDs.
  • Verträge und Erweiterungen für Apps: Enthält Informationen zum Deklarieren von Vereinbarungen zwischen Ihren Apps und anderen Apps und Windows, z. B. zum Vertrag für "Wiedergeben auf" und zur Erweiterung "Spiel-Explorer".
  • Verwenden von Kacheln, Signalen und Popupbenachrichtigungen: Enthält Informationen zum Erstellen und Aktualisieren von Kacheln und der zugehörigen Signale, zum Senden von Popupbenachrichtigungen sowie zum Anzeigen und Aktualisieren von Kachel- und Signalupdates auf dem Sperrbildschirm.
  • Starten, Fortsetzen und Multitasking: Enthält Informationen zum automatischen Starten, Aktivieren, Anhalten und Fortsetzen von Apps und zum Arbeiten mit Hintergrundaufgaben.
  • Richtlinien für das Roaming von Anwendungsdaten: Enthält Informationen zum Bereitstellen einer großartigen Benutzeroberfläche für Apps, bei denen der Benutzer mehr als ein Gerät verwendet, z. B. einen PC für die Arbeit und einen Tablet PC zuhause.
  • Beispielgalerie für Windows Store-Apps: Enthält mehrere hundert Beispiel-Apps, die Sie herunterladen und mit denen Sie experimentieren können.

Nutzen Sie auch unsere Community-Ressourcen, um zu erfahren, wie Sie über Entwicklerforen, Blogs, Entwicklercamps und -workshops sowie über lokale Microsoft-Veranstaltungen und -Kontakte Hilfe erhalten und andere Entwickler kennen lernen können.

Wir sind davon überzeugt, dass Ihnen Windows 8.1 und Windows Phone 8.1 neue Möglichkeiten zur App-Entwicklung eröffnen werden. Wir freuen uns auf die großartigen Apps, die Sie erstellen werden!

Nach oben

 

 

Anzeigen:
© 2015 Microsoft