Portieren von Windows-Runtime 8.x-XAML und -UI zu UWPPorting Windows Runtime 8.x XAML and UI to UWP

Im vorherigen Thema haben wir uns mit der Problembehandlung beschäftigt.The previous topic was Troubleshooting.

Die Vorgehensweise zum Definieren einer Benutzeroberfläche in Form von deklarativem XAML-Markup lässt sich sehr gut von universellen 8.1-Apps auf Apps für die universelle Windows-Plattform (UWP) übertragen.The practice of defining UI in the form of declarative XAML markup translates extremely well from Universal 8.1 apps to Universal Windows Platform (UWP) apps. Sie werden feststellen, dass der Großteil des Markups kompatibel ist. Unter Umständen sind jedoch einige Anpassungen bei Systemressourcenschlüsseln oder benutzerdefinierten Vorlagen erforderlich.You'll find that most of your markup is compatible, although you may need to make some adjustments to the system Resource keys or custom templates that you're using. Beim imperativen Code in Ihren Ansichtsmodellen sind nur geringfügige oder gar keine Änderungen erforderlich.The imperative code in your view models will require little or no change. Und sogar ein Großteil des Codes in Ihrer Darstellungsschicht zur Manipulierung von UI-Elementen dürfte sich problemlos portieren lassen.Even much, or most, of the code in your presentation layer that manipulates UI elements should also be straightforward to port.

Imperativer CodeImperative code

Falls Sie lediglich die Projekterstellungsphase erreichen möchten, können Sie sämtlichen nicht unbedingt erforderlichen Code auskommentieren.If you just want to get to the stage where your project builds, you can comment or stub out any non-essential code. Gehen Sie anschließend nacheinander die einzelnen Probleme anhand der Informationen in den folgenden Themen dieses Abschnitts (einschließlich des vorherigen Themas Problembehandlung) durch, bis alle Erstellungs- und Laufzeitprobleme behoben sind und die Portierung abgeschlossen ist.Then iterate, one issue at a time, and refer to the following topics in this section (and the previous topic: Troubleshooting), until any build and runtime issues are ironed-out and your port is complete.

Adaptive/reaktionsfähige BenutzeroberflächeAdaptive/responsive UI

Da Ihre App potenziell auf vielen verschiedenen Geräten ausgeführt werden kann – jeweils mit eigener Bildschirmgröße und -auflösung – ist es ratsam, nicht nur die mindestens erforderlichen Schritte zum Portieren Ihrer App auszuführen und die UI so zu gestalten, dass sie auf allen Geräten möglichst gut aussieht.Because your app can run on a potentially wide range of devices—each with its own screen size and resolution—you'll want to go beyond the minimal steps to port your app and you'll want to tailor your UI to look its best on those devices. Sie können das adaptive Visual State-Manager-Feature nutzen, um die Fenstergröße dynamisch zu ermitteln und als Reaktion darauf das Layout zu ändern. Ein Beispiel zur Vorgehensweise finden Sie im Abschnitt Adaptive UI im Thema mit der Bookstore2-Fallstudie.You can use the adaptive Visual State Manager feature to dynamically detect window size and to change layout in response, and an example of how to do that is shown in the section Adaptive UI in the Bookstore2 case study topic.

Behandeln der Schaltfläche „Zurück“Back button handling

Bei universellen 8,1-apps haben Windows-Runtime 8. x-apps und Windows Phone Store-Apps verschiedene Ansätze für die Benutzeroberfläche, die Sie anzeigen, und die Ereignisse, die Sie für die Schaltfläche "zurück" behandeln.For Universal 8.1 apps, Windows Runtime 8.x apps and Windows Phone Store apps have different approaches to the UI you show and the events you handle for the back button. Für Windows 10-Apps können Sie jedoch einen einzelnen Ansatz in Ihrer APP verwenden.But, for Windows 10 apps, you can use a single approach in your app. Auf mobilen Geräten wird die Schaltfläche für Sie als kapazitive Schaltfläche auf dem Gerät oder als Schaltfläche in der Shell bereitgestellt.On mobile devices, the button is provided for you as a capacitive button on the device, or as a button in the shell. Auf einem Desktopgerät fügen Sie den Chromelementen der App eine Schaltfläche hinzu, wenn die Rückwärtsnavigation in der App möglich ist. Sie wird für Apps mit Fenstern in der Titelleiste und im Tabletmodus in der Taskleiste angezeigt.On a desktop device, you add a button to your app's chrome whenever back-navigation is possible within the app, and this appears in the title bar for windowed apps or in the task bar for Tablet mode. Das Ereignis der Schaltfläche „Zurück“ ist ein universelles Konzept, das für alle Gerätefamilien gilt. Für Schaltflächen, die in Hardware oder Software implementiert werden, wird das gleiche BackRequested-Ereignis ausgelöst.The back button event is a universal concept across all device families, and buttons implemented in hardware or in software raise the same BackRequested event.

Das Beispiel unten funktioniert für alle Gerätefamilien und eignet sich gut für Fälle, in denen für alle Seiten die gleiche Verarbeitung gilt und in denen während der Navigation keine Bestätigung erforderlich ist (z. B. bei einer Warnung vor ungespeicherten Änderungen).The example below works for all device families and it is good for cases where the same processing applies to all pages, and where you do not need to confirm navigation (for example, to warn about unsaved changes).

   // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

Es gibt auch einen einheitlichen Ansatz zum programmgesteuerten Beenden der App für alle Gerätefamilien.There's also a single approach for all device families for programmatically exiting the app.

   Windows.UI.Xaml.Application.Current.Exit();

CharmsCharms

Sie müssen keinen Code ändern, der in Charms integriert ist, aber Sie müssen Ihrer APP einige Benutzeroberflächen hinzufügen, um den Platz der Charms-Leiste zu erreichen, die kein Bestandteil der Windows 10-Shell ist.You don't need to change any of your code that integrates with charms, but you do need to add some UI to your app to take the place of the Charms bar, which is not a part of the Windows 10 shell. Eine universelle 8,1-APP, die unter Windows 10 ausgeführt wird, verfügt über eine eigene Benutzeroberfläche für die Ersetzung, die vom System gerenderten Chrome in der TitelleisteA Universal 8.1 app running on Windows 10 has its own replacement UI provided by system-rendered chrome in the app's title bar.

Steuerelemente und Steuerelementstile/-vorlagenControls, and control styles and templates

Eine universelle 8,1-APP, die unter Windows 10 ausgeführt wird, behält das Aussehen und Verhalten von 8,1 in Bezug auf Steuerelemente bei.A Universal 8.1 app running on Windows 10 will retain the 8.1 appearance and behavior with respect to controls. Wenn Sie diese APP jedoch in eine Windows 10-App portieren, gibt es einige Unterschiede in der Darstellung und dem Verhalten, die Sie kennen sollten.But, when you port that app to a Windows 10 app, there are some differences in appearance and behavior to be aware of. Die Architektur und der Entwurf von Steuerelementen sind für Windows 10-apps im Wesentlichen unverändert, sodass sich die Änderungen größtenteils auf die Entwurfs Sprache, die Vereinfachung und die Verbesserungen bei der Benutzerfreundlichkeit erstThe architecture and design of controls is essentially unchanged for Windows 10 apps, so the changes are mostly around the design language, simplification, and usability improvements.

Beachten Sie   der visuelle Zustand "pointerover" in benutzerdefinierten Stilen/Vorlagen in Windows 10-apps und Windows-Runtime 8. x-apps, aber nicht in Windows Phone Store-Apps relevant ist.Note   The PointerOver visual state is relevant in custom styles/templates in Windows 10 apps and in Windows Runtime 8.x apps, but not in Windows Phone Store apps. Aus diesem Grund (und aufgrund der Systemressourcen Schlüssel, die für Windows 10-apps unterstützt werden) empfiehlt es sich, die benutzerdefinierten Stile/Vorlagen aus Ihren Windows-Runtime 8. x-apps erneut zu verwenden, wenn Sie Ihre APP auf Windows 10 portieren.For this reason (and because of the system resource keys that are supported for Windows 10 apps), we recommend that you re-use the custom styles/templates from your Windows Runtime 8.x apps when you're porting your app to Windows 10. Wenn Sie sicher sein möchten, dass Ihre benutzerdefinierten Stile/Vorlagen den aktuellen Satz von visuellen Zuständen verwenden und von Leistungsverbesserungen profitieren, die an den Standard Stilen/-Vorlagen vorgenommen werden, bearbeiten Sie eine Kopie der neuen Windows 10-Standardvorlage, und wenden Sie Ihre Anpassung erneut an.If you want to be certain that your custom styles/templates are using the latest set of visual states, and are benefitting from performance improvements made to the default styles/templates, then edit a copy of the new Windows 10 default template and re-apply your customization to that. Ein Beispiel für eine Leistungsverbesserung besteht darin, dass alle Border-Elemente, die ein ContentPresenter- Element oder Panel-Element bisher eingeschlossen haben, entfernt wurden. Der Rahmen wird jetzt von einem untergeordneten Element gerendert.One example of a performance improvement is that any Border that formerly enclosed a ContentPresenter or a Panel has been removed and a child element now renders the border.

Unten sind einige speziellere Beispiele für Änderungen an Steuerelementen angegeben.Here are some more specific examples of changes to controls.

Name des SteuerelementsControl name ÄnderungChange
AppBarAppBar Wenn Sie das appbar -Steuerelement verwenden (Stattdessen wird dieBefehlsleiste empfohlen), wird es in einer Windows 10-APP nicht standardmäßig ausgeblendet.If you are using the AppBar control (CommandBar is recommended instead), then it is not hidden by default in a Windows 10 app. Sie können dies mit der AppBar.ClosedDisplayMode-Eigenschaft steuern.You can control this with the AppBar.ClosedDisplayMode property.
AppBar, CommandBarAppBar, CommandBar In einer Windows 10-APP haben appbar und CommandBar eine Schaltfläche Weitere anzeigen (die Auslassungs Punkte).In a Windows 10 app, AppBar and CommandBar have a See more button (the ellipsis).
CommandBarCommandBar In einer Windows-Runtime 8. x-APP sind die sekundären Befehle einer Befehlsleiste immer sichtbar.In a Windows Runtime 8.x app, the secondary commands of a CommandBar are always visible. In einer Windows Phone Store-App und in einer Windows 10-APP wird der erst angezeigt, wenn die Befehlsleiste geöffnet wird.In a Windows Phone Store app, and in a Windows 10 app, the don't appear until the command bar opens.
CommandBarCommandBar Bei einer Windows Phone Store-App hat der Wert von CommandBar.IsSticky keinen Einfluss darauf, ob die Leiste einfach ausgeblendet werden kann.For a Windows Phone Store app, the value of CommandBar.IsSticky does not affect whether or not the bar is light-dismissible. Wenn iskurzfür eine Windows 10-App auf "true" festgelegt ist, ignoriert die Befehlsleiste eine Bewegung mit dem Licht "Light".For a Windows 10 app, if IsSticky is set to true, then the CommandBar disregards a light dismiss gesture.
CommandBarCommandBar In einer Windows 10-App behandelt die Befehlsleiste die Ereignisse edgegesture. abgeschlossen und UIElement. righttippt nicht.In a Windows 10 app, CommandBar does not handle the EdgeGesture.Completed nor UIElement.RightTapped events. Außerdem wird nicht auf ein Tippen oder das Wischen nach oben reagiert.Nor does it respond to a tap nor a swipe up. Sie haben dennoch die Möglichkeit, diese Ereignisse zu behandeln und IsOpen festzulegen.You still have the option to handle these events and set IsOpen.
DatePicker, timePickerDatePicker, TimePicker Überprüfen Sie, wie Ihre App mit den visuellen Änderungen an DatePicker und TimePicker aussieht.Review how your app looks with the visual changes to DatePicker and TimePicker. Für eine Windows 10-APP, die auf einem mobilen Gerät ausgeführt wird, navigieren diese Steuerelemente nicht mehr zu einer Auswahl Seite, sondern verwenden stattdessen ein leicht zu verwendende Popup-Popup.For a Windows 10 app running on a mobile device, these controls no longer navigate to a selection page but instead use a light-dismissible popup.
DatePicker, timePickerDatePicker, TimePicker In einer Windows 10-App können Sie DatePicker oder timePicker nicht in einen Ablaufbetrieb einfügen. Wenn Sie möchten, dass diese Steuerelemente in einem Popup-Steuerelement angezeigt werden, können Sie datepickerflyout und timepickerflyoutverwenden.In a Windows 10 app, you can't put DatePicker or TimePicker inside a fly-out. If you want those controls to be displayed in a popup-type control, then you can use DatePickerFlyout and TimePickerFlyout.
GridView, ListViewGridView, ListView Informationen zu GridView/ListView finden Sie unter GridView-/ListView-Änderungen.For GridView/ListView, see GridView and ListView changes.
SKHub In einer Windows Phone Store-App wird ein Hub-Steuerelement vom letzten Abschnitt in den ersten Abschnitt umgebrochen.In a Windows Phone Store app, a Hub control wraps around from the last section to the first. In einer Windows-Runtime 8. x-APP und in einer Windows 10-App werden die Hub-Abschnitte nicht umschlossen.In a Windows Runtime 8.x app, and in a Windows 10 app, hub sections do not wrap around.
SKHub In einer Windows Phone Store-App wird das Hintergrundbild eines Hub-Steuerelements im Parallaxmodus relativ zu den Hubabschnitten verschoben.In a Windows Phone Store app, a Hub control's background image moves in parallax relative to the hub sections. In einer Windows-Runtime 8. x-APP und in einer Windows 10-APP wird "Parser" nicht verwendet.In a Windows Runtime 8.x app, and in a Windows 10 app, parallax is not used.
SKHub In einer universellen 8.1-App bewirkt die HubSection.IsHeaderInteractive-Eigenschaft, dass die Abschnittsüberschrift – und eine daneben gerenderte Chevronglyphe – interaktiv werden.In a Universal 8.1 app, the HubSection.IsHeaderInteractive property causes the section header—and a chevron glyph rendered next to it—to become interactive. In einer Windows 10-App gibt es einen interaktiven "See more"-aktiveren neben dem Header, aber der Header selbst ist nicht interaktiv.In a Windows 10 app, there is an interactive "See more" affordance beside the header, but the header itself is not interactive. Mit IsHeaderInteractive wird weiterhin bestimmt, ob eine Interaktion das Hub.SectionHeaderClick-Ereignis auslöst.IsHeaderInteractive still determines whether interaction raises the Hub.SectionHeaderClick event.
MessageDialogMessageDialog Wenn Sie MessageDialog verwenden, sollten Sie stattdessen ggf. das flexiblere ContentDialog-Element nutzen.If you're using MessageDialog, then consider instead using the more flexible ContentDialog. Informationen hierzu erhalten Sie auch im Beispiel XAML-UI-Grundlagen.Also, see the XAML UI Basics sample.
ListPickerFlyout, PickerFlyoutListPickerFlyout, PickerFlyout Listpickerflyout und pickerflyout sind für eine Windows 10-App veraltet.ListPickerFlyout and PickerFlyout are deprecated for a Windows 10 app. Verwenden Sie für ein einzelnes Auswahlflyout das MenuFlyout-Element und bei komplexeren Oberflächen das Flyout-Element.For a single selection fly-out, use MenuFlyout; for more complex experiences, use Flyout.
PasswordBoxPasswordBox Die PasswordBox. ispasswordrevealbuttonaktivierte Eigenschaft ist in einer Windows 10-App veraltet, und die Einstellung hat keine Auswirkungen.The PasswordBox.IsPasswordRevealButtonEnabled property is deprecated in a Windows 10 app, and setting it has no effect. Verwenden Sie stattdessen PasswordBox. passwordrevealmode , das standardmäßig Peek ist (in dem ein Eye-Symbol angezeigt wird, z. b. in einer Windows-Runtime 8. x-APP).Use PasswordBox.PasswordRevealMode instead, which defaults to Peek (in which an eye glyph is displayed, like in a Windows Runtime 8.x app). Weitere Informationen finden Sie unter Richtlinien für Kennwortfelder.Also, see Guidelines for password boxes.
PivotPivot Das Pivot-Steuerelement ist jetzt universell. Das heißt, seine Verwendung ist nicht mehr nur auf mobile Geräte beschränkt.The Pivot control is now universal, it is no longer limited to use on mobile devices.
SearchBoxSearchBox Obwohl SearchBox in der universellen Gerätefamilie implementiert ist, ist es auf mobilen Geräten nicht voll funktionsfähig.Although SearchBox is implemented in the Universal device family, it is not fully functional on mobile devices. Weitere Informationen finden Sie unter SearchBox eingestellt zugunsten von AutoSuggestBox.See SearchBox deprecated in favor of AutoSuggestBox.
SemanticZoomSemanticZoom Informationen zu SemanticZoom finden Sie unter Änderungen an „SemanticZoom“.For SemanticZoom, see SemanticZoom changes.
ScrollViewerScrollViewer Einige Standardeigenschaften von ScrollViewer haben sich geändert.Some default properties of ScrollViewer have changed. Horizontalscrollmode ist Auto, verticalscrollmode ist Auto, und ZoomMode ist deaktiviert.HorizontalScrollMode is Auto, VerticalScrollMode is Auto, and ZoomMode is Disabled. Wenn die neuen Standardwerte für Ihre App nicht geeignet sind, können Sie sie entweder in einem Stil oder als lokale Werte für das Steuerelement selbst ändern.If the new default values are not appropriate for your app, then you can change them either in a style or as local values on the control itself.
TextfeldTextBox In einer Windows-Runtime 8. x-APP ist die Rechtschreibprüfung für ein Textfeldstandardmäßig deaktiviert.In a Windows Runtime 8.x app, spell-checking is off by default for a TextBox. In einer Windows Phone Store-App und in einer Windows 10-APP ist Sie standardmäßig aktiviert.In a Windows Phone Store app, and in a Windows 10 app, it is on by default.
TextfeldTextBox Die Standardschriftgröße für ein TextBox-Element hat sich von 11 in 15 geändert.The default font size for a TextBox has changed from 11 to 15.
TextfeldTextBox Der Standardwert von TextBox.TextReadingOrder wurde von Default in DetectFromContent geändert.The default value of TextBox.TextReadingOrder has changed from Default to DetectFromContent. Falls Sie dies nicht wünschen, können Sie UseFlowDirection verwenden.If that's undesirable, then use UseFlowDirection. Default ist überholt.Default is deprecated.
VerschiedeneVarious Die Akzentfarbe gilt für eine Windows Phone Store-Apps und für Windows 10-apps, aber nicht für die Windows-Runtime von 8. x-apps.Accent color applies to a Windows Phone Store apps, and to Windows 10 apps, but not to Windows Runtime 8.x apps.

Weitere Informationen zu Steuerelementen für UWP-Apps finden Sie unter Steuerelemente nach Funktion, Liste der Steuerelemente und Richtlinien für Steuerelemente.For more info on UWP app controls, see Controls by function, Controls list, and Guidelines for controls.

Entwurfs Sprache in Windows 10Design language in Windows 10

Es gibt einige kleine, aber wichtige Unterschiede in der Entwurfs Sprache zwischen universellen 8,1-apps und Windows 10-apps.There are some small but important differences in design language between Universal 8.1 apps and Windows 10 apps. Alle Details finden Sie unter Design.For all the details, see Design. Trotz der Änderungen bei der Entwurfssprache gelten nach wie vor dieselben Designprinzipien: Gestalten Sie Ihre App mit Liebe zum Detail, versuchen Sie aber, alles möglichst einfach zu halten, indem Sie sich auf den Inhalt, nicht auf das Chrom konzentrieren, visuelle Elemente weitgehend reduzieren und für die digitale Welt authentisch bleiben. Nutzen Sie insbesondere bei der Typografie eine visuelle Hierarchie. Entwerfen Sie Ihre App basierend auf einem Raster, und erwecken Sie Ihre Benutzeroberflächen mit flüssigen Animationen zum Leben.Despite the design language changes, our design principles remain consistent: be attentive to detail but always strive for simplicity through focusing on content not chrome, fiercely reducing visual elements, and remaining authentic to the digital domain; use visual hierarchy especially with typography; design on a grid; and bring your experiences to life with fluid animations.

Effektive Pixel, Abstand zum Bildschirm und SkalierungsfaktorenEffective pixels, viewing distance, and scale factors

Bisher wurden Anzeigepixel zum Abstrahieren der Größe und des Layouts von UI-Elementen von der tatsächlichen physischen Größe und Auflösung von Geräten verwendet.Previously, view pixels were the way to abstract the size and layout of UI elements away from the actual physical size and resolution of devices. Anzeigepixel wurden zu effektiven Pixeln weiterentwickelt, und hier finden Sie eine Erklärung dieses Begriffs sowie Informationen zum zusätzlichen Wert.View pixels have now evolved into effective pixels, and here's an explanation of that term, what it means, and the extra value it offers.

Der Begriff „Auflösung“ bezeichnet ein Maß für die Pixeldichte und nicht wie allgemein angenommen für die Pixelanzahl.The term "resolution" refers to a measure of pixel density and not, as is commonly thought, pixel count. Die „effektive Auflösung“ ist die Art und Weise, wie die physischen Pixel, aus denen sich ein Bild oder eine Glyphe zusammensetzt, je nach Abstand zum Bildschirm und physischer Pixelgröße des Geräts für das Auge des Betrachters aufgelöst werden (die Pixeldichte ist der Kehrwert der physischen Pixelgröße)."Effective resolution" is the way the physical pixels that compose an image or glyph resolve to the eye given differences in viewing distance and the physical pixel size of the device (pixel density being the reciprocal of physical pixel size). Die effektive Auflösung ist benutzerorientiert und somit eine gute Metrik für die Erstellung einer Benutzeroberfläche.Effective resolution is a good metric to build an experience around because it is user-centric. Wenn Sie diese Faktoren verstehen und die Größe von UI-Elementen entsprechend steuern, können Sie eine optimale Benutzerfreundlichkeit erreichen.By understanding all the factors, and controlling the size of UI elements, you can make the user's experience a good one.

Unterschiedliche Geräte besitzen eine unterschiedliche effektive Breite (angegeben in der Anzahl von Pixeln) – von 320 Epx bei besonders kleinen Geräten bis hin zu 1024 Epx bei Monitoren mittlerer Größe (und weit darüber hinaus für eine noch größere Breite).Different devices are a different number of effective pixels wide, ranging from 320 epx for the smallest devices, to 1024 epx for a modest-sized monitor, and far beyond to much higher widths. Sie müssen lediglich weiterhin Elemente mit automatischer Größenanpassung und dynamische Layoutbereiche verwenden.All you have to do is continue to use auto-sized elements and dynamic layout panels as you always have. Im bestimmten Fällen werden die Eigenschaften der UI-Elemente im XAML-Markup auf eine feste Größe festgelegt.There will also be some cases where you'll set the properties of your UI elements to a fixed size in XAML markup. Auf Ihre App wird abhängig davon, auf welchem Gerät sie ausgeführt wird und welche Anzeigeeinstellungen der Benutzer festgelegt hat, automatisch ein Skalierungsfaktor angewendet.A scale factor is automatically applied to your app depending on what device it runs on and the display settings made by the user. Dieser Skalierungsfaktor bewirkt, dass UI-Elemente mit fester Größe trotz unterschiedlicher Bildschirmgröße als Touchziel (und Leseziel) mit mehr oder weniger konstanter Größe angezeigt werden.And that scale factor serves to keep any UI element with a fixed size presenting a more-or-less constant-sized touch (and reading) target to the user across a wide variety of screen sizes. In Kombination mit dem dynamischen Layout wird Ihre Benutzeroberfläche nicht nur auf verschiedenen Geräten optisch skaliert,And together with dynamic layout, your UI won't merely optically scale on different devices. auch die Inhaltsmenge wird an den verfügbaren Platz angepasst.It will instead do what's necessary to fit the appropriate amount of content into the available space.

Damit Ihre App auf allen Displays optimal funktioniert, empfiehlt es sich, die einzelnen Bitmap-Ressourcen in verschiedenen Größen zu erstellen, die jeweils für einen bestimmten Skalierungsfaktor geeignet sind.So that your app has the best experience across all displays, we recommend that you create each bitmap asset in a range of sizes, each suitable for a particular scale factor. Durch die Bereitstellung von Ressourcen mit einer Skalierung von 100 %, 200 % und 400 % (in dieser Prioritätsreihenfolge) erhalten Sie in den meisten Fällen auch bei allen Skalierungsfaktoren dazwischen hervorragende Ergebnisse.Providing assets at 100%-scale, 200%-scale, and 400%-scale (in that priority order) will give you excellent results in most cases at all the intermediate scale factors.

Beachten Sie  Wenn Sie aus irgendeinem Grund Assets nicht in mehr als einer Größe erstellen können, und erstellen Sie dann 100% große Ressourcen.Note  If, for whatever reason, you cannot create assets in more than one size, then create 100%-scale assets. In Microsoft Visual Studio bietet die Standardprojektvorlage für UWP-Apps Brandingressourcen (Bilder für Kacheln und Logos) in nur einer Größe, jedoch nicht mit einer Skalierung von 100 %.In Microsoft Visual Studio, the default project template for UWP apps provides branding assets (tile images and logos) in only one size, but they are not 100%-scale. Befolgen Sie bei der Erstellung von Ressourcen für Ihre eigene App die Informationen in diesem Abschnitt, stellen Sie die Ressourcen mit einer Skalierung von 100 %, 200 % und 400 % bereit, und verwenden Sie Ressourcenpakete.When authoring assets for your own app, follow the guidance in this section and provide 100%, 200%, and 400% sizes, and use asset packs.

Falls Sie komplexe Grafiken verwenden, sollten Sie mehr Skalierungen bereitstellen.If you have intricate artwork, then you may want to provide your assets in even more sizes. Wenn Sie mit Vektorgrafiken beginnen, ist es relativ einfach, qualitativ hochwertige Ressourcen für beliebige Skalierungsfaktoren zu generieren.If you're starting with vector art, then it's relatively easy to generate high-quality assets at any scale factor.

Es wird nicht empfohlen, dass Sie versuchen, alle Skalierungsfaktoren zu unterstützen, aber die vollständige Liste der Skalierungsfaktoren für Windows 10-apps beträgt 100%, 125%, 150%, 200%, 250%, 300% und 400%.We don't recommend that you try to support all of the scale factors, but the full list of scale factors for Windows 10 apps is 100%, 125%, 150%, 200%, 250%, 300%, and 400%. Wenn Sie sie bereitstellen, wählt der Store für jedes Gerät die Ressourcen mit der passenden Größe aus, und es werden nur diese Ressourcen heruntergeladen.If you provide them, the Store will pick the correct-sized asset(s) for each device, and only those assets will be downloaded. Die Auswahl der herunterzuladenden Ressourcen erfolgt auf Grundlage des DPI-Werts eines Geräts.The Store selects the assets to download based on the DPI of the device. Sie können Ressourcen aus Ihrer Windows-Runtime 8. x-APP mit Skalierungsfaktoren wie 140% und 220% wieder verwenden, aber Ihre APP wird mit einem der neuen Skalierungsfaktoren ausgeführt, sodass einige bitmapskalierungen unvermeidlich sind.You can re-use assets from your Windows Runtime 8.x app at scale factors such as 140% and 220%, but your app will run at one of the new scale factors and so some bitmap scaling will be unavoidable. Testen Sie Ihre App auf verschiedenen Geräten, um jeweils zu überprüfen, ob ein zufriedenstellendes Ergebnis erzielt wird.Test your app on a range of devices to see whether you're happy with the results in your case.

Möglicherweise verwenden Sie XAML-Markup aus einer Windows-Runtime 8. x-APP, bei der literaldimensionswerte im Markup verwendet werden (vielleicht zum Anpassen von Formen oder anderen Elementen, vielleicht für typografiezeichen).You may be re-using XAML markup from a Windows Runtime 8.x app where literal dimension values are used in the markup (perhaps to size shapes or other elements, perhaps for typography). In einigen Fällen wird jedoch ein größerer Skalierungsfaktor für eine Windows 10-App auf einem Gerät verwendet, als bei einer universellen 8,1-app (150% wird z. b. verwendet, wobei 140% war, und 200% wird verwendet, wobei 180% war).But, in some cases, a larger scale factor is used on a device for a Windows 10 app than for a Universal 8.1 app (for example, 150% is used where 140% was before, and 200% is used where 180% was). Wenn Sie also feststellen, dass diese Literalwerte unter Windows 10 jetzt zu groß sind, Multiplizieren Sie Sie mit 0,8.So, if you find that these literal values are now too big on Windows 10, then try multiplying them by 0.8. Weitere Informationen finden Sie unter Reaktionsfähiges Design – Grundlagen für UWP-Apps.For more info, see Responsive design 101 for UWP apps.

GridView-/ListView-ÄnderungenGridView and ListView changes

An den Standardstilsettern für GridView wurden verschiedene Änderungen vorgenommen, damit der Bildlauf des Steuerelements vertikal verläuft (anstatt wie bisher standardmäßig horizontal).Several changes have been made to the default style setters for GridView to make the control scroll vertically (instead of horizontally, as it did previously by default). Wenn Sie in Ihrem Projekt eine Kopie des Standardstils bearbeitet haben, enthält Ihre Kopie diese Änderungen nicht. Sie müssen sie daher manuell vornehmen.If you edited a copy of the default style in your project, then your copy won't have these changes, so you'll need to make them manually. Nachfolgend finden Sie eine Liste der Änderungen:Here is a list of the changes.

Falls Ihnen die letzte Änderung (die Änderung an Orientation) widersprüchlich erscheint, beachten Sie, dass wir von einem Umbruchraster sprechen.If that last change (the change to Orientation) seems contradictory, then remember that we're talking about a wrap grid. Ein horizontal ausgerichtetes Umbruchraster (der neue Wert) ähnelt einem Schriftsystem, bei dem Text horizontal fließt und am Ende einer Seite ein Zeilenumbruch erfolgt.A horizontally-oriented wrap grid (the new value) is similar to a writing system where text flows horizontally and breaks to the next line down at the end of a page. Bei einer solchen Seite mit Text erfolgt der Bildlauf in vertikaler Richtung.A page of text like that scrolls vertically. Im Gegensatz dazu ähnelt ein vertikal ausgerichtetes Umbruchraster (der vorherige Wert) einem Schriftsystem, in dem Text vertikal fließt und daher ein horizontaler Bildlauf erfolgt.Conversely, a vertically-oriented wrap grid (the previous value) is similar to a writing system where text flows vertically and therefore scrolls horizontally.

Im folgenden finden Sie die Aspekte von GridView und ListView , die Änderungen aufweisen oder in Windows 10 nicht unterstützt werden.Here are the aspects of GridView and ListView that have change or are not supported in Windows 10.

  • Die isswipeer-aktivierte Eigenschaft (nur Windows-Runtime 8. x-Apps) wird für Windows 10-apps nicht unterstützt.The IsSwipeEnabled property (Windows Runtime 8.x apps only) is not supported for Windows 10 apps. Die API ist noch vorhanden, ihre Verwendung hat aber keine Auswirkung.The API is still present, but setting it has no effect. Mit Ausnahme von der Wischbewegung nach unten (wird nicht unterstützt, da sie den Daten zufolge nicht gefunden wird) und dem Rechtsklick (ist für die Anzeige eines Kontextmenüs reserviert) werden alle bisherigen Auswahlbewegungen unterstützt.All previous selection gestures are supported except downward swipe (which is unsupported because data shows that it is not discoverable) and right-click (which is reserved for showing a context menu).
  • Die reordermode -Eigenschaft (nur Windows Phone Store-Apps) wird für Windows 10-apps nicht unterstützt.The ReorderMode property (Windows Phone Store apps only) is not supported for Windows 10 apps. Die API ist noch vorhanden, ihre Verwendung hat aber keine Auswirkung.The API is still present, but setting it has no effect. Legen Sie stattdessen AllowDrop und CanReorderItems für Ihre GridView oder ListView auf „true” fest. Der Benutzer kann die Anordnung dann durch Drücken und Halten (oder Klicken und Ziehen) ändern.Instead, set AllowDrop and CanReorderItems to true on your GridView or ListView and then the user will be able to reorder using a press-and-hold (or click-and-drag) gesture.
  • Verwenden Sie bei der Entwicklung für Windows 10 listviewitempresenter anstelle von gridviewitempresenter in Ihrem Element Container Stil, sowohl für ListView als auch für GridView.When developing for Windows 10, use ListViewItemPresenter instead of GridViewItemPresenter in your item container style, both for ListView and for GridView. Wenn Sie eine Kopie der Standard-Elementcontainerstile bearbeiten, erhalten Sie den richtigen Typ.If you edit a copy of the default item container styles, then you will get the correct type.
  • Die visuellen Elemente der Auswahl haben sich für eine Windows 10-APP geändert.The selection visuals have changed for a Windows 10 app. Wenn Sie SelectionMode auf Multiple festlegen, wird standardmäßig für jedes Element ein Kontrollkästchen gerendert.If you set SelectionMode to Multiple, then by default, a check box is rendered for each item. Bei der Standardeinstellung für ListView-Elemente wird das Kontrollkästchen inline neben dem Element angeordnet, wodurch der vom restlichen Element belegte Platz etwas reduziert und verschoben wird.The default setting for ListView items means that the check box is laid out inline beside the item, and as a result, the space occupied by the rest of the item will be slightly reduced and shifted. Bei GridView-Elementen überlagert das Kontrollkästchen standardmäßig das Element.For GridView items, the check box is overlaid on top of the item by default. In beiden Fällen können Sie jedoch wie im folgenden Beispiel gezeigt in Ihrem Elementcontainerstil das Layout (Inline oder Überlagerung) der Kontrollkästchen (mit der CheckMode-Eigenschaft) steuern und (mit der SelectionCheckMarkVisualEnabled-Eigenschaft) festlegen, ob sie überhaupt für das ListViewItemPresenter-Element angezeigt werden.But, in either case, you can control the layout (Inline or Overlay) of the check boxes (with the CheckMode property) and whether they are shown at all (with the SelectionCheckMarkVisualEnabled property) on the ListViewItemPresenter element inside your item container style as in the example below.
  • In Windows 10 wird das containercontentchanging -Ereignis bei der benutzeroberflächenvirtualisierung zweimal pro Element ausgelöst: einmal für den erneuten Gebrauch und einmal für die erneute Verwendung.In Windows 10, the ContainerContentChanging event is raised twice per item during UI virtualization: once for the reclaim, and once for the re-use. Wenn der Wert der InRecycleQueue gleich true ist und Sie keine spezielle Freigabe vornehmen müssen, können Sie Ihren Ereignishandler sofort mit der Gewissheit beenden, dass er erneut aktiviert wird, wenn das gleiche Element wiederverwendet wird (dabei lautet InRecycleQueue dann false).If the value of InRecycleQueue is true and you have no special reclaim work to do, then you can exit your event handler immediately with the assurance that it will be re-entered when that same item is re-used (at which time InRecycleQueue will be false).
<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

ListViewItemPresenter-Element mit Inlinekontrollkästchen

ListViewItemPresenter-Element mit InlinekontrollkästchenA ListViewItemPresenter with inline check box

ListViewItemPresenter-Element mit überlagertem Kontrollkästchen

ListViewItemPresenter-Element mit überlagertem KontrollkästchenA ListViewItemPresenter with an overlaid check box

In der folgenden Tabelle werden die Änderungen an den visuellen Zuständen und Gruppen visueller Zustände in der ListViewItem-Steuerelementvorlage und der GridViewItem-Steuerelementvorlage beschrieben.This table describes the changes to the visual states and visual state groups in the ListViewItem and GridViewItem control templates.

8.18.1 Windows-10Windows 10
CommonStatesCommonStates CommonStatesCommonStates
NormalNormal NormalNormal
PointerOverPointerOver PointerOverPointerOver
GedrücktPressed GedrücktPressed
PointerOverPressedPointerOverPressed [nicht verfügbar][unavailable]
DeaktiviertDisabled [nicht verfügbar][unavailable]
[nicht verfügbar][unavailable] PointerOverSelectedPointerOverSelected
[nicht verfügbar][unavailable] AusgewähltSelected
[nicht verfügbar][unavailable] PressedSelectedPressedSelected
[nicht verfügbar][unavailable] DisabledStatesDisabledStates
[nicht verfügbar][unavailable] DeaktiviertDisabled
[nicht verfügbar][unavailable] AktiviertEnabled
SelectionHintStatesSelectionHintStates [nicht verfügbar][unavailable]
VerticalSelectionHintVerticalSelectionHint [nicht verfügbar][unavailable]
HorizontalSelectionHintHorizontalSelectionHint [nicht verfügbar][unavailable]
NoSelectionHintNoSelectionHint [nicht verfügbar][unavailable]
[nicht verfügbar][unavailable] MultiSelectStatesMultiSelectStates
[nicht verfügbar][unavailable] MultiSelectDisabledMultiSelectDisabled
[nicht verfügbar][unavailable] MultiSelectEnabledMultiSelectEnabled
SelectionStatesSelectionStates [nicht verfügbar][unavailable]
UnselectingUnselecting [nicht verfügbar][unavailable]
UnselectedUnselected [nicht verfügbar][unavailable]
UnselectedPointerOverUnselectedPointerOver [nicht verfügbar][unavailable]
UnselectedSwipingUnselectedSwiping [nicht verfügbar][unavailable]
SelectingSelecting [nicht verfügbar][unavailable]
AusgewähltSelected [nicht verfügbar][unavailable]
SelectedSwipingSelectedSwiping [nicht verfügbar][unavailable]
SelectedUnfocusedSelectedUnfocused [nicht verfügbar][unavailable]

Wenn Sie über eine benutzerdefinierte ListViewItem-Steuerelementvorlage oder GridViewItem-Steuerelementvorlage verfügen, überprüfen Sie sie im Hinblick auf die oben genannten Änderungen.If you have a custom ListViewItem or GridViewItem control template, then review it in light of the above changes. Wir empfehlen, eine Kopie der neuen Standardvorlage zu bearbeiten und Ihre Anpassungen erneut auf diese Kopie anzuwenden.We recommend that you start over by editing a copy of the new default template and re-applying your customization to that. Wenn dies aus irgendeinem Grund nicht möglich ist und Sie Ihre vorhandene Vorlage bearbeiten müssen, können Sie nach den folgenden allgemeinen Richtlinien vorgehen.If, for whatever reason, you can't do that and you need to edit your existing template, then here is some general guidance around how you might go about doing that.

  • Fügen Sie die neue Gruppe visueller Zustände „MultiSelectStates” hinzu.Add the new MultiSelectStates visual state group.
  • Fügen Sie den neuen visuellen Zustand „MultiSelectDisabled” hinzu.Add the new MultiSelectDisabled visual state.
  • Fügen Sie den neuen visuellen Zustand „MultiSelectEnabled” hinzu.Add the new MultiSelectEnabled visual state.
  • Fügen Sie die neue Gruppe visueller Zustände „DisabledStates” hinzu.Add the new DisabledStates visual state group.
  • Fügen Sie den neuen visuellen Zustand „Enabled” hinzu.Add the new Enabled visual state.
  • Entfernen Sie in der Gruppe visueller Zustände „CommonStates” den visuellen Zustand „PointerOverPressed”.In the CommonStates visual state group, remove the PointerOverPressed visual state.
  • Verschieben den visuellen Zustand „Disabled” in die Gruppe visueller Zustände „DisabledStates”.Move the Disabled visual state to the DisabledStates visual state group.
  • Fügen Sie den neuen visuellen Zustand „PointerOverSelected” hinzu.Add the new PointerOverSelected visual state.
  • Fügen Sie den neuen visuellen Zustand „PressedSelected” hinzu.Add the new PressedSelected visual state.
  • Entfernen Sie die Gruppe visueller Zustände „SelectedHintStates”.Remove the SelectedHintStates visual state group.
  • Verschieben Sie in der Gruppe visueller Zustände „SelectionStates” den visuellen Zustand „Selected” in die Gruppe visueller Zustände „CommonStates”.In the SelectionStates visual state group, move the Selected visual state to the CommonStates visual state group.
  • Entfernen Sie die gesamte Gruppe visueller Zustände „SelectionStates”.Remove the entire SelectionStates visual state group.

Lokalisierung und GlobalisierungLocalization and globalization

Die Dateien vom Typ „Resources.resw“ aus Ihrem universellen 8.1-Projekt können in Ihrem UWP-App-Projekt wiederverwendet werden.You can re-use the Resources.resw files from your Universal 8.1 project in your UWP app project. Fügen Sie die kopierte Datei dem Projekt hinzu, und legen Sie Buildvorgang auf PRIResource und In Ausgabeverzeichnis kopieren auf Nicht kopieren fest.After copying the file over, add it to the project and set Build Action to PRIResource and Copy to Output Directory to Do not copy. Im Thema ResourceContext.QualifierValues wird beschrieben, wie Sie gerätefamilienspezifische Ressourcen auf der Grundlage des Ressourcenauswahlfaktors für die Gerätefamilie laden.The ResourceContext.QualifierValues topic describes how to load device family-specific resources based on the device family resource selection factor.

Wiedergeben aufPlay To

Die APIs im Windows. Media. playto -Namespace sind für Windows 10-apps veraltet und bevorzugen die Windows. Media. Casting -APIs.The APIs in the Windows.Media.PlayTo namespace are deprecated for Windows 10 apps in favor of the Windows.Media.Casting APIs.

Ressourcenschlüssel und Größen von TextBlock-StilenResource keys, and TextBlock style sizes

Die Entwurfs Sprache wurde für Windows 10 entwickelt, und folglich haben sich bestimmte System Stile geändert.The design language has evolved for Windows 10 and consequently certain system styles have changed. In einigen Fällen empfiehlt sich die Überarbeitung des visuellen Designs Ihrer Ansichten, damit sie mit den geänderten Stileigenschaften in Einklang stehen.In some cases, you will want to revisit the visual designs of your views so that they are in harmony with the style properties that have changed.

In anderen Fällen werden die Ressourcenschlüssel nicht mehr unterstützt.In other cases, resource keys are no longer supported. Der XAML-Markup-Editor in Visual Studio hebt Verweise auf Ressourcenschlüssel hervor, die nicht aufgelöst werden können.The XAML markup editor in Visual Studio highlights references to resource keys that can't be resolved. Der XAML-Markup-Editor unterstreicht z. B. einen Verweis auf den Stilschlüssel ListViewItemTextBlockStyle mit einer roten Wellenlinie.For example, the XAML markup editor will underline a reference to the style key ListViewItemTextBlockStyle with a red squiggle. Wird dieser Fehler nicht behoben, wird die App sofort beendet, wenn Sie versuchen, sie im Emulator oder auf dem Gerät bereitzustellen.If that isn't corrected, then the app will immediately terminate when you try to deploy it to the emulator or device. Daher ist es wichtig, die Richtigkeit des XAML-Markups sicherzustellen.So, it's important to attend to XAML markup correctness. Sie werden feststellen, dass sich solche Fehler mit Visual Studio hervorragend abfangen lassen.And you will find Visual Studio to be a great tool for catching such issues.

Für weiterhin unterstützte Schlüssel bedeuten Änderungen der Entwurfssprache, dass sich die Eigenschaften geändert haben, die von einigen Stilen festgelegt werden.For keys that are still supported, changes in design language mean that properties set by some styles have changed. Beispielsweise legt TitleTextBlockStyle FontSize in einer Windows-Runtime 8. x-APP und 18.14 px in einer Windows Phone Store-App auf 14.667 px fest.For example, TitleTextBlockStyle sets FontSize to 14.667px in a Windows Runtime 8.x app and 18.14px in a Windows Phone Store app. Aber im gleichen Stil wird FontSize auf eine viel größere Zahl von rund um die Uhr in einer Windows 10-App festgelegt.But, the same style sets FontSize to a much larger 24px in a Windows 10 app. Überprüfen Sie Ihre Entwürfe und Layouts, und verwenden Sie die passenden Stile an den richtigen Stellen.Review your designs and layouts and use the appropriate styles in the right places. Weitere Informationen finden Sie unter Richtlinien für Schriftarten und Entwerfen von UWP-Apps.For more info, see Guidelines for fonts and Design UWP apps.

Im Anschluss finden Sie die vollständige Liste der nicht mehr unterstützten Schlüssel.This is a full list of the keys that are no longer supported.

  • CheckBoxAndRadioButtonMinWidthSizeCheckBoxAndRadioButtonMinWidthSize
  • CheckBoxAndRadioButtonTextPaddingThicknessCheckBoxAndRadioButtonTextPaddingThickness
  • ComboBoxFlyoutListPlaceholderTextOpacityComboBoxFlyoutListPlaceholderTextOpacity
  • ComboBoxFlyoutListPlaceholderTextThemeMarginComboBoxFlyoutListPlaceholderTextThemeMargin
  • ComboBoxHighlightedBackgroundThemeBrushComboBoxHighlightedBackgroundThemeBrush
  • ComboBoxHighlightedBorderThemeBrushComboBoxHighlightedBorderThemeBrush
  • ComboBoxHighlightedForegroundThemeBrushComboBoxHighlightedForegroundThemeBrush
  • ComboBoxInlinePlaceholderTextForegroundThemeBrushComboBoxInlinePlaceholderTextForegroundThemeBrush
  • ComboBoxInlinePlaceholderTextThemeFontWeightComboBoxInlinePlaceholderTextThemeFontWeight
  • ComboBoxItemDisabledThemeOpacityComboBoxItemDisabledThemeOpacity
  • ComboBoxItemHighContrastBackgroundThemeMarginComboBoxItemHighContrastBackgroundThemeMargin
  • ComboBoxItemMinHeightThemeSizeComboBoxItemMinHeightThemeSize
  • ComboBoxPlaceholderTextBlockStyleComboBoxPlaceholderTextBlockStyle
  • ComboBoxPlaceholderTextThemeMarginComboBoxPlaceholderTextThemeMargin
  • CommandBarBackgroundThemeBrushCommandBarBackgroundThemeBrush
  • CommandBarForegroundThemeBrushCommandBarForegroundThemeBrush
  • ContentDialogButton1HostPaddingContentDialogButton1HostPadding
  • ContentDialogButton2HostPaddingContentDialogButton2HostPadding
  • ContentDialogButtonsMinHeightContentDialogButtonsMinHeight
  • ContentDialogContentLandscapeWidthContentDialogContentLandscapeWidth
  • ContentDialogContentMinHeightContentDialogContentMinHeight
  • ContentDialogDimmingColorContentDialogDimmingColor
  • ContentDialogTitleMinHeightContentDialogTitleMinHeight
  • ControlContextualInfoTextBlockStyleControlContextualInfoTextBlockStyle
  • ControlHeaderContentPresenterStyleControlHeaderContentPresenterStyle
  • ControlHeaderTextBlockStyleControlHeaderTextBlockStyle
  • FlyoutContentPanelLandscapeThemeMarginFlyoutContentPanelLandscapeThemeMargin
  • FlyoutContentPanelPortraitThemeMarginFlyoutContentPanelPortraitThemeMargin
  • GrabberMarginGrabberMargin
  • GridViewItemMarginGridViewItemMargin
  • GridViewItemPlaceholderBackgroundThemeBrushGridViewItemPlaceholderBackgroundThemeBrush
  • GroupHeaderTextBlockStyleGroupHeaderTextBlockStyle
  • HeaderContentPresenterStyleHeaderContentPresenterStyle
  • HighContrastBlackHighContrastBlack
  • HighContrastWhiteHighContrastWhite
  • HubHeaderCharacterSpacingHubHeaderCharacterSpacing
  • HubHeaderFontSizeHubHeaderFontSize
  • HubHeaderMarginThicknessHubHeaderMarginThickness
  • HubSectionHeaderCharacterSpacingHubSectionHeaderCharacterSpacing
  • HubSectionHeaderFontSizeHubSectionHeaderFontSize
  • HubSectionHeaderMarginThicknessHubSectionHeaderMarginThickness
  • HubSectionMarginThicknessHubSectionMarginThickness
  • InlineWindowPlayPauseMarginInlineWindowPlayPauseMargin
  • ItemTemplateItemTemplate
  • LeftFullWindowMarginLeftFullWindowMargin
  • LeftMarginLeftMargin
  • ListViewEmptyStaticTextBlockStyleListViewEmptyStaticTextBlockStyle
  • ListViewItemContentTextBlockStyleListViewItemContentTextBlockStyle
  • ListViewItemContentTranslateXListViewItemContentTranslateX
  • ListViewItemMarginListViewItemMargin
  • ListViewItemMultiselectCheckBoxMarginListViewItemMultiselectCheckBoxMargin
  • ListViewItemSubheaderTextBlockStyleListViewItemSubheaderTextBlockStyle
  • ListViewItemTextBlockStyleListViewItemTextBlockStyle
  • MediaControlPanelAudioThemeBrushMediaControlPanelAudioThemeBrush
  • MediaControlPanelPhoneVideoThemeBrushMediaControlPanelPhoneVideoThemeBrush
  • MediaControlPanelVideoThemeBrushMediaControlPanelVideoThemeBrush
  • MediaControlPanelVideoThemeColorMediaControlPanelVideoThemeColor
  • MediaControlPlayPauseThemeBrushMediaControlPlayPauseThemeBrush
  • MediaControlTimeRowThemeBrushMediaControlTimeRowThemeBrush
  • MediaControlTimeRowThemeColorMediaControlTimeRowThemeColor
  • MediaDownloadProgressIndicatorThemeBrushMediaDownloadProgressIndicatorThemeBrush
  • MediaErrorBackgroundThemeBrushMediaErrorBackgroundThemeBrush
  • MediaTextThemeBrushMediaTextThemeBrush
  • MenuFlyoutBackgroundThemeBrushMenuFlyoutBackgroundThemeBrush
  • MenuFlyoutBorderThemeBrushMenuFlyoutBorderThemeBrush
  • MenuFlyoutLandscapeThemePaddingMenuFlyoutLandscapeThemePadding
  • MenuFlyoutLeftLandscapeBorderThemeThicknessMenuFlyoutLeftLandscapeBorderThemeThickness
  • MenuFlyoutPortraitBorderThemeThicknessMenuFlyoutPortraitBorderThemeThickness
  • MenuFlyoutPortraitThemePaddingMenuFlyoutPortraitThemePadding
  • MenuFlyoutRightLandscapeBorderThemeThicknessMenuFlyoutRightLandscapeBorderThemeThickness
  • MessageDialogContentStyleMessageDialogContentStyle
  • MessageDialogTitleStyleMessageDialogTitleStyle
  • MinimalWindowMarginMinimalWindowMargin
  • PasswordBoxCheckBoxThemeMarginPasswordBoxCheckBoxThemeMargin
  • PhoneAccentBrushPhoneAccentBrush
  • PhoneBackgroundBrushPhoneBackgroundBrush
  • PhoneBackgroundColorPhoneBackgroundColor
  • PhoneBaseBlackColorPhoneBaseBlackColor
  • PhoneBaseHighColorPhoneBaseHighColor
  • PhoneBaseLowColorPhoneBaseLowColor
  • PhoneBaseLowSolidColorPhoneBaseLowSolidColor
  • PhoneBaseMediumHighColorPhoneBaseMediumHighColor
  • PhoneBaseMediumMidColorPhoneBaseMediumMidColor
  • PhoneBaseMediumMidSolidColorPhoneBaseMediumMidSolidColor
  • PhoneBaseMidColorPhoneBaseMidColor
  • PhoneBaseWhiteColorPhoneBaseWhiteColor
  • PhoneBorderThicknessPhoneBorderThickness
  • PhoneButtonBasePressedForegroundBrushPhoneButtonBasePressedForegroundBrush
  • PhoneButtonContentPaddingPhoneButtonContentPadding
  • PhoneButtonFontWeightPhoneButtonFontWeight
  • PhoneButtonMinHeightPhoneButtonMinHeight
  • PhoneButtonMinWidthPhoneButtonMinWidth
  • PhoneChromeBrushPhoneChromeBrush
  • PhoneChromeColorPhoneChromeColor
  • PhoneControlBackgroundColorPhoneControlBackgroundColor
  • PhoneControlDisabledColorPhoneControlDisabledColor
  • PhoneControlForegroundColorPhoneControlForegroundColor
  • PhoneDisabledBrushPhoneDisabledBrush
  • PhoneDisabledColorPhoneDisabledColor
  • PhoneFontFamilyLightPhoneFontFamilyLight
  • PhoneFontFamilySemiBoldPhoneFontFamilySemiBold
  • PhoneForegroundBrushPhoneForegroundBrush
  • PhoneForegroundColorPhoneForegroundColor
  • PhoneHighContrastSelectedBackgroundThemeBrushPhoneHighContrastSelectedBackgroundThemeBrush
  • PhoneHighContrastSelectedForegroundThemeBrushPhoneHighContrastSelectedForegroundThemeBrush
  • PhoneImagePlaceholderColorPhoneImagePlaceholderColor
  • PhoneLowBrushPhoneLowBrush
  • PhoneMidBrushPhoneMidBrush
  • PhonePageBackgroundColorPhonePageBackgroundColor
  • PhonePivotLockedTranslationPhonePivotLockedTranslation
  • PhonePivotUnselectedItemOpacityPhonePivotUnselectedItemOpacity
  • PhoneRadioCheckBoxBorderBrushPhoneRadioCheckBoxBorderBrush
  • PhoneRadioCheckBoxBrushPhoneRadioCheckBoxBrush
  • PhoneRadioCheckBoxCheckBrushPhoneRadioCheckBoxCheckBrush
  • PhoneRadioCheckBoxPressedBrushPhoneRadioCheckBoxPressedBrush
  • PhoneStrokeThicknessPhoneStrokeThickness
  • PhoneTextHighColorPhoneTextHighColor
  • PhoneTextLowColorPhoneTextLowColor
  • PhoneTextMidColorPhoneTextMidColor
  • PhoneTextOverAccentColorPhoneTextOverAccentColor
  • PhoneTouchTargetLargeOverhangPhoneTouchTargetLargeOverhang
  • PhoneTouchTargetOverhangPhoneTouchTargetOverhang
  • PivotHeaderItemPaddingPivotHeaderItemPadding
  • PlaceholderContentPresenterStylePlaceholderContentPresenterStyle
  • ProgressBarHighContrastAccentBarThemeBrushProgressBarHighContrastAccentBarThemeBrush
  • ProgressBarIndeterminateRectagleThemeSizeProgressBarIndeterminateRectagleThemeSize
  • ProgressBarRectangleStyleProgressBarRectangleStyle
  • ProgressRingActiveBackgroundOpacityProgressRingActiveBackgroundOpacity
  • ProgressRingElipseThemeMarginProgressRingElipseThemeMargin
  • ProgressRingElipseThemeSizeProgressRingElipseThemeSize
  • ProgressRingTextForegroundThemeBrushProgressRingTextForegroundThemeBrush
  • ProgressRingTextThemeMarginProgressRingTextThemeMargin
  • ProgressRingThemeSizeProgressRingThemeSize
  • RichEditBoxTextThemeMarginRichEditBoxTextThemeMargin
  • RightFullWindowMarginRightFullWindowMargin
  • RightMarginRightMargin
  • ScrollBarMinThemeHeightScrollBarMinThemeHeight
  • ScrollBarMinThemeWidthScrollBarMinThemeWidth
  • ScrollBarPanningThumbThemeHeightScrollBarPanningThumbThemeHeight
  • ScrollBarPanningThumbThemeWidthScrollBarPanningThumbThemeWidth
  • SliderThumbDisabledBorderThemeBrushSliderThumbDisabledBorderThemeBrush
  • SliderTrackBorderThemeBrushSliderTrackBorderThemeBrush
  • SliderTrackDisabledBorderThemeBrushSliderTrackDisabledBorderThemeBrush
  • TextBoxBackgroundColorTextBoxBackgroundColor
  • TextBoxBorderColorTextBoxBorderColor
  • TextBoxDisabledHeaderForegroundThemeBrushTextBoxDisabledHeaderForegroundThemeBrush
  • TextBoxFocusedBackgroundThemeBrushTextBoxFocusedBackgroundThemeBrush
  • TextBoxForegroundColorTextBoxForegroundColor
  • TextBoxPlaceholderColorTextBoxPlaceholderColor
  • TextControlHeaderMarginThemeThicknessTextControlHeaderMarginThemeThickness
  • TextControlHeaderMinHeightSizeTextControlHeaderMinHeightSize
  • TextStyleExtraExtraLargeFontSizeTextStyleExtraExtraLargeFontSize
  • TextStyleExtraLargePlusFontSizeTextStyleExtraLargePlusFontSize
  • TextStyleMediumFontSizeTextStyleMediumFontSize
  • TextStyleSmallFontSizeTextStyleSmallFontSize
  • TimeRemainingElementMarginTimeRemainingElementMargin

SearchBox eingestellt zugunsten von AutoSuggestBoxSearchBox deprecated in favor of AutoSuggestBox

Obwohl SearchBox in der universellen Gerätefamilie implementiert ist, ist es auf mobilen Geräten nicht voll funktionsfähig.Although SearchBox is implemented in the Universal device family, it is not fully functional on mobile devices. Verwenden Sie AutoSuggestBox für Ihre universelle Sucherfahrung.Use AutoSuggestBox for your universal search experience. Nachfolgend finden Sie die gängige Vorgehensweise zur Implementierung einer Sucherfahrung mit AutoSuggestBox.Here's how you typically implement a search experience with AutoSuggestBox.

Sobald der Benutzer mit der Eingabe beginnt, wird das TextChanged-Ereignis mit der Ursache UserInput ausgelöst.Once the user starts typing, the TextChanged event is raised, with a reason of UserInput. Füllen Sie anschließend die Liste der Vorschläge auf, und legen Sie die ItemsSource von AutoSuggestBox fest.You then populate the list of suggestions and set the ItemsSource of the AutoSuggestBox. Während der Benutzer durch die Liste navigiert, wird das SuggestionChosen-Ereignis ausgelöst (und wenn Sie TextMemberDisplayPath festgelegt haben), wird das Textfeld automatisch mit der angegebenen Eigenschaft aufgefüllt.As the user navigates the list, the SuggestionChosen event is raised (and if you have set TextMemberDisplayPath, the text box is auto-filled with the property specified). Wenn der Benutzer eine Auswahl mit der EINGABETASTE übermittelt, wird das QuerySubmitted-Ereignis ausgelöst. An dieser Stelle können Sie auf diesen Vorschlag reagieren (in diesem Fall wahrscheinlich das Navigieren zu einer anderen Seite mit weiteren Details zu den angegebenen Inhalten).When the user submits a choice with the Enter key, the QuerySubmitted event is raised, at which point you can take action on that suggestion (in this case, most likely navigating to another page with more details on the specified content). Beachten Sie, dass die LinguisticDetails-Eigenschaft und die Language-Eigenschaft von SearchBoxQuerySubmittedEventArgs nicht mehr unterstützt werden (es gibt entsprechende APIs, um diese Funktion zu unterstützen).Note that the LinguisticDetails and Language properties of SearchBoxQuerySubmittedEventArgs are no longer supported (there are equivalent APIs to support that functionality). Und KeyModifiers wird nicht mehr unterstützt.And KeyModifiers is no longer supported.

Autovorschlags Box bietet auch Unterstützung für Eingabemethoden-Editoren (Input Method Editors, IMEs).AutoSuggestBox also has support for input method editors (IMEs). Und wenn Sie ein „Suchen“-Symbol anzeigen möchten, ist das ebenfalls möglich (durch die Interaktion mit dem Symbol wird das QuerySubmitted-Ereignis ausgelöst).And, if you want to show a "find" icon, then you can do that too (interacting with the icon will cause the QuerySubmitted event to be raised).

   <AutoSuggestBox ... >
        <AutoSuggestBox.QueryIcon>
            <SymbolIcon Symbol="Find"/>
        </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>

Siehe auch Beispiel für AutoSuggestBox-Portierung.Also, see AutoSuggestBox porting sample.

Änderungen an „SemanticZoom”SemanticZoom changes

Die Bewegung zum Verkleinern für SemanticZoom wurde im Windows Phone-Modell zusammengeführt. Hierzu wird auf einen Gruppenkopf getippt oder geklickt (auf Desktopcomputern wird also das Angebot der Schaltfläche „Minus“ zum Verkleinern nicht mehr angezeigt).The zooming-out gesture for a SemanticZoom has converged on the Windows Phone model, which is to tap or click a group header (so, on desktop computers, the minus button affordance to zoom out is no longer displayed). Jetzt erhalten wir das gleiche, einheitliche Verhalten kostenlos auf allen Geräten.Now, we get the same, consistent, behavior for free on all devices. Es besteht der kosmetische Unterschied zum Windows Phone-Modell, dass die verkleinerte Ansicht (Sprungliste) die vergrößerte Ansicht ersetzt, anstatt sie zu überlagern.One cosmetic difference from the Windows Phone model is that the zoomed-out view (the jump list) replaces the zoomed-in view rather than overlaying it. Aus diesem Grund können Sie alle halbtransparenten Hintergründe aus verkleinerten Ansichten entfernen.For this reason, you can remove any semi-opaque backgrounds from zoomed-out views.

In einer Windows Phone Store-App wird die Zoomansicht in die Größe des Bildschirms erweitert.In a Windows Phone Store app, the zoomed-out view expands to the size of the screen. In einer Windows-Runtime 8. x-APP und in einer Windows 10-APP wird die Größe der Zoomansicht auf die Begrenzungen des semanticzoom -Steuer Elements beschränkt.In a Windows Runtime 8.x app, and in a Windows 10 app, the size of the zoomed-out view is constrained to the bounds of the SemanticZoom control.

In einer Windows Phone Store-App scheinen Inhalte hinter der verkleinerten Ansicht (in Z-Reihenfolge) durch, wenn für den Hintergrund der verkleinerten Ansicht eine Transparenz festgelegt wurde.In a Windows Phone Store app, content behind the zoomed-out view (in z-order) shows through if the zoomed-out view has any transparency in its background. In einer Windows-Runtime 8. x-APP und in einer Windows 10-APP ist keine Anzeige hinter der Zoomansicht sichtbar.In a Windows Runtime 8.x app, and in a Windows 10 app, nothing is visible behind the zoomed out view.

Wenn die app in einer Windows-Runtime 8. x-APP deaktiviert und erneut aktiviert wird, wird die Zoomansicht verworfen (wenn Sie angezeigt wird), und stattdessen wird die Zoomansicht angezeigt.In a Windows Runtime 8.x app, when the app is deactivated and reactivated, the zoomed-out view is dismissed (if it was being shown) and the zoomed-in view is shown instead. In einer Windows Phone Store-App und in einer Windows 10-APP wird die Zoomansicht weiterhin angezeigt, wenn Sie angezeigt wird.In a Windows Phone Store app, and in a Windows 10 app, the zoomed-out view will remain showing if it was being shown.

In einer Windows Phone Store-App und in einer Windows 10-APP wird die Zoomansicht verworfen, wenn die Schaltfläche "zurück" gedrückt wird.In a Windows Phone Store app, and in a Windows 10 app, the zoomed-out view is dismissed when the back button is pressed. Bei einer Windows-Runtime 8. x-APP gibt es keine integrierte Schaltflächen-Schaltfläche, daher trifft die Frage nicht zu.For a Windows Runtime 8.x app, there is no built-in back button processing, so the question doesn't apply.

„Einstellungen“Settings

Die settingspane -Klasse Windows-Runtime 8. x ist für Windows 10 nicht geeignet.The Windows Runtime 8.x SettingsPane class is not appropriate for Windows 10. Zusätzlich zur Erstellung einer Einstellungsseite sollten Sie Benutzern stattdessen die Möglichkeit geben, von der App aus auf die Seite zuzugreifen.Instead, in addition to building a Settings page, you should give your users a way to access it from within your app. Es wird empfohlen, diese Seite mit App-Einstellungen auf der obersten Ebene als letztes angeheftetes Element im Navigationsbereich verfügbar zu machen. Hier sehen Sie jedoch den vollständigen Satz von Optionen.We recommend that you expose this app Settings page at the top level, as the last pinned item on your navigation pane, but here are the full set of your options.

  • Navigationsbereich.Navigation pane. Einstellungen sollten das letzte Element in der Navigationsliste und am Ende der Liste angeheftet sein.Settings should be the last item in the navigational list of choices, and pinned to the bottom.
  • App-Leiste/Symbolleiste (innerhalb einer Registerkartenansicht oder eines Pivot-Layouts).Appbar/toolbar (within a tabs view or pivot layout). Einstellungen sollten das letzte Element im Flyout „Menü“ der App-Leiste oder Symbolleiste sein.Settings should be the last item in the appbar or toolbar menu flyout. Es wird davon abgeraten, Einstellungen als eines der Elemente der obersten Ebene in der Navigation zu verwenden.It is not recommended for Settings to be one of the top-level items within the navigation.
  • Hub.Hub. Einstellungen sollte innerhalb des Flyouts „Menü“ platziert werden (über das Menü der App-Leiste oder Symbolleiste im Hublayout).Settings should be located inside of the menu flyout (could be from the app bar menu or the toolbar menu within the Hub layout).

Es wird davon abgeraten, Einstellungen in einem Master-/Detailbereich zu verstecken.It's also not recommended to bury Settings within a master-detail pane.

Die Einstellungsseite sollte das gesamte App-Fenster ausfüllen, und außerdem sollten „Info“ und „Feedback“ auf der Einstellungsseite zu finden sein.Your Settings page should fill the whole of your app's window, and your Settings page is also where About and Feedback should be. Richtlinien für den Entwurf der Einstellungsseite finden Sie unter Richtlinien für App-Einstellungen.For guidance on the design of your Settings page, see Guidelines for app settings.

TextText

Der Text (bzw. die Typografie) ist ein wichtiger Aspekt einer UWP-App. Beim Portieren ist es ratsam, das grafische Design Ihrer Ansichten noch einmal darauf zu prüfen, ob es zur neuen Entwurfssprache passt.Text (or typography) is an important aspect of a UWP app and, while porting, you may want to revisit the visual designs of your views so that they are in harmony with the new design language. Verwenden Sie die folgenden Abbildungen, um nach den verfügbaren TextBlock-Systemstilen der universellen Windows-Plattform (UWP) zu suchen.Use these illustrations to find the Universal Windows Platform (UWP) TextBlock system styles that are available. Suchen Sie diejenigen, die den Windows Phone Silverlight-Stilen entsprechen, die Sie verwendet haben.Find the ones that correspond to the Windows Phone Silverlight styles you used. Alternativ können Sie eigene universelle Stile erstellen und die Eigenschaften aus den Windows Phone Silverlight-System Stilen in diese kopieren.Alternatively, you can create your own universal styles and copy the properties from the Windows Phone Silverlight system styles into those.

textblock-Systemstile für Windows 10-Apps
System TextBlock-Stile für Windows 10-appsSystem TextBlock styles for Windows 10 apps

In Windows-Runtime 8. x-apps und Windows Phone Store-Apps ist die Standardschrift Familie Global User Interface.In Windows Runtime 8.x apps and Windows Phone Store apps, the default font family is Global User Interface. In einer Windows 10-APP ist die Standardschrift Familie Segoe UI.In a Windows 10 app, the default font family is Segoe UI. Daher kann die Schriftartmetrik in Ihrer App Unterschiede aufweisen.As a result, font metrics in your app may look different. Wenn Sie die Darstellung Ihres 8.1-Texts reproduzieren möchten, können Sie Ihre eigene Metrik mit Eigenschaften wie LineHeight und LineStackingStrategy festlegen.If you want to reproduce the look of your 8.1 text, you can set your own metrics using properties such as LineHeight and LineStackingStrategy.

In Windows-Runtime 8. x-apps und Windows Phone Store-Apps ist die Standardsprache für Text auf die Sprache des Builds oder auf "en-US" festgelegt.In Windows Runtime 8.x apps and Windows Phone Store apps, the default language for text is set to the language of the build, or to en-us. In einer Windows 10-APP ist die Standardsprache auf die Top-App-Sprache festgelegt (Schriftart Fallback).In a Windows 10 app, the default language is set to the top app language (font fallback). Sie können FrameworkElement.Language explizit festlegen, aber Sie erhalten ein besseres Fallbackverhalten für Schriftarten, wenn Sie für diese Eigenschaft keinen Wert festlegen.You can set FrameworkElement.Language explicitly, but you will enjoy better font fallback behavior if you do not set a value for that property.

Weitere Informationen finden Sie unter Richtlinien für Schriftarten und Entwerfen von UWP-Apps.For more info, see Guidelines for fonts and Design UWP apps. Informationen zu Änderungen von Textsteuerelementen finden Sie oben im Abschnitt Steuerelemente.Also, see the Controls section above for changes to text controls.

DesignänderungenTheme changes

Bei einer universellen 8.1-App ist das Standarddesign standardmäßig dunkel.For a Universal 8.1 app, the default theme is dark by default. Für Windows 10-Geräte hat sich das Standarddesign geändert, Sie können jedoch das verwendete Design steuern, indem Sie ein angefordertes Design in "App. XAML" deklarieren.For Windows 10 devices, the default theme has changed, but you can control the theme used by declaring a requested theme in App.xaml. Wenn Sie z. B. auf allen Geräten ein dunkles Design verwenden möchten, fügen Sie dem Stammelement der App RequestedTheme="Dark" hinzu.For example, to use a dark theme on all devices, add RequestedTheme="Dark" to the root Application element.

Kacheln und PopupsTiles and toasts

Für Kacheln und-Popup funktionieren die Vorlagen, die Sie zurzeit verwenden, weiterhin in Ihrer Windows 10-app.For tiles and toasts, the templates you're currently using will continue to work in your Windows 10 app. Es sind jedoch neue adaptive Vorlagen verfügbar. Diese werden unter Benachrichtigungen, Kacheln, Popups und Signale beschrieben.But, there are new, adaptive templates available for you to use, and these are described in Notifications, tiles, toasts, and badges.

Auf Desktopcomputern war eine Popupbenachrichtigung früher eine vorübergehende Nachricht.Previously, on desktop computers, a toast notification was a transitory message. Sie wurde ausgeblendet und konnte nicht mehr aufgerufen werden, nachdem sie geschlossen oder ignoriert wurde.It would disappear, and no longer be retrievable, once it was missed or ignored. Wenn unter Windows Phone eine Popupbenachrichtigung ignoriert oder vorerst geschlossen wird, wird sie ins Info-Center verschoben.On Windows Phone, if a toast notification is ignored or temporarily dismissed, it would go into the Action Center. Das Info-Center ist nun nicht mehr auf die Mobilgerätefamilie beschränkt.Now, Action Center is no longer limited to the Mobile device family.

Zum Senden einer Popupbenachrichtigung muss keine Funktion mehr deklariert werden.To send a toast notification, there is no longer any need to declare a capability.

FenstergrößeWindow size

Bei einer universellen 8.1-App wird das App-Manifestelement ApplicationView verwendet, um eine minimale Fensterbreite zu deklarieren.For a Universal 8.1 app, the ApplicationView app manifest element is used to declare a minimum window width. In Ihrer UWP-App können Sie eine Mindestgröße (Breite und Höhe) mit imperativem Code angeben.In your UWP app, you can specify a minimum size (both width and height) with imperative code. Die Standardmindestgröße beträgt 500 x 320 Epx. Dies ist auch die kleinste zulässige Mindestgröße.The default minimum size is 500x320epx, and that's also the smallest minimum size accepted. Die größte zulässige Mindestgröße ist 500 x 500 Epx.The largest minimum size accepted is 500x500epx.

   Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

Das nächste Thema ist Portieren: E/A, Gerät und App-Modell.The next topic is Porting for I/O, device, and app model.