Afficher plusieurs vues d’une applicationShow multiple views for an app

Mode filaire illustrant une application avec plusieurs fenêtres

Aidez les utilisateurs à accroître leur productivité en leur permettant d’afficher des parties indépendantes de votre application dans des fenêtres distinctes.Help your users be more productive by letting them view independent parts of your app in separate windows. Lorsque vous créez plusieurs fenêtres pour une application, la barre des tâches affiche chaque fenêtre séparément.When you create multiple windows for an app, the taskbar shows each window separately. Les utilisateurs peuvent déplacer, redimensionner, afficher et masquer des fenêtres d’application indépendamment et ils peuvent basculer d’une fenêtre à une autre comme s’il s’agissait d’applications distinctes.Users can move, resize, show, and hide app windows independently and can switch between app windows as if they were separate apps.

API importantes : Espace de noms Windows. UI. ViewManagement, espace de noms Windows. UI. windowmanagementImportant APIs: Windows.UI.ViewManagement namespace, Windows.UI.WindowManagement namespace

Quand une application doit-elle utiliser plusieurs vues ?When should an app use multiple views?

Il existe un grand nombre de scénarios qui peuvent tirer parti de plusieurs vues.There are a variety of scenarios that can benefit from multiple views. Voici quelques exemples :Here are a few examples:

  • Une application de messagerie qui permet aux utilisateurs d’afficher une liste des messages reçus tout en rédigeant un e-mailAn email app that lets users view a list of received messages while composing a new email
  • Une application de carnet d’adresses qui permet aux utilisateurs de comparer les informations de contact de plusieurs personnes côte à côteAn address book app that lets users compare contact info for multiple people side-by-side
  • Une application de lecteur de musique qui permet aux utilisateurs de voir ce qui est en cours de lecture tout en naviguant dans une liste d’autres morceaux disponiblesA music player app that lets users see what's playing while browsing through a list of other available music
  • Une application de prise de notes qui permet aux utilisateurs de copier des informations à partir d’une page de notes sur une autreA note-taking app that lets users copy information from one page of notes to another
  • Une application de lecture qui permet aux utilisateurs d’ouvrir plusieurs articles à lire plus tard, après avoir pu accéder à tous les gros titres de l'actualitéA reading app that lets users open several articles for reading later, after an opportunity to peruse all high-level headlines

Chaque disposition d'application est unique, mais nous vous recommandons d'inclure un bouton « nouvelle fenêtre » dans un emplacement prévisible, comme le coin supérieur droit du contenu, qui pourra être ouvert dans une nouvelle fenêtre.While each app layout is unique, we recommend including a "new window" button in a predictable location, such as the top right corner of the content that can be opened in a new window. Envisagez également d’inclure une option de menu contextuel pour «ouvrir dans une nouvelle fenêtre».Also consider including a context menu option to "Open in a new window".

Pour créer des instances distinctes de votre application (plutôt que des fenêtres distinctes pour la même instance), consultez créer une application UWP multi-instance.To create separate instances of your app (rather than separate windows for the same instance), see Create a multi-instance UWP app.

Ordinateurs hôtes de fenêtrageWindowing hosts

Il existe différentes façons d’héberger du contenu UWP dans une application.There are different ways that UWP content can be hosted inside an app.

  • CoreWindow/ApplicationViewCoreWindow/ApplicationView

    Une vue d’application est l’association de type 1:1 d’un thread et d’une fenêtre que l’application utilise pour afficher le contenu.An app view is the 1:1 pairing of a thread and a window that the app uses to display content. La première vue créée lors du démarrage de votre application s’appelle la vue principale.The first view that’s created when your app starts is called the main view. Chaque CoreWindow/ApplicationView fonctionne dans son propre thread.Each CoreWindow/ApplicationView operates in its own thread. Le fait de travailler sur des threads d’interface utilisateur différents peut compliquer les applications à plusieurs fenêtres.Having to work on different UI threads can complicate multi-window apps.

    La vue principale de votre application est toujours hébergée dans un ApplicationView.The main view for your app is always hosted in an ApplicationView. Le contenu d’une fenêtre secondaire peut être hébergé dans un ApplicationView ou dans un AppWindow.Content in a secondary window can be hosted in a ApplicationView or in an AppWindow.

    Pour savoir comment utiliser ApplicationView pour afficher les fenêtres secondaires dans votre application, consultez utiliser ApplicationView.To learn how to use ApplicationView to show secondary windows in your app, see Use ApplicationView.

  • AppWindowAppWindow

    AppWindow simplifie la création d’applications UWP multifenêtres, car il opère sur le même thread d’interface utilisateur qu’à partir duquel il est créé.AppWindow simplifies the creation of multi-window UWP apps because it operates on the same UI thread that it’s created from.

    La classe AppWindow et les autres API de l’espace de noms windowmanagement sont disponibles à partir de Windows 10, version 1903 (SDK 18362).The AppWindow class and other APIs in the WindowManagement namespace are available starting in Windows 10, version 1903 (SDK 18362). Si votre application cible des versions antérieures de Windows 10, vous devez utiliser ApplicationView pour créer des fenêtres secondaires.If your app targets earlier versions of Windows 10, you must use ApplicationView to create secondary windows.

    Pour savoir comment utiliser AppWindow pour afficher les fenêtres secondaires dans votre application, consultez utiliser AppWindow.To learn how to use AppWindow to show secondary windows in your app, see Use AppWindow.

    Notes

    AppWindow est actuellement en version préliminaire.AppWindow is currently in preview. Cela signifie que vous pouvez envoyer des applications qui utilisent AppWindow vers le Windows Store, mais certains composants de la plateforme et de l’infrastructure sont connus pour ne pas fonctionner avec AppWindow (voir limitations).This means you can submit apps that use AppWindow to the Store, but some platform and framework components are known to not work with AppWindow (see Limitations).

  • DesktopWindowXamlSource (Îlots XAML)DesktopWindowXamlSource (XAML Islands)

    Le contenu XAML UWP dans une application Win32 (à l’aide de HWND), également appelé îlots XAML, est hébergé dans un DesktopWindowXamlSource.UWP XAML content in a Win32 app (using HWND), also known as XAML Islands, is hosted in a DesktopWindowXamlSource.

    Pour plus d’informations sur les îlots XAML, consultez utilisation de l’API d’hébergement XAML UWP dans une application de bureauFor more info about XAML Islands, see Using the UWP XAML hosting API in a desktop application

Rendre le code portable sur les hôtes de fenêtrageMake code portable across windowing hosts

Quand le contenu XAML est affiché dans un CoreWindow, il y a toujours un ApplicationView associé et une fenêtreXAML.When XAML content is displayed in a CoreWindow, there's always an associated ApplicationView and XAML Window. Vous pouvez utiliser des API sur ces classes pour récupérer des informations telles que les limites de la fenêtre.You can use APIs on these classes to get information such as the window bounds. Pour récupérer une instance de ces classes, utilisez la méthode statique CoreWindow. GetForCurrentThread , la méthode ApplicationView. GetForCurrentView ou la propriété Window. Current .To retrieve an instance of these classes, you use the static CoreWindow.GetForCurrentThread method, ApplicationView.GetForCurrentView method, or Window.Current property. De plus, il existe de nombreuses classes qui utilisent GetForCurrentView le modèle pour récupérer une instance de la classe, par exemple DisplayInformation. GetForCurrentView.In addition, there are many classes that use the GetForCurrentView pattern to retrieve an instance of the class, such as DisplayInformation.GetForCurrentView.

Ces API fonctionnent parce qu’il n’existe qu’une seule arborescence de contenu XAML pour un CoreWindow/ApplicationView, de sorte que le XAML sait que le contexte dans lequel il est hébergé est celui de CoreWindow/ApplicationView.These APIs work because there is only a single tree of XAML content for a CoreWindow/ApplicationView, so the XAML knows the context in which it’s hosted is that CoreWindow/ApplicationView.

Quand le contenu XAML s’exécute à l’intérieur d’un AppWindow ou d’un DesktopWindowXamlSource, plusieurs arborescences de contenu XAML peuvent s’exécuter simultanément sur le même thread.When XAML content is running inside an AppWindow or DesktopWindowXamlSource, you can have multiple trees of XAML content running on the same thread at the same time. Dans ce cas, ces API ne fournissent pas les informations appropriées, car le contenu n’est plus exécuté à l’intérieur de la fenêtre CoreWindow/ApplicationView (et de la fenêtre XAML) actuelle.In this case, these APIs don’t give the right information, since the content is no longer running inside the current CoreWindow/ApplicationView (and XAML Window).

Pour vous assurer que votre code fonctionne correctement sur tous les hôtes de fenêtrage, vous devez remplacer les API qui reposent sur CoreWindow, ApplicationViewet Window avec les nouvelles API qui obtiennent leur contexte à partir de la classe XamlRoot .To ensure that your code works correctly across all windowing hosts, you should replace APIs that rely on CoreWindow, ApplicationView, and Window with new APIs that get their context from the XamlRoot class. La classe XamlRoot représente une arborescence de contenu XAML et des informations sur le contexte dans lequel elle est hébergée, qu’il s’agisse d’un CoreWindow, d’un AppWindow ou d’un DesktopWindowXamlSource.The XamlRoot class represents a tree of XAML content and information about the context in which it is hosted, whether it’s a CoreWindow, AppWindow, or DesktopWindowXamlSource. Cette couche d’abstraction vous permet d’écrire le même code, quel que soit l’hôte de fenêtrage dans lequel le XAML s’exécute.This abstraction layer lets you write the same code regardless of which windowing host the XAML runs in.

Ce tableau montre le code qui ne fonctionne pas correctement entre les hôtes de fenêtrage et le nouveau code portable avec lequel vous pouvez le remplacer, ainsi que certaines API que vous n’avez pas besoin de modifier.This table shows code that does not work correctly across windowing hosts, and the new portable code that you can replace it with, as well as some APIs that you don't need to change.

Si vous avez utilisé...If you used... Remplacer par...Replace with...
CoreWindow. GetForCurrentThread (). LimitesCoreWindow.GetForCurrentThread().Bounds UIElement. XamlRoot. TailleuiElement.XamlRoot.Size
CoreWindow. GetForCurrentThread (). SizeChangedCoreWindow.GetForCurrentThread().SizeChanged UIElement. XamlRoot. Modifié leuiElement.XamlRoot.Changed
CoreWindow. VisibleCoreWindow.Visible UIElement. XamlRoot. IsHostVisibleuiElement.XamlRoot.IsHostVisible
CoreWindow. VisibilityChangedCoreWindow.VisibilityChanged UIElement. XamlRoot. Modifié leuiElement.XamlRoot.Changed
CoreWindow. GetForCurrentThread (). GetKeyStateCoreWindow.GetForCurrentThread().GetKeyState Inchangé.Unchanged. Cela est pris en charge dans AppWindow et DesktopWindowXamlSource.This is supported in AppWindow and DesktopWindowXamlSource.
CoreWindow. GetForCurrentThread (). GetAsyncKeyStateCoreWindow.GetForCurrentThread().GetAsyncKeyState Inchangé.Unchanged. Cela est pris en charge dans AppWindow et DesktopWindowXamlSource.This is supported in AppWindow and DesktopWindowXamlSource.
Fenetre. En coursWindow.Current Retourne l’objet de fenêtre XAML principal qui est étroitement lié au CoreWindow actuel.Returns the main XAML Window object which is closely bound to the current CoreWindow. Consultez la remarque après ce tableau.See Note after this table.
Window. Current. LimitesWindow.Current.Bounds UIElement. XamlRoot. TailleuiElement.XamlRoot.Size
Window. Current. ContenuWindow.Current.Content Racine UIElement = UIElement. XamlRoot. ContenuUIElement root = uiElement.XamlRoot.Content
Window. Current. CompositeurWindow.Current.Compositor Inchangé.Unchanged. Cela est pris en charge dans AppWindow et DesktopWindowXamlSource.This is supported in AppWindow and DesktopWindowXamlSource.
VisualTreeHelper. GetOpenPopupsVisualTreeHelper.GetOpenPopups
Dans les applications des îlots XAML, cela génère une erreur.In XAML Islands apps this will throw an error. Dans les applications AppWindow, cette opération retourne les menus contextuels ouverts dans la fenêtre principale.In AppWindow apps this will return open popups on the main window.
VisualTreeHelper. GetOpenPopupsForXamlRoot (UIElement. XamlRoot)VisualTreeHelper.GetOpenPopupsForXamlRoot(uiElement.XamlRoot)
Focus. GetFocusedElementFocusManager.GetFocusedElement Focus. GetFocusedElement (UIElement. XamlRoot)FocusManager.GetFocusedElement(uiElement.XamlRoot)
contentDialog. ShowAsync ()contentDialog.ShowAsync() contentDialog. XamlRoot = UIElement. XamlRoot;contentDialog.XamlRoot = uiElement.XamlRoot;
contentDialog. ShowAsync ();contentDialog.ShowAsync();
menuFlyout. ShowAt (null, New point (10, 10));menuFlyout.ShowAt(null, new Point(10, 10)); menuFlyout. XamlRoot = UIElement. XamlRoot;menuFlyout.XamlRoot = uiElement.XamlRoot;
menuFlyout. ShowAt (null, New point (10, 10));menuFlyout.ShowAt(null, new Point(10, 10));

Notes

Pour le contenu XAML dans un DesktopWindowXamlSource, il existe un CoreWindow/une fenêtre sur le thread, mais il est toujours invisible et sa taille est de 1x1.For XAML content in a DesktopWindowXamlSource, there does exist a CoreWindow/Window on the thread, but it is always invisible and has a size of 1x1. Elle est toujours accessible à l’application, mais ne renvoie pas de limites significatives ni de visibilité.It is still accessible to the app but won’t return meaningful bounds or visibility.

Pour le contenu XAML dans un AppWindow, il y aura toujours exactement un CoreWindow sur le même thread.For XAML content in an AppWindow, there will always be exactly one CoreWindow on the same thread. Si vous appelez une GetForCurrentView API GetForCurrentThread ou, cette API retourne un objet qui reflète l’état du CoreWindow sur le thread, et non l’un des AppWindows qui peuvent s’exécuter sur ce thread.If you call a GetForCurrentView or GetForCurrentThread API, that API will return an object that reflects the state of the CoreWindow on the thread, not any of the AppWindows that may be running on that thread.

Pratiques conseillées et déconseilléesDo's and don'ts

  • Fournissez un point d’entrée clair à la vue secondaire en utilisant le glyphe « ouvrir une nouvelle fenêtre ».Do provide a clear entry point to the secondary view by utilizing the "open new window" glyph.
  • Communiquez l’objectif de la vue secondaire aux utilisateurs.Do communicate the purpose of the secondary view to users.
  • Assurez-vous que votre application est entièrement fonctionnelle dans une vue unique et que les utilisateurs ouvrent une vue secondaire uniquement pour des raisons pratiques.Do ensure that your app is fully functional in a single view and users will open a secondary view only for convenience.
  • N’utilisez pas la vue secondaire pour fournir des notifications ou d'autres éléments visuels temporaires.Don't rely on the secondary view to provide notifications or other transient visuals.