Erstellen Ihrer ersten Xamarin.Forms-AppBuild your first Xamarin.Forms App

Sehen Sie sich dieses Video an, und gehen Sie wie gezeigt vor, um Ihre erste mobile App mit Xamarin.Forms zu erstellen.Watch this video and follow along to create your first mobile app with Xamarin.Forms.

Exemplarische Vorgehensweise für WindowsStep-by-step instructions for Windows

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Führen Sie die folgenden Schritte zum Video oben aus:Follow these steps along with the video above:

  1. Klicken Sie auf Datei > Neu > Projekt… , oder klicken Sie auf die Schaltfläche Neues Projekt erstellen… :Choose File > New > Project... or press the Create new project... button:

    Neues Projekt erstellenCreate a new project

  2. Suchen Sie nach „Xamarin“, oder wählen Sie im Menü Projekttyp die Option Mobil aus.Search for "Xamarin" or choose Mobile from the Project type menu. Wählen Sie den Projekttyp Mobile App (Xamarin.Forms) aus:Select the Mobile App (Xamarin.Forms) project type:

    Filtern nach Xamarin-ProjektenFilter for Xamarin projects

  3. Wählen Sie einen Projektnamen – im Beispiel wird der Name „AwesomeApp“ verwendet:Choose a project name – the example uses "AwesomeApp":

    Eingeben eines ProjektnamensChoose a project name

  4. Klicken Sie auf den Projekttyp Leer, und vergewissern Sie sich, dass Android und iOS ausgewählt sind:Click on the Blank project type and ensure Android and iOS are selected:

    Android und iOS mit .NET StandardAndroid 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).Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  6. Für neue Visual Studio 2019-Installationen wird kein Android-Emulator konfiguriert.New Visual Studio 2019 installations won't have an Android emulator configured. 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:Click the dropdown arrow on the Debug button and choose Create Android Emulator to launch the emulator creation screen:

    Dropdownmenü „Android Emulator erstellen…“

  7. Verwenden Sie im Bildschirm zum Erstellen des Emulators die Standardeinstellungen, und klicken Sie auf die Schaltfläche Erstellen:In the emulator creation screen, use the default settings and click the Create button:

    Bildschirm zum Erstellen des Android-EmulatorsAndroid emulator creation screen

  8. Das Erstellen eines Emulators führt Sie zurück zum Geräte-Manager-Fenster.Creating an emulator will return you to the Device Manager window. Klicken Sie auf die Schaltfläche Starten, damit der neue Emulator gestartet wird:Click the Start button to launch the new emulator:

    Android-Emulator im Geräte-Manager

  9. In Visual Studio 2019 sollte nun der Name des neuen Emulators auf der Schaltfläche Debuggen angezeigt werden.Visual Studio 2019 should now show the name of the new emulator on the Debug button:

    Name des Android-Emulators auf der Schaltfläche „Debuggen“

  10. Klicken Sie auf die Schaltfläche Debuggen, damit die Anwendung erstellt und für den Android-Emulator bereitgestellt wird:Click the Debug button to build and deploy the application to the Android emulator:

    Der Android-Emulator zeigt die Anwendung an

Anpassen der AnwendungCustomize the application

Die Anwendung kann angepasst werden, um interaktive Funktionen hinzuzufügen.The application can be customized to add interactive functionality. Führen Sie die folgenden Schritte aus, um der Anwendung die Möglichkeit zur Benutzerinteraktion hinzuzufügen:Perform the following steps to add user interaction to the application:

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

    <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:Edit MainPage.xaml.cs, adding this code to the end of the class:

    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:Debug the app on Android:

    Android-App

Hinweis

In der Beispielanwendung ist die zusätzliche interaktive Funktionalität enthalten, die im Video nicht thematisiert wird.The sample application includes the additional interactive functionality that is not covered in the video.

Erstellen einer iOS-App in Visual Studio 2019Build an 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.It's possible to build and debug the iOS app from Visual Studio with a networked Mac computer. Weitere Informationen finden Sie in den Setupanweisungen.Refer to the setup instructions for more information.

In diesem Video erhalten Sie Informationen zum Erstell- und Testprozess einer iOS-App mithilfe von Visual Studio 2019 unter Windows:This video covers the process of building and testing an iOS app using Visual Studio 2019 on Windows:

Exemplarische Vorgehensweise für WindowsStep-by-step instructions for Windows

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Führen Sie die folgenden Schritte zum Video oben aus:Follow these steps along with the video above:

  1. Klicken Sie auf Datei > Neu > Projekt... , oder klicken Sie auf die Schaltfläche Neues Projekt erstellen... und dann auf Visual C# > Plattformübergreifend > Mobile App (Xamarin.Forms) :Choose File > New > Project... or press the Create new project... button, then select Visual C# > Cross-Platform > Mobile App (Xamarin.Forms):

    Mobile App (Xamarin.Forms)Mobile App (Xamarin.Forms)

  2. Stellen Sie sicher, dass die Plattformen Android und iOS sowie die .NET Standard-Codefreigabe ausgewählt sind:Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android und iOS mit .NET StandardAndroid and iOS, with .NET Standard

  3. Warten Sie, bis die NuGet-Pakete wiederhergestellt sind (wenn die Wiederherstellung abgeschlossen wurde, wird eine Meldung in der Statusleiste angezeigt).Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  4. Starten Sie den Android-Emulator, indem Sie auf „Debuggen“ klicken (alternativ können Sie auf die Menüelemente Debuggen > Debuggen starten klicken).Launch Android emulator by pressing the debug button (or the Debug > Start Debugging menu item).

  5. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  6. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:Edit MainPage.xaml.cs, adding this code to the end of the class:

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  7. Debuggen Sie die App unter Android:Debug the app on Android:

    Screenshot: Android-Emulator

    Tipp

    Es ist möglich, die iOS-App mit einem Mac-Computer im Netzwerk über Visual Studio zu erstellen und zu debuggen.It is possible to build and debug the iOS app from Visual Studio with a networked Mac computer. Weitere Informationen finden Sie in den Setupanweisungen.Refer to the setup instructions for more information.

Exemplarische Vorgehensweise für MacStep-by-step instructions for Mac

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Führen Sie die folgenden Schritte zum Video oben aus:Follow these steps along with the video above:

  1. Klicken Sie auf Datei > Neue Projektmappe... , oder klicken Sie auf Neues Projekt... , und klicken Sie dann auf Multi-Plattform > App > Leere Forms-App:Choose File > New Solution... or press the New Project... button, then select Multiplatform > App > Blank Forms App:

    Leere Forms-AppBlank Forms App

  2. Stellen Sie sicher, dass die Plattformen Android und iOS sowie die .NET Standard-Codefreigabe ausgewählt sind:Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android und iOS mit .NET StandardAndroid and iOS, with .NET Standard

  3. Stellen Sie die NuGet-Pakete wieder her, indem Sie mit der rechten Maustaste auf die Projektmappe klicken:Restore NuGet packages, by right-clicking on the solution:

    Screenshot: wiederherzustellende NuGet-Pakete, die über das Kontextmenü der Projektmappe ausgewählt wurden

  4. Starten Sie den Android-Emulator, indem Sie auf „Debuggen“ klicken (alternativ können Sie auf Ausführen > Debuggen starten klicken).Launch Android emulator by pressing the debug button (or Run > Start Debugging).

  5. Bearbeiten Sie die Datei MainPage.xaml, und fügen Sie den folgenden XAML-Code vor dem Ende von </StackLayout> ein:Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  6. Bearbeiten Sie die Datei MainPage.xaml.cs, und fügen Sie den folgenden Code am Ende der Klasse ein:Edit MainPage.xaml.cs, adding this code to the end of the class:

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  7. Debuggen Sie die App unter Android:Debug the app on Android:

    Screenshot: Android-Emulator

  8. Klicken Sie mit der rechten Maustaste, und legen Sie iOS als Startprojekt fest:Right-click to set iOS to the Startup Project:

    Festlegen von iOS als StartprojektSet the startup project to iOS

  9. Debuggen Sie die App unter iOS:Debug the app on iOS:

    iOS-App

Sie können den vollständigen Code aus dem Beispielkatalog herunterladen oder auf GitHub ansehen.You can download the completed code from the samples gallery or view it on GitHub.

Nächste SchritteNext Steps