Free Press

Lassen Sie uns gemeinsam die Reise beginnen, um schöne native plattformübergreifende Apps mit .NET, Xamarin und Visual Studio zu erstellen! In diesem Blog werde ich Sie durch den gesamten Prozess führen und alles beschreiben, was in File -> New for Xamarin enthalten ist. Wenn Sie eher visuell lernen, habe ich ein komplettes Video, das Sie sich ansehen können:

Lassen Sie uns zunächst einige Grundlagen schaffen, indem wir einige häufige Fragen beantworten.

Was ist .NET?
.NET ist eine plattformübergreifende, hochleistungsfähige und quelloffene Laufzeitumgebung, die mit mehreren Sprachen, Editoren und Bibliotheken verwendet wird und die Erstellung von Anwendungen für Web, Mobile, Desktop, Spiele und mehr ermöglicht. Es ist die Grundlage, auf der Code auf verschiedenen Plattformen wie iOS, Android und Windows ausgeführt werden kann. Für Webentwickler ist dies wie die V8-Laufzeit, die JavaScript ausführt, oder für Java-Entwickler die JVM, die Java ausführt.

Was ist Xamarin?
.NET hat eine Reihe von Frameworks, die dafür entwickelt wurden und einzigartige Szenarien für Entwickler für bestimmte Plattformen ermöglichen. ASP.NET Core und Blazor zum Beispiel sind Frameworks, die für .NET für die Webentwicklung entwickelt wurden. WPF und UWP sind Frameworks, die für .NET für die Desktop-Entwicklung entwickelt wurden. Xamarin ist ein Framework und Tooling, mit dem Apps für iOS, Android und macOS entwickelt werden können. Es enthält auch mehrere Bibliotheken, die eine plattformübergreifende Entwicklung für iOS, Android, macOS und Windows ermöglichen, darunter Xamarin.Forms für die plattformübergreifende Benutzeroberfläche und Xamarin.Essentials für den plattformübergreifenden Zugriff auf native Plattformfunktionen.

Welche Programmiersprachen kann ich verwenden?
.NET unterstützt mehrere Sprachen, darunter C#, F# und Visual Basic. Sie können jede dieser Programmiersprachen verwenden, um Apps mit Xamarin zu erstellen, aber ich bin ein C#-Entwickler, und es ist die primäre Sprache für die App-Entwicklung. Es gibt jedoch einige fantastische Frameworks für F#, wie z. B. Fabulous für die funktionale Entwicklung.

XAML ist eine weitere „Sprache“, die zum Erstellen von Benutzeroberflächen mit Xamarin verwendet wird. XAML wird seit langem verwendet, um Windows-Anwendungen mit WPF und UWP zu erstellen, und verfügt über einige großartige Funktionen wie leicht lesbares Markup, Hot-Reload-Technologie und erweiterte Datenbindung, um die UI-Entwicklung zu einem Kinderspiel zu machen.

Welche Tools kann ich verwenden?
.NET ermöglicht es Entwicklern, eine breite Palette von Tools zu verwenden, einschließlich Befehlszeile, Code-Editoren wie Visual Studio Code und vollständige IDEs (Integrated Development Environment) mit Visual Studio 2019 und Visual Studio 2019 für Mac. Um mobile Apps mit Xamarin zu entwickeln, müssen wir entweder Visual Studio 2019 oder Visual Studio 2019 für Mac verwenden, da sie über alle Funktionen zum Erstellen von Apps verfügen.

So, lasst uns beginnen, unsere ersten mobilen Apps mit Xamarin zu erstellen!

Installation von Visual Studio für die mobile Entwicklung

Der erste Schritt auf Ihrer plattformübergreifenden Reise ist die Installation von Visual Studio 2019 für Windows oder Visual Studio 2019 für Mac.

Bei der Installation von Visual Studio 2019 unter Windows müssen Sie lediglich den Workload Mobile Entwicklung mit .NET workload:

Bei Visual Studio 2019 für Mac können Sie auswählen, ob Sie Android und iOS installieren möchten.

Wenn Sie iOS-Entwicklung betreiben, müssen Sie auch Xcode auf Ihrem macOS-Rechner installieren.

Danach sind Sie bereit für die mobile Entwicklung!

Wenn Sie ein Android-Projekt erstellen und ausführen, werden Sie möglicherweise aufgefordert, zusätzliche Android-SDKs zu installieren und Android-Emulatoren zu erstellen.

Erstellen Ihres Projekts

Nun, da wir Visual Studio 2019 und Xamarin installiert haben, können wir mit der Arbeit beginnen! Wenn Sie Visual Studio 2019 starten, haben Sie die Möglichkeit, ein neues Projekt zu erstellen. Unter Windows können Sie nach Xamarin.Forms suchen oder den Projekttypenfilter verwenden und Mobile auswählen. Wir werden Mobile App (Xamarin.Forms) auswählen.

Wenn Sie dieses neue Projekt auswählen, wird ein neues Dialogfeld angezeigt, in dem Sie gefragt werden, welche Art von Vorlage für die App Sie verwenden möchten:

Wir haben ein paar Optionen, die wir basierend auf der Art der Anwendung, die wir erstellen möchten, auswählen.

Flyout, Tabbed, & Blank

Flyout & Tabbed App Templates basieren auf der neuesten Xamarin.Forms Technologie namens Shell. Sie ermöglicht ein schnelleres Scaffolding von Apps und bietet einzigartige Funktionen wie eine URL-basierte Navigation. Diese Vorlagen sind ähnlich, mit dem Hauptunterschied, ob Sie ein Flyout-Menü oder untere Registerkarten für die Basis Ihrer App wünschen.

Blank app ist genau das und bietet eine recht einfache Vorlage mit einer einzigen Seite und sonst nichts.

Lassen Sie uns mit Flyout beginnen! Ich möchte, dass wir hier beginnen, da die meisten Tutorials nicht über Shell gehen und es für mich die Zukunft der Xamarin App-Entwicklung ist. Diese Vorlage hat eine Menge in sich, so dass wir in zukünftigen Beiträgen jeden Abschnitt durchgehen werden, aber für heute werden wir nur das Projekt erstellen und durchgehen, was eine Shell ist.

Wenn Sie auf Visual Studio 2019 für Mac sind, werden Sie Multiplattform auswählen wollen > App > Flyout Forms App

Was ist im Projekt?

Nachdem das App-Projekt erstellt wurde, sehen Sie mehrere Projekte in einer einzigen Lösung.

Lassen Sie uns durchgehen, was sich in unserer neuen Lösung befindet:

Das erste Projekt enthält mehrere Ordner, Codedateien und Dateien für die Benutzeroberfläche. Bei diesem Projekt handelt es sich um ein .NET-Standardprojekt, das es uns ermöglicht, ein einziges Projekt zu haben, das auf verschiedenen Betriebssystemen verwendet werden kann. In diesem Projekt werden wir den größten Teil unseres Codes schreiben.

iOS & Android-Projekte sind das „Haupt-“ oder „übergeordnete“ Projekt, das verwendet wird, um plattformspezifischen Code, Einstellungen, Assets und mehr unterzubringen. Hier werden Sie verschiedene Einstellungen wie Anzeigename, App-Symbol, Versionsnummern und jeglichen Code konfigurieren, der für iOS- oder Android-spezifische Dinge benötigt wird, die nicht plattformübergreifend verfügbar sind. Irgendwann müssen Sie in diese Projekte gehen und Dinge ändern, aber für den Moment bleiben wir im plattformübergreifenden Projekt.

Xamarin.Forms Cross-Platform UI

Innerhalb unseres plattformübergreifenden .NET-Standard-Projekts finden wir ein wenig Code für unsere App. Diese Vorlage zeigt eine Beispiel-App, die eine Liste von Elementen und eine Info-Seite hat. Die Elemente sind in Ordnern organisiert:

• Modelle: Dies sind Klassen, die Daten in Ihren Anwendungen darstellen, wie z. B. Person, Auto, Hund, Katze usw. In dieser Anwendung haben wir ein einziges Modell namens Item.
• Services: In diesem Ordner befindet sich der Code für den Zugriff auf nicht mit der Benutzeroberfläche zusammenhängende Dinge wie Webservice-Aufrufe, Datenbanken usw. Im Projekt befindet sich ein einfacher MockDataStore, der zum Speichern von Elementen im Speicher verwendet wird.
• Views: Hier werden unsere XAML-Benutzeroberflächendateien untergebracht!
• ViewModels: In diesem Ordner finden Sie Dateien, die fast 1:1 auf den Ordner Views abgebildet sind. Das liegt daran, dass jede View ein ViewModel hat, das so gebunden ist, dass Xamarin.Forms die beiden miteinander verbinden kann, so dass die View Informationen anzeigen oder Methoden in jedem ViewModel aufrufen kann.

Werfen wir einen Blick auf die AboutPage.xaml, die die erste Seite ist, die wir sehen, wenn wir die App starten. Hier sehen wir ein paar Dinge, zuerst ist das Top-Level-Element ContentPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">

Hier sind ein paar xmlns-Tags, die darstellen, wo bestimmter Code lebt. Die Tags default und x sind in jeder Datei enthalten und dienen der Basisfunktionalität. Mit dem Tag xmlns:vm können wir von XAML aus auf unseren eigenen Code zugreifen, was wir gleich sehen werden. Das x:Class-Tag ist ein Verweis auf den Namespace und den Namen der Seite, der mit dem Code dahinter übereinstimmt. Schließlich gibt es eine Title-Eigenschaft, die an eine Eigenschaft namens Title in unserem ViewModel gebunden ist.

Wir können weitere Eigenschaften wie den BindingContext und die Ressourcen mit XAML-Inhalten festlegen. Hier werden wir das xmlns:vm-Tag verwenden, um den BindingContext auf eine neue Instanz des AboutViewModel zu setzen:

<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>

Als Nächstes kommt eine Color-Ressource, die auf der Seite verwendet werden kann. Ressourcen ermöglichen es uns, doppelten Code zu entfernen und wiederverwendbare Schlüssel/Wertpaare zu erstellen. Dies ist in gewisser Weise vergleichbar mit CSS in der Webentwicklung.

<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>

Wir können weitere Dinge zu den Ressourcen hinzufügen, einschließlich Strings, Stile und mehr.

Schließlich kann jede Seite ein Root-Element-Steuerelement haben. Dies ist normalerweise ein Layout wie StackLayout, ScrollView oder ein Grid, wie wir es hier haben. Das Grid ist ein großartiges Steuerelement, das Zeilen und Spalten hat. Wir werden nicht viel ins Detail von Layouts gehen, aber dieses hier zeigt ein Bild, etwas Text und eine Schaltfläche, die angeklickt werden kann, um einen Webbrowser zu öffnen.

<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />

Beachten Sie das {StaticResource Primary}, das ein Verweis auf eine Ressource ist, die wir zuvor definiert haben Accent, aber Primary befindet sich in unserer App.xaml, die Ressourcen sind, die in der gesamten App verfügbar sind.

Um weitere Layouts und Steuerelemente zu finden, können Sie die Toolbox öffnen, um zu sehen, was verfügbar ist:

Wenn Sie schließlich ein Steuerelement oder ein Layout auswählen, zeigt Ihnen der Eigenschaftsbereich alle verschiedenen Eigenschaften an, die für dieses Steuerelement verfügbar sind.

Eine Sache, die sehr wichtig ist, ist, dass jede dieser XAML-Seiten Code hinter sich hat, der für die XAML-Ansicht wichtig ist und spezifische Methoden für den Konstruktor und das Ereignis hat, z. B. wenn die Seiten angezeigt werden oder verschwinden. Sie können den kleinen Pfeil nach unten verwenden, um den Code hinter der Datei .xaml.cs zu sehen.

Wenn Sie sie öffnen, werden Sie sehen, dass sie sehr einfach ist, da es für diese Ansicht keine speziellen Ereignisse gibt, die im Moment benötigt werden.

public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}

Benutzerinteraktion und ViewModels

Nun lassen Sie uns über das ViewModel für diese Seite sprechen, die in der XAML erstellt wurde. Öffnen Sie die Datei ViewModels -> AboutViewModel.cs, indem Sie darauf doppelklicken.

public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}

Dies ist ein erstaunlich einfaches ViewModel, aber ein bemerkenswertes Beispiel dafür, wie Datenbindung funktioniert. Hier setzt das ViewModel den Titel auf About und erstellt dann einen neuen Befehl, der Browser.OpenAsync aufruft, um einen Webbrowser auf der Seite zu öffnen.

Das Command ist etwas Besonderes. Im Gegensatz zu Title, das ein einfaches string ist, das angezeigt wird, ist Command eine spezielle Klasse, mit der wir unserer Benutzeroberfläche sagen können, dass sie etwas tun soll, wenn der Benutzer mit ihr interagiert. Auf unserem Button haben wir zum Beispiel folgenden Code gesehen:

Command="{Binding OpenWebCommand}"

Dieser Code teilt Xamarin.Forms mit, dass es einen public-Befehl in unserem ViewModel gibt, der Code enthält, der ausgeführt werden soll, wenn der Benutzer auf die Schaltfläche klickt. In diesem Fall wollen wir den Browser öffnen, eine der vielen nativen Funktionen, die von Xamarin.Essentials zur Verfügung stehen. Durch den Aufruf von Browser.OpenAsync wird der Browser speziell für iOS und Android mit einer einzigen Codezeile gestartet.

Schnelle Änderungen mit XAML Hot Reload

Nun ist es an der Zeit, unsere Anwendung zu starten. Ich beginne gerne mit Android, da Emulatoren sowohl auf Windows als auch auf macOS lokal verfügbar sind. Im Menü von Visual Studio sehen Sie, dass Android das Standardprojekt ist und die Debug-Schaltfläche verfügbar ist und Ihre verfügbaren Android-Emulatoren anzeigt. Wenn Sie auf die Debug-Schaltfläche klicken, wenn Sie keine Emulatoren haben, werden Sie aufgefordert, einen zu erstellen.

Wenn die App startet, tritt sie in den Debug-Modus ein, der es uns ermöglicht, Haltepunkte in unserem Code zu setzen, um die Werte zu sehen, aber auch XAML Hot Reload ermöglicht, wo wir Änderungen an der Benutzeroberfläche vornehmen können, ohne das Debugging zu beenden.

Öffnen wir die Datei AboutPage.xaml und ändern die Farbe Accent auf eine andere Farbe. Hier aktualisiere ich sie auf Orange und drücke auf Speichern, um die Änderungen zu sehen.

An dieser Stelle können wir neue Steuerelemente hinzufügen, die Benutzeroberfläche aktualisieren und mit der Arbeit an unserer App auf Android fortfahren.

Bereitstellen auf iOS mit Hot Restart

Lassen Sie uns iOS bereitstellen! Klicken Sie mit der rechten Maustaste auf das iOS-Projekt und wählen Sie Als Startprojekt festlegen:

Auf iOS sind die Dinge für Entwickler ein wenig anders. Wenn du auf macOS bist und Xcode installierst, hast du iOS-Simulatoren zur Verfügung. Wenn Sie das sind, können Sie einen Simulator auswählen und Ihre App debuggen. Unter Windows gibt es keine iOS-Simulatoren 🙁 Es gibt also zwei Möglichkeiten, Ihren

• iOS Remoted Simulator zu bekommen: Wenn du einen macOS-Rechner hast, kannst du Visual Studio 2019 für Mac und Xcode installieren und dich von deinem Windows-Rechner aus mit ihm verbinden, um ihn als Remote-Build-Maschine zu verwenden. Der iOS-Simulator kann dann von Ihrem Windows-Rechner aus gestartet werden, was sehr cool ist!
• iOS Hot Restart: Dies ist eine neue Vorschautechnologie, mit der Sie einen Debug-Build Ihrer App direkt auf Ihrem iOS-Gerät bereitstellen können, das an Ihren Windows-Rechner angeschlossen ist. Das ist großartig, wenn Sie keinen Mac haben und Ihre Anwendung debuggen und großartige Funktionen wie XAML Hot Reload nutzen möchten.

Abhängig von Ihrem Setup und der verfügbaren Ausrüstung gibt es eine großartige Option für Sie, um das Debugging Ihrer iOS-App von Windows aus zu starten. Lesen Sie die Dokumentation, die ich verlinkt habe, um eine vollständige Setup-Anleitung zu erhalten.

Verständnis von App und Shell

Das letzte, worüber ich sprechen möchte, ist, was sich in unserer *App und was sich in unserer Shell befindet:

In unserer App.xaml finden Sie globale Ressourcen wie Primary, die wir zuvor für die Schaltfläche verwendet haben, aber auch Stile wie einen globalen Button-Stil, den wir für die Zustände bei Aktivierung und Deaktivierung verwenden. Wenn Sie den Code der App.xaml.cs öffnen, sehen Sie die Erstellung der App, die die MainPage auf unsere AppShell setzt und auch zusätzliche Ereignisse ähnlich unserer Seite hat, aber für die App, z. B. wann sie gestartet, in den Ruhezustand (auch als Hintergrund bezeichnet) gegangen und wieder aufgenommen wurde.

Die AppShell.xaml beherbergt die Shell unserer Anwendungsstruktur. Sie enthält Stile und Farben für unsere App-Shell und hat dann zusätzliche Elemente für Registerkarten, Flyouts und Seiten, die angezeigt werden. Hier finden wir zwei FlyoutItem-Elemente, die das AboutPage und das BrowsePage darstellen. Zusätzlich gibt es ein MenuItem, um eine Login-/Logout-Schaltfläche anzuzeigen. Das ShellContent hat eine Bindung zu unserer Seite, die wir erstellt haben, und automatisch werden die Seiten angezeigt und navigieren zu jeder von ihnen, wenn sie ausgewählt werden.

Es gibt noch viel mehr zu Xamarin.Forms Shell und dem Erstellen von Anwendungen mit Xamarin, aber hoffentlich bringt Sie das auf den ersten Weg, um mit Ihrer Anwendung loszulegen. Achten Sie darauf, dem .NET dev.to-Konto für weitere Einträge in dieser Serie zu folgen.

Mehr erfahren