Erstellen Ihrer ersten Xamarin.Forms-App

  • Artikel

Exemplarische Vorgehensweise für Windows

Download Sample Das Beispiel herunterladen

Führen Sie die folgenden Schritte zum Video oben aus:

  1. Klicken Sie auf Datei > Neu > Projekt…, oder klicken Sie auf die Schaltfläche Neues Projekt erstellen….

  2. Suchen Sie nach „Xamarin“, oder wählen Sie im Menü Projekttyp die Option Mobil aus. Wählen Sie den Projekttyp Mobile App (Xamarin.Forms) aus.

  3. Wählen Sie einen Projektnamen – im Beispiel wird der Name „AwesomeApp“ verwendet.

  4. Klicken Sie auf den Projekttyp Leer, und vergewissern Sie sich, dass Android und iOS ausgewählt sind:

    Android and iOS Blank App

  5. Warten Sie, bis die NuGet-Pakete wiederhergestellt sind (wenn die Wiederherstellung abgeschlossen wurde, wird eine Meldung in der Statusleiste angezeigt).

  6. In neuen Visual Studio 2022-Installationen sind keine Android-SDKs installiert. Sie werden möglicherweise aufgefordert, das neueste Android SDK zu installieren:

    Install Android SDK

  7. In neuen Visual Studio 2022-Installationen ist kein Android-Emulator konfiguriert. Klicken Sie auf die Dropdownschaltfläche auf der Schaltfläche Debuggen, und wählen Sie dort die Option Android-Emulator erstellen… aus, um den Bildschirm zum Erstellen des Emulator aufzurufen:

    Create Android Emulator dropdown

  8. Verwenden Sie im Bildschirm zum Erstellen des Emulators die Standardeinstellungen, und klicken Sie auf die Schaltfläche Erstellen:

    Android emulator creation screen

  9. Das Erstellen eines Emulators führt Sie zurück zum Geräte-Manager-Fenster. Klicken Sie auf die Schaltfläche Starten, damit der neue Emulator gestartet wird:

    Android emulator in the Device Manager

  10. In Visual Studio 2022 sollte nun der Name des neuen Emulators auf der Schaltfläche Debuggen angezeigt werden:

    Android emulator name on the Debug button

  11. Klicken Sie auf die Schaltfläche Debuggen, damit die Anwendung erstellt und für den Android-Emulator bereitgestellt wird:

    Android emulator displaying the application

Anpassen der Anwendung

Die Anwendung kann angepasst werden, um interaktive Funktionen hinzuzufügen. Führen Sie die folgenden Schritte aus, um der Anwendung die Möglichkeit zur Benutzerinteraktion hinzuzufügen:

  1. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Debuggen Sie die App unter Android:

    Android app with Button

Erstellen einer iOS-App in Visual Studio 2022

Es ist möglich, die iOS-App mit einem Mac-Computer im Netzwerk über Visual Studio zu erstellen und zu debuggen. Weitere Informationen finden Sie in den Setupanweisungen.

Exemplarische Vorgehensweise für Windows

Download Sample Das Beispiel herunterladen

Führen Sie die folgenden Schritte zum Video oben aus:

  1. Wählen Sie Datei > Neu > Projekt…, oder drücken Sie auf die Schaltfläche Neues Projekt erstellen…:

    Create a new project

  2. Suchen Sie nach „Xamarin“, oder wählen Sie im Menü Projekttyp die Option Mobil aus. Wählen Sie den Projekttyp Mobile App (Xamarin.Forms) aus:

    Filter for Xamarin projects

  3. Wählen Sie einen Projektnamen aus – im Beispiel wird der Name „AwesomeApp“ verwendet:

    Choose a project name

  4. Klicken Sie auf den Projekttyp Leer, und vergewissern Sie sich, dass Android und iOS ausgewählt sind:

    Android and iOS, with .NET Standard

  5. Warten Sie, bis die NuGet-Pakete wiederhergestellt sind (wenn die Wiederherstellung abgeschlossen wurde, wird eine Meldung in der Statusleiste angezeigt).

  6. Für neue Visual Studio 2019-Installationen wird kein Android-Emulator konfiguriert. Klicken Sie auf die Dropdownschaltfläche auf der Schaltfläche Debuggen, und wählen Sie dort die Option Android-Emulator erstellen… aus, um den Bildschirm zum Erstellen des Emulator aufzurufen:

    Create Android Emulator dropdown

  7. Verwenden Sie im Bildschirm zum Erstellen des Emulators die Standardeinstellungen, und klicken Sie auf die Schaltfläche Erstellen:

    Android emulator creation screen

  8. Das Erstellen eines Emulators führt Sie zurück zum Geräte-Manager-Fenster. Klicken Sie auf die Schaltfläche Starten, damit der neue Emulator gestartet wird:

    Android emulator in the Device Manager

  9. In Visual Studio 2019 sollte nun der Name des neuen Emulators auf der Schaltfläche Debuggen angezeigt werden.

    Android emulator name on the Debug button

  10. Klicken Sie auf die Schaltfläche Debuggen, damit die Anwendung erstellt und für den Android-Emulator bereitgestellt wird:

    Android emulator displaying the application

Anpassen der Anwendung

Die Anwendung kann angepasst werden, um interaktive Funktionen hinzuzufügen. Führen Sie die folgenden Schritte aus, um der Anwendung die Möglichkeit zur Benutzerinteraktion hinzuzufügen:

  1. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Debuggen Sie die App unter Android:

    Android app

Hinweis

In der Beispielanwendung ist die zusätzliche interaktive Funktionalität enthalten, die im Video nicht thematisiert wird.

Erstellen einer iOS-App in Visual Studio 2019

Es ist möglich, die iOS-App mit einem Mac-Computer im Netzwerk über Visual Studio zu erstellen und zu debuggen. Weitere Informationen finden Sie in den Setupanweisungen.

In diesem Video erhalten Sie Informationen zum Erstell- und Testprozess einer iOS-App mithilfe von Visual Studio 2019 unter Windows:

Exemplarische Vorgehensweise für Mac

Download Sample Das Beispiel herunterladen

Führen Sie die folgenden Schritte zum Video oben aus:

  1. Wählen Sie Datei > Neue Projektmappe... aus, oder drücken Sie auf die Schaltfläche Neues Projekt..., und wählen Sie dann Multi-Plattform > App > Leere Forms-App aus:

    Blank Forms App

  2. Stellen Sie sicher, dass Android und iOS ausgewählt sind:

    Android and iOS, with .NET Standard

Hinweis

Nur A–Z, a–z, Unterstriche (_), Punkte (.) und Zahlen werden für Ihren App-Namen und den Organisationsbezeichner unterstützt.

  1. Stellen Sie die NuGet-Pakete wieder her, indem Sie mit der rechten Maustaste auf die Projektmappe klicken:

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. Starten Sie den Android-Emulator, indem Sie auf die Schaltfläche „Debuggen“ drücken (alternativ können Sie auch auf Ausführen > Debuggen starten drücken).

  3. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Debuggen Sie die App unter Android:

    Screenshot shows the Android Emulator.

  6. Klicken Sie mit der rechten Maustaste, und legen Sie iOS als Startprojekt fest:

    Set the startup project to iOS

  7. Debuggen Sie die App auf iOS, indem Sie einen iOS-Simulator aus der Dropdownliste auswählen.

Exemplarische Vorgehensweise für Mac

Download Sample Das Beispiel herunterladen

Führen Sie die folgenden Schritte zum Video oben aus:

  1. Wählen Sie Datei > Neue Projektmappe... aus, oder drücken Sie auf die Schaltfläche Neues Projekt..., und wählen Sie dann Multi-Plattform > App > Leere Forms-App aus:

    Blank Forms App

  2. Stellen Sie sicher, dass die Plattformen Android und iOS sowie die .NET Standard-Codefreigabe ausgewählt sind:

    Android and iOS, with .NET Standard

Hinweis

Nur A–Z, a–z, Unterstriche (_), Punkte (.) und Zahlen werden für Ihren App-Namen und den Organisationsbezeichner unterstützt.

  1. Stellen Sie die NuGet-Pakete wieder her, indem Sie mit der rechten Maustaste auf die Projektmappe klicken:

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. Starten Sie den Android-Emulator, indem Sie auf die Schaltfläche „Debuggen“ drücken (alternativ können Sie auch auf Ausführen > Debuggen starten drücken).

  3. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Debuggen Sie die App unter Android:

    Screenshot shows the Android Emulator.

  6. Klicken Sie mit der rechten Maustaste, und legen Sie iOS als Startprojekt fest:

    Set the startup project to iOS

  7. Debuggen Sie die App unter iOS:

    iOS app

Sie können den vollständigen Code aus dem Beispielkatalog herunterladen oder auf GitHub ansehen.

Nächste Schritte