Héberger un contrôle XAML WinRT standard dans une application WPF à l’aide de XAML IslandsHost a standard WinRT XAML control in a WPF app using XAML Islands

Cet article montre deux façons d’héberger un contrôle XAML WinRT standard (autrement dit, un contrôle XAML WinRT interne fourni par le SDK Windows) dans une application WPF à l’aide de XAML Islands :This article demonstrates two ways to host a standard WinRT XAML control (that is, a first-party WinRT XAML control provided by the Windows SDK) in a WPF app by using XAML Islands:

  • Il montre comment héberger un contrôle InkCanvas et un contrôle InkToolbar à l’aide de contrôles wrappés disponibles dans le Windows Community Toolkit.It shows how to host a UWP InkCanvas and InkToolbar controls by using wrapped controls in the Windows Community Toolkit. Ces contrôles wrappent l’interface et les fonctionnalités d’un petit ensemble de contrôles XAML WinRT utiles.These controls wrap the interface and functionality of a small set of useful WinRT XAML controls. Vous pouvez les ajouter directement à l’aire de conception de votre projet WPF ou Windows Forms, puis les utiliser comme tout autre contrôle WPF ou Windows Forms dans le concepteur.You can add them directly to the design surface of your WPF or Windows Forms project and then use them like any other WPF or Windows Forms control in the designer.

  • Il montre également comment héberger un contrôle CalendarView UWP à l’aide du contrôle WindowsXamlHost disponible dans le Windows Community Toolkit.It also shows how to host a UWP CalendarView control by using the WindowsXamlHost control in the Windows Community Toolkit. Seul un petit ensemble de contrôles XAML WinRT étant disponible sous forme de contrôles wrappés, vous pouvez utiliser WindowsXamlHost pour héberger n’importe quel autre contrôle XAML WinRT standard.Because only a small set of WinRT XAML controls are available as wrapped controls, you can use WindowsXamlHost to host any other standard WinRT XAML control.

Cet article montre comment héberger des contrôles XAML WinRT dans une application WPF. Toutefois, sachez que le processus est similaire pour une application Windows Forms.Although this article demonstrates how to host WinRT XAML controls in a WPF app, the process is similar for a Windows Forms app.

Composants requisRequired components

Pour héberger un contrôle XAML WinRT dans une application WPF (ou Windows Forms), vous aurez besoin des composants suivants dans votre solution.To host a WinRT XAML control in a WPF (or Windows Forms) app, you'll need the following components in your solution. Cet article fournit des instructions sur la création de chacun de ces composants.This article provides instructions for creating each of these components.

  • Le projet et le code source de votre application.The project and source code for your app. L’utilisation du contrôle WindowsXamlHost pour héberger des contrôles XAML WinRT personnalisés est uniquement prise en charge dans les applications ciblant .NET Core 3.x.Using the WindowsXamlHost control to host WinRT XAML controls is supported in apps that target .NET Core 3.x.

  • Un projet d’application UWP qui définit une classe Application racine dérivant de XamlApplication.A UWP app project that defines a root Application class that derives from XamlApplication. Votre projet WPF ou Windows Forms doit avoir accès à une instance de la classe Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication fournie par le Windows Community Toolkit afin qu’il puisse découvrir et charger des contrôles XAML UWP personnalisés.Your WPF or Windows Forms project must have access to an instance of the Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication class provided by the Windows Community Toolkit so that it can discover and load custom UWP XAML controls. À cette fin, la méthode recommandée consiste à définir cet objet dans un projet d’application UWP distinct qui fait partie de la solution pour votre application WPF ou Windows Forms.The recommended way to do this is to define this object in a separate UWP app project that is part of the solution for your WPF or Windows Forms app.

    Notes

    Bien que l’objet XamlApplication ne soit pas nécessaire pour héberger un contrôle XAML WinRT interne, votre application a besoin de cet objet pour prendre en charge l’ensemble des scénarios XAML Islands, y compris l’hébergement de contrôles XAML WinRT personnalisés.Although the XamlApplication object isn't required for hosting a first-party WinRT XAML control, your app needs this object to support the full range of XAML Island scenarios, including hosting custom WinRT XAML controls. Ainsi, nous vous recommandons de toujours définir un objet XamlApplication dans une solution dans laquelle vous utilisez des îlots XAML.Therefore, we recommend that you always define a XamlApplication object in any solution in which you are using XAML Islands.

    Notes

    Votre solution ne peut contenir qu’un seul projet qui définit un objet XamlApplication.Your solution can contain only one project that defines a XamlApplication object. Le projet qui définit l’objet XamlApplication doit inclure des références à tous les autres projets et bibliothèques utilisés pour héberger les contrôles XAML WinRT sur XAML Islands.The project that defines the XamlApplication object must include references to all other libraries and projects that are used to host WinRT XAML controls on the XAML Island.

Créer un projet WPFCreate a WPF project

Avant de commencer, suivez ces instructions pour créer un projet WPF et le configurer pour héberger des îlots XAML.Before getting started, follow these instructions to create a WPF project and configure it to host XAML Islands. Si vous disposez déjà d’un projet WPF, vous pouvez adapter ces étapes et exemples de code à votre projet.If you have an existing WPF project, you can adapt these steps and code examples for your project.

  1. Dans Visual Studio 2019, créez un projet Application WPF (.NET Core) .In Visual Studio 2019, create a new WPF App (.NET Core) project. Si vous ne l’avez pas déjà fait, vous devez installer la dernière version du SDK .NET Core 3.1.You must first install the latest version of the .NET Core 3.1 SDK if you haven't done so already.

  2. Assurez-vous que les références de package sont activées :Make sure package references are enabled:

    1. Dans Visual Studio, cliquez sur Outils -> Gestionnaire de package NuGet-> Paramètres du Gestionnaire de package.In Visual Studio, click Tools -> NuGet Package Manager -> Package Manager Settings.
    2. Assurez-vous que PackageReference est sélectionné pour Format de gestion de package par défaut.Make sure PackageReference is selected for Default package management format.
  3. Cliquez avec le bouton droit sur votre projet WPF dans l’Explorateur de solutions, puis choisissez Gérer les packages NuGet.Right-click your WPF project in Solution Explorer and choose Manage NuGet Packages.

  4. Sélectionnez l’onglet Parcourir, recherchez le package Microsoft.Toolkit.Wpf.UI.Controls, puis installez la dernière version stable.Select the Browse tab, search for the Microsoft.Toolkit.Wpf.UI.Controls package and install the latest stable version. Ce package fournit tout ce dont vous avez besoin pour utiliser les contrôles XAML WinRT wrappés pour WPF (y compris InkCanvas et InkToolbar et le contrôle WindowsXamlHost).This package provides everything you need to use the wrapped WinRT XAML controls for WPF (including InkCanvas and InkToolbar and the WindowsXamlHost control.

    Notes

    Les applications Windows Forms doivent utiliser le package Microsoft.Toolkit.Forms.UI.Controls.Windows Forms apps must use the Microsoft.Toolkit.Forms.UI.Controls package.

  5. Configurez votre solution afin qu’elle cible une plateforme spécifique, telle que x86 ou x64.Configure your solution to target a specific platform such as x86 or x64. La plupart des scénarios d’îlots XAML ne sont pas pris en charge dans les projets qui ciblent N’importe quelle UC.Most XAML Islands scenarios are not supported in projects that target Any CPU.

    1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de la solution, puis sélectionnez Propriétés -> Propriétés de la configuration -> Gestionnaire de configurations.In Solution Explorer, right-click the solution node and select Properties -> Configuration Properties -> Configuration Manager.
    2. Sous Plateforme de la solution active, sélectionnez Nouveau.Under Active solution platform, select New.
    3. Dans la boîte de dialogue Nouvelle plateforme de solution, sélectionnez x64 ou x86, puis appuyez sur OK.In the New Solution Platform dialog, select x64 or x86 and press OK.
    4. Fermez les boîtes de dialogue ouvertes.Close the open dialog boxes.

Définir une classe XamlApplication dans un projet d’application UWPDefine a XamlApplication class in a UWP app project

Ensuite, ajoutez un projet d’application UWP à votre solution et modifiez la classe App par défaut de ce projet afin de la dériver de la classe Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication fournie par le Windows Community Toolkit.Next, add a UWP app project to your solution and revise the default App class in this project to derive from the Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication class provided by the Windows Community Toolkit. Cette classe prend en charge l’interface IXamlMetadaraProvider, qui permet à votre application de découvrir et de charger des métadonnées pour les contrôles XAML UWP personnalisés dans les assemblys du répertoire actif de votre application au moment de l’exécution.This class supports the IXamlMetadaraProvider interface, which enables your app to discover and load metadata for custom UWP XAML controls in assemblies in the current directory of your application at run time. Cette classe initialise également le framework XAML UWP pour le thread actuel.This class also initializes the UWP XAML framework for the current thread.

Notes

Même si cette étape n’est pas nécessaire pour héberger un contrôle XAML WinRT interne, votre application a besoin de l’objet XamlApplication pour prendre en charge l’ensemble des scénarios XAML Islands, y compris l’hébergement des contrôles XAML WinRT personnalisés.Although this step isn't required for hosting a first-party WinRT XAML control, your app needs the XamlApplication object to support the full range of XAML Island scenarios, including hosting custom WinRT XAML controls. Ainsi, nous vous recommandons de toujours définir un objet XamlApplication dans une solution dans laquelle vous utilisez des îlots XAML.Therefore, we recommend that you always define a XamlApplication object in any solution in which you are using XAML Islands.

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de la solution, puis sélectionnez Ajouter -> Nouveau projet.In Solution Explorer, right-click the solution node and select Add -> New Project.

  2. Ajoutez un projet Application vide (Windows universelle) à votre solution.Add a Blank App (Universal Windows) project to your solution. Vérifiez que la version cible et la version minimale sont toutes les deux définies sur Windows 10 version 1903 (build 18362) ou ultérieure.Make sure the target version and minimum version are both set to Windows 10, version 1903 (Build 18362) or a later release.

  3. Dans le projet d’application UWP, installez le package NuGet Microsoft.Toolkit.Win32.UI.XamlApplication (la dernière version stable).In the UWP app project, install the Microsoft.Toolkit.Win32.UI.XamlApplication NuGet package (latest stable version).

  4. Ouvrez le fichier App.xaml et remplacez le contenu de ce fichier par le code XAML suivant.Open the App.xaml file and replace the contents of this file with the following XAML. Remplacez MyUWPApp par l’espace de noms de votre projet d’application UWP.Replace MyUWPApp with the namespace of your UWP app project.

    <xaml:XamlApplication
        x:Class="MyUWPApp.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost"
        xmlns:local="using:MyUWPApp">
    </xaml:XamlApplication>
    
  5. Ouvrez le fichier App.xaml.cs et remplacez le contenu de ce fichier par le code suivant.Open the App.xaml.cs file and replace the contents of this file with the following code. Remplacez MyUWPApp par l’espace de noms de votre projet d’application UWP.Replace MyUWPApp with the namespace of your UWP app project.

    namespace MyUWPApp
    {
        public sealed partial class App : Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication
        {
            public App()
            {
                this.Initialize();
            }
        }
    }
    
  6. Supprimez le fichier MainPage.xaml du projet d’application UWP.Delete the MainPage.xaml file from the UWP app project.

  7. Générez le projet d’application UWP.Build the UWP app project.

Dans votre projet WPF, ajoutez une référence à votre projet d’application UWP.Add a reference to the UWP project in your WPF project

  1. Spécifiez la version de framework compatible dans le fichier projet WPF.Specify the compatible framework version in the WPF project file.

    1. Dans l’Explorateur de solutions, double-cliquez sur le nœud de projet WPF pour ouvrir le fichier projet dans l’éditeur.In Solution Explorer, double-click the WPF project node to open the project file in the editor.

    2. Dans le premier élément PropertyGroup, ajoutez l’élément enfant suivant.In the first PropertyGroup element, add the following child element. Modifiez la partie 19041 de la valeur si nécessaire, pour qu’elle corresponde à la version de système d’exploitation cible et minimale du projet UWP.Change the 19041 portion of the value as necessary to match the target and minimum OS build of the UWP project.

      <AssetTargetFallback>uap10.0.19041</AssetTargetFallback>
      

      Une fois que vous avez terminé, l’élément PropertyGroup doit ressembler à ceci :When you're done, the PropertyGroup element should look similar to this.

      <PropertyGroup>
          <OutputType>WinExe</OutputType>
          <TargetFramework>netcoreapp3.1</TargetFramework>
          <UseWPF>true</UseWPF>
          <Platforms>AnyCPU;x64</Platforms>
          <AssetTargetFallback>uap10.0.19041</AssetTargetFallback>
      </PropertyGroup>
      
  2. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud Dépendances sous le projet WPF, puis ajoutez une référence à votre projet d’application UWP.In Solution Explorer, right-click the Dependencies node under the WPF project and add a reference to your UWP app project.

Instancier l’objet XamlApplication dans le point d’entrée de votre application WPFInstantiate the XamlApplication object in the entry point of your WPF app

Ensuite, ajoutez du code au point d’entrée de votre application WPF pour créer une instance de la classe App que vous venez de définir dans le projet UWP (il s’agit de la classe qui dérive maintenant de XamlApplication).Next, add code to the entry point for your WPF app to create an instance of the App class you just defined in the UWP project (this is the class that now derives from XamlApplication).

  1. Dans votre projet WPF, cliquez avec le bouton droit sur le nœud du projet, sélectionnez Ajouter -> Nouvel élément, puis sélectionnez Classe.In your WPF project, right-click the project node, select Add -> New Item, and then select Class. Nommez la classe Program, puis cliquez sur Ajouter.Name the class Program and click Add.

  2. Remplacez la classe Program générée par le code suivant, puis enregistrez le fichier.Replace the generated Program class with the following code and then save the file. Remplacez MyUWPApp par l’espace de noms de votre projet d’application UWP, puis remplacez MyWPFApp par l’espace de noms de votre projet d’application WPF.Replace MyUWPApp with the namespace of your UWP app project, and replace MyWPFApp with the namespace of your WPF app project.

    public class Program
    {
        [System.STAThreadAttribute()]
        public static void Main()
        {
            using (new MyUWPApp.App())
            {
                MyWPFApp.App app = new MyWPFApp.App();
                app.InitializeComponent();
                app.Run();
            }
        }
    }
    
  3. Cliquez avec le bouton droit sur le nœud du projet, puis choisissez Propriétés.Right-click the project node and choose Properties.

  4. Sous l’onglet Application des propriétés, cliquez sur la liste déroulante Objet de démarrage et choisissez le nom qualifié complet de la classe Program que vous avez ajoutée à l’étape précédente.On the Application tab of the properties, click the Startup object drop-down and choose the fully qualified name of the Program class you added in the previous step.

    Notes

    Par défaut, les projets WPF définissent une fonction de point d’entrée Main dans un fichier de code généré qui n’est pas destiné à être modifié.By default, WPF projects define a Main entry point function in a generated code file that isn't intended to be modified. Cette étape remplace le point d’entrée de votre projet par la méthode Main de la nouvelle classe Program, ce qui vous permet d’ajouter du code qui s’exécute aussi tôt que possible dans le processus de démarrage de l’application.This step changes the entry point for your project to the Main method of the new Program class, which enables you to add code that runs as early in the startup process of the app as possible.

  5. Enregistrez les modifications apportées aux propriétés du projet.Save your changes to the project properties.

Héberger un InkCanvas et un InkToolbar à l’aide de contrôles wrappésHost an InkCanvas and InkToolbar by using wrapped controls

Votre projet étant configuré pour utiliser UWP XAML Islands, vous pouvez ajouter à l’application les contrôles XAML WinRT wrappés InkCanvas et InkToolbar.Now that you have configured your project to use UWP XAML Islands, you are now ready to add the InkCanvas and InkToolbar wrapped WinRT XAML controls to the app.

  1. Dans votre projet WPF, ouvrez le fichier MainWindow.xaml.In your WPF project, open the MainWindow.xaml file.

  2. Dans l’élément Window vers le début du fichier XAML, ajoutez l’attribut suivant.In the Window element near the top of the XAML file, add the following attribute. Ce dernier référence l’espace de noms XAML pour les contrôles XAML WinRT wrappés InkCanvas et InkToolbar.This references the XAML namespace for the InkCanvas and InkToolbar wrapped WinRT XAML control.

    xmlns:Controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
    

    Une fois cet attribut ajouté, l’élément Window doit ressembler à ce qui suit.After adding this attribute, the Window element should now look similar to this.

    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp"
            xmlns:Controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
            x:Class="WpfApp.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="800" Width="800">
    
  3. Dans le fichier MainWindow.xaml, remplacez l’élément <Grid> existant par le code XAML suivant.In the MainWindow.xaml file, replace the existing <Grid> element with the following XAML. Ce code XAML ajoute à l’élément <Grid> un contrôle InkCanvas et un contrôle InkToolbar (préfixés par le mot clé Controls que vous avez défini en tant qu’espace de noms).This XAML adds an InkCanvas and InkToolbar control (prefixed by the Controls keyword you defined earlier as a namespace) to the <Grid>.

    <Grid Margin="10,50,10,10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Controls:InkToolbar x:Name="myInkToolbar" TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" Width="300"
            Height="50" Margin="10,10,10,10" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" HorizontalAlignment="Left" Width="600" Height="400"
            Margin="10,10,10,10" VerticalAlignment="Top" />
    </Grid>
    

    Notes

    Vous pouvez également ajouter ces contrôles wrappés à la fenêtre en les faisant glisser depuis la section Windows Community Toolkit de la Boîte à outils vers le concepteur.You can also add these and other wrapped controls to the window by dragging them from the Windows Community Toolkit section of the Toolbox to the designer.

  4. Enregistrez le fichier MainWindow.xaml.Save the MainWindow.xaml file.

    Si vous avez un appareil qui prend en charge un stylet numérique, tel qu’une Surface, et que vous suivez ce labo sur un ordinateur physique, vous pouvez maintenant générer et exécuter l’application et dessiner avec de l’encre numérique sur l’écran au moyen du stylet.If you have a device which supports a digital pen, like a Surface, and you're running this lab on a physical machine, you could now build and run the app and draw digital ink on the screen with the pen. Toutefois, si vous n’avez pas d’appareil avec stylet et que vous essayez de signer avec la souris, rien ne se produit.However, if you don't have a pen capable device and you try to sign with your mouse, nothing will happen. En effet, le contrôle InkCanvas est activé uniquement pour les stylets numériques par défaut.This is happening because the InkCanvas control is enabled only for digital pens by default. Cependant, vous pouvez changer ce comportement.However, you can change this behavior.

  5. Ouvrez le fichier MainWindow.xaml.cs.Open the MainWindow.xaml.cs file.

  6. Ajoutez la déclaration d’espace de noms suivante au début du fichier :Add the following namespace declaration at the top of the file:

    using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;
    
  7. Recherchez le constructeur MainWindow().Locate the MainWindow() constructor. Ajoutez la ligne de code suivante après la méthode InitializeComponent() et enregistrez le fichier de code.Add the following line of code after the InitializeComponent() method and save the code file.

    this.myInkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;
    

    Vous pouvez utiliser l’objet InkPresenter pour personnaliser l’expérience d’entrée manuscrite par défaut.You can use the InkPresenter object to customize the default inking experience. Ce code utilise la propriété InputDeviceTypes pour permettre l’entrée avec la souris comme avec le stylet.This code uses the InputDeviceTypes property to enable mouse as well as pen input.

  8. Appuyez sur F5 pour regénérer et exécuter l’application dans le débogueur.Press F5 again to rebuild and run the app in the debugger. Si vous utilisez un ordinateur avec une souris, vérifiez que vous pouvez utiliser cette dernière pour dessiner un élément dans l’espace du canevas d’encre.If you're using a computer with a mouse, confirm that you can draw something in the ink canvas space with the mouse.

Héberger un CalendarView à l’aide du contrôle hôteHost a CalendarView by using the host control

Les contrôles XAML WinRT wrappés InkCanvas et InkToolbar étant ajoutés à l’application, vous pouvez utiliser le contrôle WindowsXamlHost pour ajouter un CalendarView à l’application.Now that you have added the InkCanvas and InkToolbar wrapped WinRT XAML controls to the app, you are now ready to use the WindowsXamlHost control to add a CalendarView to the app.

Notes

Le contrôle WindowsXamlHost est fourni par le package Microsoft.Toolkit.Wpf.UI.XamlHost.The WindowsXamlHost control is provided by the Microsoft.Toolkit.Wpf.UI.XamlHost package. Ce package est inclus dans le package Microsoft.Toolkit.Wpf.UI.Controls que vous avez installé.This package is included with the Microsoft.Toolkit.Wpf.UI.Controls package you installed earlier.

  1. Dans l’Explorateur de solutions, ouvrez le fichier MainWindow.xaml.In Solution Explorer, open the MainWindow.xaml file.

  2. Dans l’élément Window vers le début du fichier XAML, ajoutez l’attribut suivant.In the Window element near the top of the XAML file, add the following attribute. Ce dernier référence l’espace de noms XAML pour le contrôle WindowsXamlHost.This references the XAML namespace for the WindowsXamlHost control.

    xmlns:xamlhost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
    

    Une fois cet attribut ajouté, l’élément Window doit ressembler à ce qui suit.After adding this attribute, the Window element should now look similar to this.

    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp"
            xmlns:Controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
            xmlns:xamlhost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
            x:Class="WpfApp.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="800" Width="800">
    
  3. Dans le fichier MainWindow.xaml, remplacez l’élément <Grid> existant par le code XAML suivant.In the MainWindow.xaml file, replace the existing <Grid> element with the following XAML. Ce code XAML ajoute une ligne à la grille et ajoute un objet WindowsXamlHost à la dernière ligne.This XAML adds a row to the grid and adds a WindowsXamlHost object to the last row. Pour héberger un contrôle CalendarView UWP, ce code XAML définit la propriété InitialTypeName sur le nom qualifié complet du contrôle.To host a UWP CalendarView control, this XAML sets the InitialTypeName property to the fully qualified name of the control. Ce code XAML définit également un gestionnaire d’événements pour l’événement ChildChanged, qui est déclenché une fois le contrôle hébergé affiché.This XAML also defines an event handler for the ChildChanged event, which is raised when the hosted control has been rendered.

    <Grid Margin="10,50,10,10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Controls:InkToolbar x:Name="myInkToolbar" TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" Width="300"
            Height="50" Margin="10,10,10,10" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" HorizontalAlignment="Left" Width="600" Height="400" 
            Margin="10,10,10,10" VerticalAlignment="Top" />
        <xamlhost:WindowsXamlHost x:Name="myCalendar" InitialTypeName="Windows.UI.Xaml.Controls.CalendarView" Grid.Row="2" 
              Margin="10,10,10,10" Width="600" Height="300" ChildChanged="MyCalendar_ChildChanged"  />
    </Grid>
    
  4. Enregistrez le fichier MainWindow.xaml et ouvrez le fichier MainWindow.xaml.cs.Save the MainWindow.xaml file and open the MainWindow.xaml.cs file.

  5. Ajoutez la déclaration d’espace de noms suivante au début du fichier :Add the following namespace declaration at the top of the file:

    using Microsoft.Toolkit.Wpf.UI.XamlHost;
    
  6. Ajoutez la méthode de gestionnaire d’événements ChildChanged suivante à la classe MainWindow, puis enregistrez le fichier de code.Add the following ChildChanged event handler method to the MainWindow class and save the code file. Une fois le contrôle hôte affiché, ce gestionnaire d’événements s’exécute et crée un gestionnaire d’événements simple pour l’événement SelectedDatesChanged du contrôle calendrier.When the host control has been rendered, this event handler runs and creates a simple event handler for the SelectedDatesChanged event of the calendar control.

    private void MyCalendar_ChildChanged(object sender, EventArgs e)
    {
        WindowsXamlHost windowsXamlHost = (WindowsXamlHost)sender;
    
        Windows.UI.Xaml.Controls.CalendarView calendarView =
            (Windows.UI.Xaml.Controls.CalendarView)windowsXamlHost.Child;
    
        if (calendarView != null)
        {
            calendarView.SelectedDatesChanged += (obj, args) =>
            {
                if (args.AddedDates.Count > 0)
                {
                    MessageBox.Show("The user selected a new date: " + 
                        args.AddedDates[0].DateTime.ToString());
                }
            };
        }
    }
    
  7. Appuyez sur F5 pour regénérer et exécuter l’application dans le débogueur.Press F5 again to rebuild and run the app in the debugger. Vérifiez que le contrôle calendrier s’affiche maintenant en bas de la fenêtre.Confirm that the calendar control now displays on the bottom of the window.

Empaqueter l’applicationPackage the app

Vous pouvez empaqueter l’application WPF dans un package MSIX pour la déployer.You can optionally package the WPF app in an MSIX package for deployment. MSIX est une technologie d’empaquetage moderne pour Windows, basée sur une combinaison des technologies d’installation MSI, .appx, App-V et ClickOnce.MSIX is the modern app packaging technology for Windows, and it is based on a combination of MSI, .appx, App-V and ClickOnce installation technologies.

Les instructions suivantes montrent comment empaqueter tous les composants de la solution dans un package MSIX en utilisant le Projet de création de package d’application Windows dans Visual Studio 2019.The following instructions show you how to package the all the components in the solution in an MSIX package by using the Windows Application Packaging Project in Visual Studio 2019. Ces étapes sont nécessaires uniquement si vous souhaitez empaqueter l’application WPF dans un package MSIX.These steps are necessary only if you want to package the WPF app in an MSIX package.

Notes

Si vous choisissez de ne pas empaqueter votre application dans un package MSIX pour la déployer, Visual C++ Runtime doit être installé sur les ordinateurs qui exécutent votre application.If you choose to not package your application in an MSIX package for deployment, computers that run your app must have the Visual C++ Runtime installed.

  1. Ajoutez un nouveau projet d’empaquetage d’application Windows à votre solution.Add a new Windows Application Packaging Project to your solution. À mesure que vous créez le projet, sélectionnez Windows 10, version 1903 (10.0; Build 18362) pour la Version cible et la Version minimale.As you create the project, select Windows 10, version 1903 (10.0; Build 18362) for both the Target version and Minimum version.

  2. Dans le projet d’empaquetage, cliquez avec le bouton droit sur le nœud Applications, puis choisissez Ajouter une référence.In the packaging project, right-click the Applications node and choose Add reference. Dans la liste des projets, sélectionnez le projet WPF dans votre solution, puis cliquez sur OK.In the list of projects, select the WPF project in your solution and click OK.

  3. Configurez votre solution afin qu’elle cible une plateforme spécifique, telle que x86 ou x64.Configure your solution to target a specific platform such as x86 or x64. Cette opération est nécessaire pour générer l’application WPF dans un package MSIX à l’aide du projet de création de packages d’applications Windows.This is required to build the WPF app into an MSIX package using the Windows Application Packaging Project.

    1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de la solution, puis sélectionnez Propriétés -> Propriétés de la configuration -> Gestionnaire de configurations.In Solution Explorer, right-click the solution node and select Properties -> Configuration Properties -> Configuration Manager.
    2. Sous Plateforme de la solution active, sélectionnez x64 ou x86.Under Active solution platform, select x64 or x86.
    3. Dans la ligne de votre projet WPF, dans la colonne Plateforme, sélectionnez Nouveau.In the row for your WPF project, in the Platform column select New.
    4. Dans la boîte de dialogue Nouvelle plateforme de solution, sélectionnez x64 ou x86 (la même plateforme que celle que vous avez sélectionnée pour Plateforme de la solution active), puis cliquez sur OK.In the New Solution Platform dialog, select x64 or x86 (the same platform you selected for Active solution platform) and click OK.
    5. Fermez les boîtes de dialogue ouvertes.Close the open dialog boxes.
  4. Générez et exécutez le projet d’empaquetage.Build and run the packaging project. Vérifiez que l’application WPF s’exécute et que le contrôle personnalisé UWP s’affiche comme prévu.Confirm that the WPF runs and the UWP custom control displays as expected.