Aktualisieren von 2D UWP-Apps für Windows Mixed RealityUpdating 2D UWP apps for Windows Mixed Reality

Windows Mixed Reality ermöglicht Ihren Benutzern das Anzeigen von holograms, als ob Sie sich in der physischen und digitalen Welt befinden.Windows Mixed Reality lets your users see holograms as if they're right around them in the physical and digital world. Im Kern sind sowohl hololens als auch Desktop-PCs, an die Sie die immersiven Headset-Zubehör anfügen, Windows 10-Geräte.At its core, both HoloLens and the Desktop PCs you attach immersive headset accessories to are Windows 10 devices. Sie sind in der Lage, fast alle universelle Windows-Plattform-Apps (UWP) im Store als 2D-apps auszuführen.You're able to run almost all Universal Windows Platform (UWP) apps in the Store as 2D apps.

Erstellen einer 2D-UWP-App für gemischte RealitätCreating a 2D UWP app for mixed reality

Der erste Schritt bei der Einführung einer 2D-app in gemischte Reality-Headsets besteht darin, Ihre APP als standardmäßige 2D-App auf Ihrem Desktop Monitor zu starten.The first step to bringing a 2D app to mixed reality headsets is to get your app running as a standard 2D app on your desktop monitor.

Neue 2D-UWP-APP wird aufgebautBuilding a new 2D UWP app

Um eine neue 2D-App für gemischte Realität zu erstellen, erstellen Sie eine standardmäßige 2D-universelle Windows-Plattform-app (UWP).To build a new 2D app for mixed reality, you build a standard 2D Universal Windows Platform (UWP) app. Es sind keine weiteren App-Änderungen erforderlich, damit diese APP als Slate in gemischter Realität ausgeführt wird.No other app changes are required for that app to then run as a slate in mixed reality.

Informationen zu den ersten Schritten bei der Erstellung einer 2D-UWP-App finden Sie im Artikel Erstellen Ihrer ersten App .To get started building a 2D UWP app, check out the Create your first app article.

Einbinden einer vorhandenen 2D Store-App in die UWPBringing an existing 2D Store app to UWP

Wenn Sie bereits über eine 2D-Windows-App im Store verfügen, stellen Sie sicher, dass die Windows 10-universelle Windows-Plattform (UWP) als Ziel verwendet wird.If you already have a 2D Windows app in the Store, make sure it's targeting the Windows 10 Universal Windows Platform (UWP). Im folgenden finden Sie alle potenziellen Ausgangspunkte, die Sie möglicherweise mit ihrer Store-App haben:Here are all the potential starting points you may have with your Store app today:

StartpunktStarting Point Ziel der AppX-Manifest-PlattformAppX Manifest Platform Target Wie wird dies universell gemacht?How to make this Universal?
Windows Phone (Silverlight)Windows Phone (Silverlight) Silverlight-App-ManifestSilverlight App Manifest Migrieren zu WinRTMigrate to WinRT
Windows Phone 8,1 universellWindows Phone 8.1 Universal 8,1 AppX-Manifest, das kein Platt Form Ziel enthält8.1 AppX Manifest that Doesn't Include Platform Target Migrieren Sie Ihre APP zum universelle Windows-PlattformMigrate your app to the Universal Windows Platform
Windows Store 8Windows Store 8 8 AppX-Manifest, das kein Platt Form Ziel enthält8 AppX Manifest that Doesn't Include Platform Target Migrieren Sie Ihre APP zum universelle Windows-PlattformMigrate your app to the Universal Windows Platform
Windows Store 8,1 universellWindows Store 8.1 Universal 8,1 AppX-Manifest, das kein Platt Form Ziel enthält8.1 AppX Manifest that Doesn't Include Platform Target Migrieren Sie Ihre APP zum universelle Windows-PlattformMigrate your app to the Universal Windows Platform

Wenn Sie bereits über eine 2D-Unity-App verfügen, die heute als Win32-App auf dem PC, Mac & eigenständiges Build-Ziel für Linux erstellt wurde, wechseln Sie zum universelle Windows-Plattform Build-Ziel für Mixed Reality.If you have a 2D Unity app today built as a Win32 app on the PC, Mac & Linux Standalone build target, switch to the Universal Windows Platform build target for mixed reality.

Wir erläutern, wie Sie Ihre App mithilfe der unten stehendenGerätefamilie Windows. Holographic speziell auf hololens beschränken können.We'll talk about ways that you can restrict your app specifically to HoloLens using the Windows.Holographic device family below.

Ausführen der 2D-app in einem Windows Mixed Reality-immersiven HeadsetRun your 2D app in a Windows Mixed Reality immersive headset

Wenn Sie Ihre 2D-App auf einem Desktop Computer bereitgestellt und auf dem Monitor ausprobiert haben, können Sie Sie auf einem immersiven Desktop-Headset ausprobieren!If you've deployed your 2D app to a desktop machine and tried it out on your monitor, you're ready to try it out on an immersive desktop headset!

Wechseln Sie einfach zum Startmenü im Mixed Reality-Headset, und starten Sie die APP von dort aus.Just go to the Start menu within the mixed reality headset and launch the app from there. Die Desktopshell und die Holographic Shell verwenden beide denselben UWP-apps, sodass die APP bereits vorhanden sein sollte, nachdem Sie Sie von Visual Studio aus bereitgestellt haben.The desktop shell and the holographic shell both share the same set of UWP apps, and so the app should already be present once you've deployed from Visual Studio.

Ziel für immersive Headsets und hololensTargeting both immersive headsets and HoloLens

Glückwunsch!Congratulations! Ihre APP verwendet jetzt die Windows 10-universelle Windows-Plattform (UWP).Your app is now using the Windows 10 Universal Windows Platform (UWP).

Ihre APP ist nun in der Lage, auf den heutigen Windows-Geräten wie Desktop, Mobile, Xbox, Windows Mixed Reality-und Windows-Geräte mit gemischtem Betrieb, hololens und zukünftigen Windows-Geräten ausgeführt werden.Your app is now capable of running on today's Windows devices like Desktop, Mobile, Xbox, Windows Mixed Reality immersive headsets, HoloLens, and future Windows devices. Allerdings müssen Sie sicherstellen, dass Ihre APP auf die Windows-Anwendung ausgerichtet ist, damit Sie tatsächlich auf alle diese Geräte abzielen.However, to actually target all of those devices, you will need to ensure your app is targeting the Windows. Universelle Gerätefamilie.Universal device family.

Ändern der Gerätefamilie in Windows. UniversalChange your device family to Windows.Universal

Wechseln wir nun zu Ihrem AppX-Manifest, um sicherzustellen, dass Ihre Windows 10-UWP-App auf hololens ausgeführt werden kann:Now let's jump into your AppX manifest to ensure your Windows 10 UWP app can run on HoloLens:

  • Öffnen Sie die Projektmappendatei Ihrer APP mit Visual Studio , und navigieren Sie zum App-Paket Manifest.Open your app's solution file with Visual Studio and navigate to the app package manifest
  • Klicken Sie mit der rechten Maustaste in der Projekt Mappe auf die Datei " Package. appxmanifest ", und wechseln Sie zuRight-click the Package.appxmanifest file in your Solution and go to View Code
    "Package. appxmanifest" in Projektmappen-Explorerpackage.appxmanifest in Solution Explorer
  • Stellen Sie sicher, dass die Zielplattform Windows ist.Ensure your Target Platform is Windows. Universell im Abschnitt "Abhängigkeiten"Universal in the dependencies section
    <Dependencies>
      <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0" MaxVersionTested="10.0.10586.0" />
    </Dependencies>
    
  • Sicher!Save!

Wenn Sie Visual Studio nicht für Ihre Entwicklungsumgebung verwenden, können Sie AppXManifest.xml im Text-Editor Ihrer Wahl öffnen, um sicherzustellen, dass Sie die Windows. Universal targetdevicefamily als Ziel verwenden.If you don't use Visual Studio for your development environment, you can open AppXManifest.xml in the text editor of your choice to ensure you're targeting the Windows.Universal TargetDeviceFamily.

Ausführen im hololens-EmulatorRun in the HoloLens Emulator

Nun, da ihre UWP-app "Windows. Universal" als Ziel hat, können Sie Ihre APP erstellen und im hololens-Emulatorausführen.Now that your UWP app targets "Windows.Universal", let's build your app and run it in the HoloLens Emulator.

  • Stellen Sie sicher, dass Sie den hololens-Emulator installierthaben.Make sure you're installed the HoloLens Emulator.

  • Wählen Sie in Visual Studio die x86 -Buildkonfiguration für Ihre APP aus.In Visual Studio, select the x86 build configuration for your app

    x86-Buildkonfiguration in Visual Studio

  • Wählen Sie im Dropdownmenü für das Bereitstellungsziel HoloLens-Emulator aus.Select HoloLens Emulator in the deployment target drop-down menu

    Hololens-Emulator in der Liste der Bereitstellungs Ziele

  • Wählen Sie Debuggen > Debugging starten , um die APP bereitzustellen und das Debugging zu startenSelect Debug > Start Debugging to deploy your app and start debugging.

  • Der Emulator startet Ihre APP und führt Sie aus.The emulator will start and run your app.

  • Wenn Sie über eine Tastatur, eine Maus und einen Xbox-Controller verfügen, platzieren Sie die APP auf der Welt, um Sie zu starten.With a keyboard, mouse, and an Xbox controller, place your app in the world to launch it.

    Hololens-Emulator mit einem UWP-Beispiel geladen

Nächste SchritteNext steps

An diesem Punkt kann eines von zwei Dingen eintreten:At this point, one of two things can happen:

  1. Ihre APP zeigt ihren Begrüßungs Vorgang an und wird gestartet, nachdem Sie im Emulator abgelegt wurde.Your app will show its splash and start running after it's placed in the Emulator! Prima.Awesome!
  2. Oder wenn Sie eine ladende Animation für ein 2D Hologram sehen, wird das Laden angehalten, und Ihre APP wird nur auf dem Begrüßungsbildschirm angezeigt.Or after you see a loading animation for a 2D hologram, loading will stop and you'll just see your app at its splash screen. Dies bedeutet, dass etwas schief gelaufen ist, und es wird eine weitere Untersuchung durchgeführt, um zu verstehen, wie Sie Ihre APP in gemischter Realität umsetzen.This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

Sie müssen Debuggen, um zum Stamm der möglichen Probleme zu gelangen, die den Start der UWP-App auf hololens beenden.You'll need to debug to get to the root of possible issues that are stopping your UWP app from starting on HoloLens.

Ausführen der UWP-App im DebuggerRunning your UWP app in the debugger

Diese Schritte führen Sie durch das Debuggen der UWP-App mit dem Visual Studio-Debugger.These steps will walk you through debugging your UWP app using the Visual Studio debugger.

  • Wenn Sie dies nicht bereits getan haben, öffnen Sie die Projekt Mappe in Visual Studio.If you haven't already done so, open your solution in Visual Studio. Ändern Sie das Ziel in den hololens-Emulator und die Buildkonfiguration in x86.Change the target to the HoloLens Emulator and the build configuration to x86.
  • Wählen Sie Debuggen > Debugging starten , um die APP bereitzustellen und das Debugging zu startenSelect Debug > Start Debugging to deploy your app and start debugging.
  • Platzieren Sie die APP mit der Maus, Tastatur oder dem Xbox-Controller auf der ganzen Welt.Place the app in the world with your mouse, keyboard, or Xbox controller.
  • Visual Studio sollte nun irgendwo in Ihrem app-Code unterbrechen.Visual Studio should now break somewhere in your app code.
    • Wenn Ihre APP aufgrund eines nicht behandelten Fehlers nicht sofort abstürzen oder in den Debugger wechselt, durchlaufen Sie einen Testdurchlauf der Kern Features Ihrer APP, um sicherzustellen, dass alles ausgeführt wird und funktionsfähig ist.If your app doesn't immediately crash or break into the debugger because of an unhandled error, then go through a test pass of the core features of your app to make sure everything is running and functional. Möglicherweise werden Fehler wie unten dargestellt angezeigt (interne Ausnahmen, die behandelt werden).You may see errors like pictured below (internal exceptions that are being handled). Um sicherzustellen, dass Sie keine internen Fehler vermissen, die sich auf die APP-Leistung auswirken, führen Sie die automatisierten Tests und Komponententests durch, um sicherzustellen, dass alles wie erwartet funktioniert.To ensure you don't miss internal errors that impact the experience of your app, run through your automated tests and unit tests to make sure everything behaves as expected.

Hololens-Emulator mit einem UWP-Beispiel geladen, das eine System Ausnahme anzeigt

Aktualisieren der BenutzeroberflächeUpdate your UI

Nun, da ihre UWP-App auf immersiven Headsets und hololens als 2D Hologram ausgeführt wird, werden wir als nächstes sicherstellen, dass Sie sehr schön aussieht.Now that your UWP app is running on immersive headsets and HoloLens as a 2D hologram, next we'll make sure it looks beautiful. Nachfolgend sind einige Dinge aufgeführt, die Sie bedenken sollten:Here are some things to consider:

  • Windows Mixed Reality führt alle 2D-apps mit fester Auflösung und dpi-Wert aus, der 853x480 effektiven Pixeln entspricht.Windows Mixed Reality will run all 2D apps at a fixed resolution and DPI that equates to 853x480 effective pixels. Berücksichtigen Sie, ob Ihr Design in dieser Skala verfeinert werden muss, und überprüfen Sie den unten stehenden Entwurfs Leit Faden, um Ihre Benutzeroberflächen und immersive Headsets zu verbessern.Consider if your design needs refinement at this scale and review the design guidance below to improve your experience on HoloLens and immersive headsets.
  • Windows Mixed Reality unterstützt keine 2D-Live Kacheln.Windows Mixed Reality doesn't support 2D live tiles. Wenn die Kernfunktionalität Informationen zu einer Live-Kachel anzeigt, sollten Sie diese Informationen in Ihre APP zurück verschieben oder 3D-App-Launchererkunden.If your core functionality is showing information on a live tile, consider moving that information back into your app or explore 3D app launchers.

2D-App-Ansichts Auflösung und Skalierungsfaktor2D app view resolution and scale factor

Vom reaktionsfähigen Design

Windows 10 verschiebt den gesamten visuellen Entwurf von "Real Screen Pixels" in " effektive Pixel".Windows 10 moves all visual design from real screen pixels to effective pixels. Das heißt, Entwickler entwerfen Ihre Benutzeroberfläche gemäß den Windows 10-Richtlinien für die Benutzeroberfläche für effektive Pixel, und die Windows-Skalierung stellt sicher, dass diese effektiven Pixel die richtige Größe für die Verwendbarkeit über Geräte, Auflösungen, dpi usw. sind.That means, developers design their UI following the Windows 10 Human Interface Guidelines for effective pixels, and Windows scaling ensures those effective pixels are the right size for usability across devices, resolutions, DPI, and so on. Weitere Informationen finden Sie auf der MSDN -Website und in dieser buildpräsentation. See this great read on MSDN and this BUILD presentation for more information.

Auch wenn die einzigartige Möglichkeit besteht, apps in einer Reihe von Entfernungen in ihrer Welt zu platzieren, wird empfohlen, TV-ähnliche Anzeige Abstände zu erzielen, um die beste Lesbarkeit und Interaktion mit Blick und Gesten zu erzielen.Even with the unique ability to place apps in your world at a range of distances, TV-like viewing distances are recommended to produce the best readability and interaction with gaze/gesture. Aus diesem Grund zeigt ein virtuelles Slate in der Mixed Reality-Startseite ihre flache UWP-Ansicht an:Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280X720, 150% dpi (853x480 effektive Pixel)1280x720, 150%DPI (853x480 effective pixels)

Diese Lösung bietet mehrere Vorteile:This resolution has several advantages:

  • Dieses effektive Pixel Layout hat ungefähr dieselbe Informationsdichte wie ein Tablet oder ein kleiner Desktop.This effective pixel layout will have about the same information density as a tablet or small desktop.
  • Sie entspricht dem fixierten dpi-Wert und den effektiven Pixeln für UWP-apps, die auf Xbox One ausgeführt werden, und ermöglicht so Geräte übergreifende nahtlose GeräteIt matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • Diese Größe sieht gut aus, wenn die Skalierung über die verschiedenen betriebsabstände für apps weltweit hinweg skaliert wird.This size looks good when scaled across our range of operating distances for apps in the world.

bewährte Methoden zum Entwerfen von 2D-App-Ansichten2D app view interface design best practices

KönnenDo:

  • Befolgen Sie die Windows 10 Human Interface Guidelines (hig) für Stile, Schriftgrößen und Schaltflächen Größen.Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. Hololens führt die Arbeit aus, um sicherzustellen, dass Ihre APP über kompatible App-Muster, lesbare Textgrößen und geeignete Treffer Zielgrößen verfügt.HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • Stellen Sie sicher, dass Ihre Benutzeroberfläche die bewährten Methoden für das reaktionsfähige Design befolgt, um die einzigartige Auflösung und den dpi-Wert von HolEnsure your UI follows best practices for responsive design to look best at HoloLens's unique resolution and DPI.
  • Verwenden Sie die "Light"-Farbdesign Empfehlungen von Windows.Use the "light" color theme recommendations from Windows.

Tue nicht:Don't:

  • Ändern Sie die Benutzeroberfläche in gemischter Realität zu stark, um sicherzustellen, dass Benutzer über eine vertraute Benutzeroberfläche verfügen.Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

Grundlegendes zum App-ModellUnderstand the app model

Das App-Modell für Mixed Reality ist für die Verwendung der Mixed Reality-Startseite konzipiert, in der viele apps miteinander verbunden sind.The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. Stellen Sie sich dies als das Mixed Reality-Äquivalent des Desktops vor, in dem Sie viele 2D-apps gleichzeitig ausführen.Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. Dies hat Auswirkungen auf den Lebenszyklus von apps, Kacheln und andere wichtige Features Ihrer APP.This has implications on app life cycle, Tiles, and other key features of your app.

App-Leiste und zurück-SchaltflächeApp bar and back button

2D-Ansichten werden mit einer APP-Leiste oberhalb ihres Inhalts ergänzt.2D views are decorated with an app bar above their content. Die APP-Leiste verfügt über zwei Punkte der APP-spezifischen Personalisierung:The app bar has two points of app-specific personalization:

Title: zeigt den Display Name der der app-Instanz zugeordneten Kachel an.Title: displays the displayname of the Tile associated with the app instance

Zurück-Schaltfläche: löst beim Drücken das Rück gerufene Ereignis aus.Back Button: raises the BackRequested event when pressed. Die Sichtbarkeit der Schaltfläche "zurück" wird durch systemnavigationmanager. appviewbackbuttonvisibility gesteuert.Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

Benutzeroberfläche der APP-Leiste in der 2D-AppApp bar UI in 2D app view
Benutzeroberfläche der APP-Leiste in der 2D-AppApp bar UI in 2D app view

Testen des Entwurfs Ihrer 2D-AppTest your 2D app's design

Es ist wichtig, Ihre APP zu testen, um sicherzustellen, dass der Text lesbar ist, die Schaltflächen targetable sind und die gesamte App korrekt aussieht.It's important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. Sie können auf einem Desktop-Headset, hololens, einem Emulator oder einem Fingerabdruck Gerät Testen , bei dem die Auflösung auf 1280x 720% festgelegt ist @150 .You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

Neue EingabemöglichkeitenNew input possibilities

Hololens verwendet erweiterte tiefen Sensoren, um die Welt anzuzeigen und Benutzer anzuzeigen.HoloLens uses advanced depth sensors to see the world and see users. Dies ermöglicht erweiterte Handgesten wie z. b. Bloom und Luft tippen.This enables advanced hand gestures like bloom and air-tap. Leistungsstarke Mikrofone ermöglichen auch Spracherfahrung.Powerful microphones also enable voice experiences.

Mit Desktop-Headsets können Benutzer Bewegungs Controller verwenden, um auf apps zu verweisen und Maßnahmen zu ergreifen.With Desktop headsets, users can use motion controllers to point at apps and take action. Sie können auch einen Gamepad verwenden, der auf Objekte mit dem Blick abzielt.They can also use a gamepad, targeting objects with their gaze.

Windows kümmert sich um all diese Komplexität für UWP-apps und übersetzt Ihren Blick, Gesten, Stimme und Bewegungs Controller Eingaben in Zeiger Ereignisse , die den Eingabe Mechanismus abstrahieren.Windows takes care of all of this complexity for UWP apps, translating your gaze, gestures, voice, and motion controller input to pointer events that abstract away the input mechanism. Ein Benutzer hat z. b. möglicherweise eine Luft tippen oder den SELECT-Auslösevorgang auf einem Motion Controller abgerufen, aber 2D-Anwendungen müssen nicht wissen, woher die Eingabe stammt. es wird nur ein 2D-touchpress angezeigt, wie bei einem Touchscreen.For example, a user may have done an air-tap with their hand or pulled the Select trigger on a motion controller, but 2D applications don't need to know where the input came from - they just see a 2D touch press, as if on a touchscreen.

Im folgenden finden Sie die grundlegenden Konzepte und Szenarios, die Sie für die Eingabe verstehen sollten, wenn Sie Ihre UWP-app in hololens bringen:Here are the high-level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • Der Blick wandelt sich in Hover-Ereignisse um, die unerwartet Menüs, Flyouts oder andere Elemente der Benutzeroberfläche aufklappen können, um nur durch das Überprüfen der APP herum zu navigieren.Gaze turns into hover events, which can unexpectedly trigger menus, flyouts or other user interface elements to pop up just by gazing around your app.
  • Der Blick ist nicht so präzise wie Maus Eingaben.Gaze isn't as precise as mouse input. Verwenden Sie für hololens entsprechend große Treffer Ziele, ähnlich wie bei mobilen Anwendungen mit Touchscreen.Use appropriately sized hit targets for HoloLens, similar to touch-friendly mobile applications. Kleine Elemente in der Nähe der Kanten der APP sind besonders schwer zu interagieren.Small elements near the edges of the app are especially hard to interact with.
  • Benutzer müssen die Eingabemodi wechseln, damit Sie vom Bildlauf zu Drag & Drop auf zwei Finger schwenken wechseln können.Users must switch input modes to go from scrolling to dragging to two finger panning. Wenn Ihre APP für Touch-Eingaben konzipiert wurde, sollten Sie sicherstellen, dass keine größeren Funktionen hinter zwei Finger schwenken gesperrt sind.If your app was designed for touch input, consider ensuring that no major functionality is locked behind two finger panning. Wenn dies der Fall ist, sollten Sie über alternative Eingabe Mechanismen wie Schaltflächen verfügen, die zwei Finger schwenken starten können.If so, consider having alternative input mechanisms like buttons that can start two finger panning. Beispielsweise kann die Maps-APP mit zwei Finger schwenken vergrößert werden, verfügt aber über eine Plus-, minus-und Drehungs Schaltfläche, um die gleichen Zoom Interaktionen mit nur einem Mausklick zu simulieren.For example, the Maps app can zoom with two finger panning but has a plus, minus, and rotate button to simulate the same zoom interactions with single clicks.

Spracheingaben sind ein wichtiger Bestandteil der gemischten Realität.Voice input is a critical part of the mixed reality experience. Wir haben alle sprach-APIs in Windows 10 aktiviert, die Cortana verwenden, wenn Sie ein Headset verwenden.We've enabled all of the speech APIs that are in Windows 10 powering Cortana when using a headset.

Veröffentlichen und verwalten Sie Ihre universelle AppPublish and Maintain your Universal app

Sobald Ihre APP ausgeführt wird, Verpacken Sie Ihre APP, um Sie an den Microsoft Store zu senden.Once your app is up and running, package your app to submit it to the Microsoft Store.

Weitere InformationenSee also