Wie Sie mit Ihrer WinUI 3-Anwendung mehrere Plattformen ansprechen

Nachdem Sie eine Start-Hallo Welt WinUI 3-App erstellt haben, fragen Sie sich vielleicht, wie Sie mehr Benutzer mit einer einzigen Codebasis erreichen können. Diese Vorgehensweise wird uno Platform verwenden, um die Reichweite Ihrer vorhandenen Anwendung zu erweitern, um die Wiederverwendung der Geschäftslogik und der UI-Ebene über native Mobile, Web und Desktop hinweg zu ermöglichen.

Voraussetzungen

• Visual Studio 2022 17.4 oder höher
• Einrichten Ihres Entwicklungscomputers (lesen Sie Erste Schritte mit WinUI)
• Workload „ASP.NET und Webentwicklung“ (für die WebAssembly-Entwicklung)
• Installation von „.NET Multi-Platform App UI-Entwicklung“ (für die iOS-, Android- und Mac Catalyst-Entwicklung)
• Installation von „.NET-Desktopentwicklung“ (für die Gtk-, Wpf- und Linux Framebuffer-Entwicklung)

Fertigstellen Ihrer Umgebung

1. Öffnen Sie eine Befehlszeile, eine Instanz von Windows-Terminal (sofern installiert) oder auch eine Eingabeaufforderung oder Windows PowerShell über das Startmenü.

2. Installieren oder aktualisieren Sie das Tool uno-check:

   • Verwenden Sie den folgenden Befehl:

     dotnet tool install -g uno.check
     

   • So aktualisieren Sie das Tool, wenn bei Ihnen bereits eine ältere Version installiert ist:

     dotnet tool update -g uno.check
     

3. Führen Sie das Tool mithilfe des folgenden Befehls aus:

   uno-check
   

4. Befolgen Sie die im Tool angegebenen Anweisungen. Da ihr System geändert werden muss, werden Sie möglicherweise aufgefordert, erhöhte Berechtigungen zu erteilen.

Installieren der Projektmappenvorlagen für Uno Platform

Starten Sie Visual Studio, und klicken Sie auf Continue without code. Klicken Sie auf der Menüleiste auf Extensions>Manage Extensions.

Erweitern Sie im Erweiterungs-Manager den Onlineknoten , und suchen UnoSie nach der Erweiterung, installieren Sie sie Uno Platform , oder laden Sie sie aus dem Visual Studio Marketplace herunter, und starten Sie Visual Studio neu.

Erstellen einer Anwendung

Nachdem wir nun bereit sind, eine Multi-Plattform-Anwendung zu erstellen, besteht der Ansatz darin, eine neue Uno Platform-Anwendung zu erstellen. Wir kopieren XAML-Code aus dem Hallo Welt WinUI 3-Projekt des vorherigen Lernprogramms in unser Multiplattformprojekt. Das ist möglich, da Uno Platform die Wiederverwendung Ihrer bereits vorhandenen Codebasis ermöglicht. Features, die von Betriebssystem-APIs der jeweiligen Plattform abhängig sind, können problemlos nach und nach implementiert werden. Dieser Ansatz ist besonders nützlich, um bereits vorhandene Anwendung zu anderen Plattformen zu portieren.

Schon bald können Sie von den Vorteilen dieses Ansatzes profitieren, da Sie mehr Plattformen mit einer vertrauten XAML-Variante und der bereits vorhandenen Codebasis erreichen können.

Öffnen Sie Visual Studio, und wählen Sie File>New>Project aus, um ein neues Projekt zu erstellen:

Suchen Sie nach „Uno“, und wählen Sie die Projektvorlage „Uno Platform-App“ aus:

Geben Sie den Projektnamen, den Projektmappennamen und das Verzeichnis an. In diesem Beispiel gehört unser Hallo Welt MultiPlatform-Projekt zu einer Hallo Welt MultiPlatform-Lösung, die in C:\Projects lebt:

Erstellen Sie über die Startseite von Visual Studio eine neue C#-Projektmappe mit dem Typ Uno Platform-App. Um Konflikte mit dem Code aus dem vorherigen Lernprogramm zu vermeiden, geben wir dieser Lösung einen anderen Namen: "Hallo Welt Uno".

Jetzt wählen Sie eine Basisvorlage aus, um Ihre Hallo Welt Anwendungsmultiplattform zu übernehmen. Die Vorlage „Uno Platform-App“ enthält zwei voreingestellte Optionen (Leer und Standard) für den schnellen Einstieg – entweder mit einer leeren Projektmappe oder mit der Standardkonfiguration, die Verweise auf die Bibliotheken „Uno.Material“ und „Uno.Toolkit“ enthält. Die Standardkonfiguration umfasst auch Uno.Extensions, die für Abhängigkeitseinfügung, Konfiguration, Navigation und Protokollierung verwendet wird, und es verwendet MVUX anstelle von MVVM, wodurch es zu einem hervorragenden Ausgangspunkt für die schnelle Erstellung von realen Anwendungen wird.

Wählen Sie der Einfachheit halber die Voreinstellung Leer aus. Klicken Sie anschließend auf die Schaltfläche Erstellen. Warten Sie, bis die Projekte erstellt und ihre Abhängigkeiten wiederhergestellt wurden.

Ein Banner oben im Editor wird möglicherweise aufgefordert, Projekte neu zu laden, und klicken Sie auf "Projekte erneut laden":

Erstellen Ihrer App

Nachdem Sie nun den funktionalen Ausgangspunkt Ihrer Multiplattform-WinUI-Anwendung generiert haben, können Sie Markup aus dem im vorherigen Lernprogramm beschriebenen Hallo Welt WinUI 3-Projekt kopieren.

Im Projektmappen-Explorer sollte die folgende Standarddateistruktur angezeigt werden:

Stellen Sie sicher, dass Visual Studio ihr WinUI 3-Projekt geöffnet hat, und kopieren Sie dann die untergeordneten XAML-Elemente aus MainWindow.xaml dem WinUI 3-Projekt in Ihre MainPage.xaml Datei im Uno Platform-Projekt. Der XAML-Code der MainPage-Ansicht sollte wie folgt aussehen:

<Page x:Class="HelloWorld.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <!-- Below is the code you copied from MainWindow: -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
          <TextBlock x:Name="myText" 
                     Text="Hello world!"
                     Foreground="Red"/>
      </StackPanel>
</Page>

Starten Sie das HelloWorld.Windows-Ziel. Beachten Sie, dass diese WinUI-App mit dem vorherigen Lernprogramm identisch ist.

Sie können Ihre App jetzt auf jeder der unterstützten Plattformen erstellen und ausführen. Dazu können Sie über die Dropdownliste auf der Debugsymbolleiste eine Zielplattform für die Bereitstellung auswählen:

• So führen Sie die WASM-Hauptkomponente (WebAssembly) aus

  • Klicken Sie mit der rechten Maustaste auf das Projekt HelloWorld.Wasm, und wählen Sie Als Startprojekt festlegen aus.
  • Wählen Sie die Schaltfläche HelloWorld.Wasm aus, um die App bereitzustellen.
  • Bei Bedarf können Sie das HelloWorld.Server Projekt als Alternative verwenden.

• So debuggen Sie für iOS

  • Klicken Sie mit der rechten Maustaste auf das Projekt HelloWorld.Mobile, und wählen Sie Als Startprojekt festlegen aus.

  • Wählen Sie über die Dropdownliste auf der Debugsymbolleiste ein aktives iOS-Gerät oder den Simulator aus. Hierzu muss eine Koppelung mit einem Mac bestehen.

    

• So debuggen Sie für Mac Catalyst

  • Klicken Sie mit der rechten Maustaste auf das Projekt HelloWorld.Mobile, und wählen Sie Als Startprojekt festlegen aus.
  • Wählen Sie über die Dropdownliste auf der Debugsymbolleiste ein macOS-Remotegerät aus. Hierzu muss eine Koppelung mit einem entsprechenden Gerät bestehen.

• So debuggen Sie die Android-Plattform

  • Klicken Sie mit der rechten Maustaste auf das Projekt HelloWorld.Mobile, und wählen Sie Als Startprojekt festlegen aus.
  • Wählen Sie über die Dropdownliste auf der Debugsymbolleiste entweder ein aktives Android-Gerät oder den Emulator aus.
    • Wählen Sie im Untermenü „Gerät“ ein aktives Gerät aus.

• So debuggen Sie unter Linux mit Skia GTK:

  • Klicken Sie mit der rechten Maustaste auf das Projekt HelloWorld.Skia.Gtk, und wählen Sie Als Startprojekt festlegen aus.
  • Wählen Sie die Schaltfläche HelloWorld.Skia.Gtk aus, um die App bereitzustellen.

Jetzt können Sie mit der Erstellung Ihrer Multiplattformanwendung beginnen!

Siehe auch

• Dokumentation zu Uno Platform
• Uno-Erweiterungen-Features