Hospedar um controle WinRT XAML personalizado em um aplicativo WPF usando as Ilhas XAMLHost a custom WinRT XAML control in a WPF app using XAML Islands

Este artigo demonstra como usar o controle WindowsXamlHost no Windows Community Toolkit para hospedar um controle WinRT XAML personalizado em um aplicativo WPF direcionado ao .NET Core 3.1.This article demonstrates how to use the WindowsXamlHost control in the Windows Community Toolkit to host a custom WinRT XAML control in a WPF app that targets .NET Core 3.1. O controle personalizado contém vários controles internos da SDK do Windows e associa uma propriedade em um dos controles WinRT XAML a uma cadeia de caracteres no aplicativo WPF.The custom control contains several first-party controls from the Windows SDK and binds a property in one of the WinRT XAML controls to a string in the WPF app. Este artigo também demonstra como hospedar um controle da biblioteca WinUI.This article also demonstrates how to also host a control from the WinUI library.

Embora este artigo demonstre como fazer isso em um aplicativo WPF, o processo é semelhante para um aplicativo do Windows Forms.Although this article demonstrates how to do this in a WPF app, the process is similar for a Windows Forms app. Para uma visão geral sobre a hospedagem de controles WinRT XAML em aplicativos WPF e do Windows Forms, confira este artigo.For an overview about hosting WinRT XAML controls in WPF and Windows Forms apps, see this article.

Componentes necessáriosRequired components

Para hospedar um controle WinRT XAML personalizado em um aplicativo WPF (ou do Windows Forms), você precisará dos componentes a seguir em sua solução.To host a custom WinRT XAML control in a WPF (or Windows Forms) app, you'll need the following components in your solution. Este artigo fornece instruções para criar cada um desses componentes.This article provides instructions for creating each of these components.

  • O projeto e o código-fonte para seu aplicativo.The project and source code for your app. O uso do controle WindowsXamlHost para hospedar controles personalizados só é compatível com aplicativos direcionados ao .NET Core 3.x.Using the WindowsXamlHost control to host custom controls is supported only in apps that target .NET Core 3.x. Esse cenário não é compatível com aplicativos direcionados ao .NET Framework.This scenario is not supported in apps that target the .NET Framework.

  • O controle WinRT XAML personalizado.The custom WinRT XAML control. Você precisará do código-fonte do controle personalizado que deseja hospedar para compilá-lo com seu aplicativo.You'll need the source code for the custom control you want to host so you can compile it with your app. Normalmente, o controle personalizado é definido em um projeto de biblioteca de classes UWP que você faz referência na mesma solução que o seu projeto do WPF ou Windows Forms.Typically, the custom control is defined in a UWP class library project that you reference in the same solution as your WPF or Windows Forms project.

  • Um projeto de aplicativo UWP que define uma Classe de aplicativo raiz que deriva de XamlApplication.A UWP app project that defines a root Application class that derives from XamlApplication. Seu projeto do WPF ou do Windows Forms deve ter acesso a uma instância da classe Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication fornecida pelo Windows Community Toolkit para que ele possa descobrir e carregar controles XAML personalizados da UWP.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. A maneira recomendada para fazer isso é definir esse objeto em um projeto de aplicativo UWP separado que faça parte da solução do seu aplicativo 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.

    Observação

    Sua solução pode conter apenas um projeto que define um objeto XamlApplication.Your solution can contain only one project that defines a XamlApplication object. Todos os controles WinRT XAML personalizados no aplicativo compartilham o objeto XamlApplication.All custom WinRT XAML controls in your app share the same XamlApplication object. O projeto que define o objeto XamlApplication precisa incluir referências a todas as outras bibliotecas WinRT e projetos usados para hospedar controles na Ilha XAML.The project that defines the XamlApplication object must include references to all other WinRT libraries and projects that are used host to controls on the XAML Island.

Criar um projeto do WPFCreate a WPF project

Antes de começar, siga estas instruções para criar um projeto do WPF e configurá-lo para hospedar Ilhas XAML.Before getting started, follow these instructions to create a WPF project and configure it to host XAML Islands. Se você já tiver um projeto do WPF, poderá adaptar essas etapas e exemplos de código para seu projeto.If you have an existing WPF project, you can adapt these steps and code examples for your project.

Observação

Se você já tiver um projeto que se destina ao .NET Framework, precisará migrá-lo para o .NET Core 3.1.If you have an existing project that targets the .NET Framework, you'll need to migrate your project to .NET Core 3.1. Para obter mais informações, confira esta série do blog.For more information, see this blog series.

  1. Caso ainda não tenha feito, instale a versão mais recente do SDK do .NET Core 3.1.If you haven't done so already, install the latest version of the .NET Core 3.1 SDK.

  2. No Visual Studio 2019, crie um projeto Aplicativo WPF (.NET Core) .In Visual Studio 2019, create a new WPF App (.NET Core) project.

  3. Verifique se as referências de pacote estão habilitadas:Make sure package references are enabled:

    1. No Visual Studio, clique em Ferramentas -> Gerenciador de Pacotes NuGet -> Configurações do Gerenciador de Pacotes.In Visual Studio, click Tools -> NuGet Package Manager -> Package Manager Settings.
    2. Verifique se PackageReference está selecionado para Formato de gerenciamento de pacotes padrão.Make sure PackageReference is selected for Default package management format.
  4. Clique com o botão direito do mouse no seu projeto do WPF no Gerenciador de Soluções e escolha Gerenciar Pacotes NuGet.Right-click your WPF project in Solution Explorer and choose Manage NuGet Packages.

  5. Selecione a guia Procurar, pesquise o pacote Microsoft.Toolkit.Wpf.UI.XamlHost e instale a versão estável mais recente.Select the Browse tab, search for the Microsoft.Toolkit.Wpf.UI.XamlHost package and install the latest stable version. Esse pacote fornece tudo o que você precisa para usar o controle WindowsXamlHost para hospedar um controle WinRT XAML, incluindo outros pacotes NuGet relacionados.This package provides everything you need to use the WindowsXamlHost control to host a WinRT XAML control, including other related NuGet packages.

    Observação

    Os aplicativos do Windows Forms precisam usar o pacote Microsoft.Toolkit.Forms.UI.XamlHost.Windows Forms apps must use the Microsoft.Toolkit.Forms.UI.XamlHost package.

  6. Configure sua solução para destino a uma plataforma específica, como x86 ou x64.Configure your solution to target a specific platform such as x86 or x64. Os controles WinRT XAML personalizados não são compatíveis com projetos direcionados a Qualquer CPU.Custom WinRT XAML controls are not supported in projects that target Any CPU.

    1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó da solução e selecione Propriedades -> Propriedades de Configuração -> Gerenciador de Configurações.In Solution Explorer, right-click the solution node and select Properties -> Configuration Properties -> Configuration Manager.
    2. Em Plataforma da solução ativa, selecione Nova.Under Active solution platform, select New.
    3. Na caixa de diálogo Nova Plataforma de Solução, selecione x64 ou x86 e pressione OK.In the New Solution Platform dialog, select x64 or x86 and press OK.
    4. Feche as caixas de diálogo abertas.Close the open dialog boxes.

Definir uma classe XamlApplication em um projeto de aplicativo UWPDefine a XamlApplication class in a UWP app project

Agora, adicione um projeto de aplicativo UWP à sua solução e revise a classe App padrão neste projeto para derivar da classe Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication fornecida pelo 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. Essa classe dá suporte à interface IXamlMetadaraProvider, que permite que o aplicativo descubra e carregue metadados para controles XAML personalizados da UWP em assemblies no diretório atual do seu aplicativo em tempo de execução.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. Essa classe também inicializa a estrutura XAML da UWP para o thread atual.This class also initializes the UWP XAML framework for the current thread.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó da solução e selecione Adicionar -> Novo Projeto.In Solution Explorer, right-click the solution node and select Add -> New Project.

  2. Adicione um projeto Aplicativo em Branco (Universal do Windows) à sua solução.Add a Blank App (Universal Windows) project to your solution. Verifique se a versão de destino e a versão mínima estão definidas como Windows 10, versão 1903 (build 18362) ou uma versão posterior.Make sure the target version and minimum version are both set to Windows 10, version 1903 (Build 18362) or a later release.

  3. No projeto de aplicativo UWP, instale o pacote NuGet Microsoft.Toolkit.Win32.UI.XamlApplication (versão estável mais recente).In the UWP app project, install the Microsoft.Toolkit.Win32.UI.XamlApplication NuGet package (latest stable version).

  4. Abra o arquivo App.xaml e substitua o conteúdo desse arquivo pelo XAML a seguir.Open the App.xaml file and replace the contents of this file with the following XAML. Substitua MyUWPApp pelo namespace do seu projeto de aplicativo 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. Abra o arquivo App.xaml.cs e substitua o conteúdo desse arquivo pelo código a seguir.Open the App.xaml.cs file and replace the contents of this file with the following code. Substitua MyUWPApp pelo namespace do seu projeto de aplicativo 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. Exclua o arquivo MainPage.xaml do projeto de aplicativo UWP.Delete the MainPage.xaml file from the UWP app project.

  7. Limpe o projeto de aplicativo UWP e compile-o.Clean the UWP app project and then build it.

Adicionar uma referência ao projeto UWP em seu projeto WPFAdd a reference to the UWP project in your WPF project

  1. Especifique a versão de estrutura compatível no arquivo de projeto do WPF.Specify the compatible framework version in the WPF project file.

    1. No Gerenciador de Soluções, clique duas vezes no nó do projeto WPF para abrir o arquivo de projeto no editor.In Solution Explorer, double-click the WPF project node to open the project file in the editor.

    2. No primeiro elemento PropertyGroup, adicione o elemento filho a seguir.In the first PropertyGroup element, add the following child element. Altere a parte 19041 do valor conforme necessário para fazer a correspondência com o build de SO de destino e mínimo do projeto 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>
      

      Quando você terminar, o elemento PropertyGroup deverá ser semelhante a este.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. No Gerenciador de Soluções, clique com o botão direito do mouse no nó Dependências no projeto WPF e adicione uma referência ao seu projeto de aplicativo UWP.In Solution Explorer, right-click the Dependencies node under the WPF project and add a reference to your UWP app project.

Criar uma instância do objeto XamlApplication no ponto de entrada do aplicativo WPFInstantiate the XamlApplication object in the entry point of your WPF app

Em seguida, adicione o código ao ponto de entrada do aplicativo WPF para criar uma instância da classe App que você acabou de definir no projeto UWP (essa é a classe que agora é derivada 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. No projeto do WPF, clique com o botão direito do mouse no nó do projeto, selecione Adicionar -> Novo item e, em seguida, selecione Classe.In your WPF project, right-click the project node, select Add -> New Item, and then select Class. Nomeie a classe como Programa e clique em Adicionar.Name the class Program and click Add.

  2. Substitua a classe Program gerada pelo código a seguir e salve o arquivo.Replace the generated Program class with the following code and then save the file. Substitua MyUWPApp pelo namespace do seu projeto de aplicativo UWP e substitua MyWPFApp pelo namespace do seu projeto de aplicativo 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. Clique com o botão direito do mouse no nó do projeto e escolha Propriedades.Right-click the project node and choose Properties.

  4. Na guia Aplicativo das propriedades, clique na lista suspensa Objeto de inicialização e escolha o nome totalmente qualificado da classe Program que você adicionou na etapa anterior.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.

    Observação

    Por padrão, os projetos do WPF definem uma função de ponto de entrada Main em um arquivo de código gerado que não deve ser modificado.By default, WPF projects define a Main entry point function in a generated code file that isn't intended to be modified. Essa etapa altera o ponto de entrada do seu projeto para o método Main da nova classe Program, o que permite que você adicione o código que é executado o quanto antes no processo de inicialização do aplicativo.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. Salve as alterações que você fez nas propriedades do projeto.Save your changes to the project properties.

Criar um controle WinRT XAML personalizadoCreate a custom WinRT XAML control

Para hospedar um controle WinRT XAML personalizado em seu aplicativo WPF, você precisa ter o código-fonte do controle para que possa compilá-lo com o aplicativo.To host a custom WinRT XAML control in your WPF app, you must have the source code for the control so you can compile it with your app. Normalmente, os controles personalizados são definidos em um projeto de biblioteca de classes UWP para uma portabilidade mais fácil.Typically custom controls are defined in a UWP class library project for easy portability.

Nesta seção, você definirá um controle personalizado simples em um novo projeto de biblioteca de classes.In this section, you will define a simple custom control in a new class library project. Como alternativa, você pode definir o controle personalizado no projeto de aplicativo UWP criado na seção anterior.You can alternatively define the custom control in the UWP app project you created in the previous section. No entanto, essas etapas fazem isso em outro projeto de biblioteca de classes para fins ilustrativos, pois normalmente é assim que os controles personalizados são implementados para portabilidade.However, these steps do this in a separate class library project for illustrative purposes because this is typically how custom controls are implemented for portability.

Se você já tem um controle personalizado, pode usá-lo em vez do controle mostrado aqui.If you already have a custom control, you can use it instead of the control shown here. No entanto, ainda precisará configurar o projeto que contém o controle, conforme mostrado nestas etapas.However, you'll still need to configure the project that contains the control as shown in these steps.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nó da solução e selecione Adicionar -> Novo Projeto.In Solution Explorer, right-click the solution node and select Add -> New Project.

  2. Adicione um projeto Biblioteca de Classes (Universal do Windows) à sua solução.Add a Class Library (Universal Windows) project to your solution. Verifique se a versão de destino e a versão mínima estão definidas como o mesmo build de SO de destino e mínimo que o projeto UWP.Make sure the target version and minimum version are both set to the same target and minimum OS build as the UWP project.

  3. Clique com o botão direito do mouse no arquivo de projeto e selecione Descarregar Projeto.Right-click the project file and select Unload Project. Clique com o botão direito do mouse no arquivo de projeto novamente e selecione Editar.Right-click the project file again and select Edit.

  4. Antes do elemento de fechamento </Project>, adicione o XML a seguir para desabilitar algumas propriedades e, em seguida, salve o arquivo de projeto.Before the closing </Project> element, add the following XML to disable several properties and then save the project file. Essas propriedades devem ser habilitadas para hospedar o controle personalizado em um aplicativo WPF (ou do Windows Forms).These properties must be enabled to host the custom control in a WPF (or Windows Forms) app.

    <PropertyGroup>
      <EnableTypeInfoReflection>false</EnableTypeInfoReflection>
      <EnableXBindDiagnostics>false</EnableXBindDiagnostics>
    </PropertyGroup>
    
  5. Clique com o botão direito do mouse no arquivo de projeto e selecione Recarregar Projeto.Right-click the project file and select Reload Project.

  6. Exclua o arquivo padrão Class1.cs e adicione um novo item Controle de Usuário ao projeto.Delete the default Class1.cs file and add a new User Control item to the project.

  7. No arquivo XAML do controle de usuário, adicione o StackPanel a seguir como um filho do Grid padrão.In the XAML file for the user control, add the following StackPanel as a child of the default Grid. Este exemplo adiciona um controle TextBlock e associa o atributo Text do controle ao campo XamlIslandMessage.This example adds a TextBlock control and then binds the Text attribute of that control to the XamlIslandMessage field.

    <StackPanel Background="LightCoral">
        <TextBlock>This is a simple custom WinRT XAML control</TextBlock>
        <Rectangle Fill="Blue" Height="100" Width="100"/>
        <TextBlock Text="{x:Bind XamlIslandMessage}" FontSize="50"></TextBlock>
    </StackPanel>
    
  8. No arquivo code-behind do controle de usuário, adicione o campo XamlIslandMessage à classe de controle de usuário, conforme mostrado abaixo.In the code-behind file for the user control, add the XamlIslandMessage field to the user control class as shown below.

    public sealed partial class MyUserControl : UserControl
    {
        public string XamlIslandMessage { get; set; }
    
        public MyUserControl()
        {
            this.InitializeComponent();
        }
    }
    
  9. Compile o projeto de biblioteca de classes UWP.Build the UWP class library project.

  10. No projeto do WPF, clique com o botão direito do mouse no nó Dependências e adicione uma referência ao projeto de biblioteca de classes UWP.In your WPF project, right-click the Dependencies node and add a reference to the UWP class library project.

  11. No projeto de aplicativo UWP que você configurou anteriormente, clique com o botão direito do mouse no nó Referências e adicione uma referência ao projeto de biblioteca de classes UWP.In the UWP app project you configured earlier, right-click the References node and add a reference to the UWP class library project.

  12. Recompile toda a solução e verifique se todos os projetos serão compilados com êxito.Rebuild the entire solution and make sure all the projects build successfully.

Hospedar o controle WinRT XAML personalizado em seu aplicativo WPFHost the custom WinRT XAML control in your WPF app

  1. No Gerenciador de Soluções, expanda o projeto do WPF e abra o arquivo MainWindow.xaml ou alguma outra janela na qual você deseja hospedar o controle personalizado.In Solution Explorer, expand the WPF project and open the MainWindow.xaml file or some other window in which you want to host the custom control.

  2. No arquivo XAML, adicione a declaração a seguir de namespace ao elemento <Window>.In the XAML file, add the following namespace declaration to the <Window> element.

    xmlns:xaml="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
    
  3. No mesmo arquivo, adicione o controle a seguir ao elemento <Grid>.In the same file, add the following control to the <Grid> element. Altere o atributo InitialTypeName para o nome totalmente qualificado do controle de usuário em seu projeto de biblioteca de classes UWP.Change the InitialTypeName attribute to the fully qualified name of the user control in your UWP class library project.

    <xaml:WindowsXamlHost InitialTypeName="UWPClassLibrary.MyUserControl" ChildChanged="WindowsXamlHost_ChildChanged" />
    
  4. Abra o arquivo code-behind e adicione o código a seguir à classe Window.Open the code-behind file and add the following code to the Window class. Esse código define um manipulador de eventos ChildChanged que atribui o valor do campo XamlIslandMessage do controle personalizado UWP ao valor do campo WPFMessage no aplicativo WPF.This code defines a ChildChanged event handler that assigns the value of the XamlIslandMessage field of the UWP custom control to the value of the WPFMessage field in the WPF app. Altere UWPClassLibrary.MyUserControl para o nome totalmente qualificado do controle de usuário em seu projeto de biblioteca de classes UWP.Change UWPClassLibrary.MyUserControl to the fully qualified name of the user control in your UWP class library project.

    private void WindowsXamlHost_ChildChanged(object sender, EventArgs e)
    {
        // Hook up x:Bind source.
        global::Microsoft.Toolkit.Wpf.UI.XamlHost.WindowsXamlHost windowsXamlHost =
            sender as global::Microsoft.Toolkit.Wpf.UI.XamlHost.WindowsXamlHost;
        global::UWPClassLibrary.MyUserControl userControl =
            windowsXamlHost.GetUwpInternalObject() as global::UWPClassLibrary.MyUserControl;
    
        if (userControl != null)
        {
            userControl.XamlIslandMessage = this.WPFMessage;
        }
    }
    
    public string WPFMessage
    {
        get
        {
            return "Binding from WPF to UWP XAML";
        }
    }
    
  5. Compile e execute seu aplicativo e confirme se o controle de usuário UWP é exibido conforme o esperado.Build and run your app and confirm that the UWP user control displays as expected.

Adicionar um controle da biblioteca WinUI 2.x ao controle personalizadoAdd a control from the WinUI 2.x library to the custom control

Tradicionalmente, os controles WinRT XAML foram lançados como parte do sistema operacional Windows 10 e disponibilizados para os desenvolvedores por meio do SDK do Windows.Traditionally, WinRT XAML controls have been released as part of the Windows 10 OS and made available to developers through the Windows SDK. A biblioteca WinUI é uma abordagem alternativa, em que as versões atualizadas dos controles WinRT XAML do SDK do Windows são distribuídas em um pacote NuGet que não está vinculado às versões de SDK do Windows.The WinUI library is an alternative approach, where updated versions of WinRT XAML controls from the Windows SDK are distributed in a NuGet package that is not tied to Windows SDK releases. Essa biblioteca também inclui novos controles que não fazem parte do SDK do Windows e da plataforma UWP padrão.This library also includes new controls that aren't part of the Windows SDK and the default UWP platform. Confira nosso roteiro da biblioteca WinUI para obter mais detalhes.See our WinUI library roadmap for more details.

Esta seção demonstra como adicionar um controle WinRT XAML da biblioteca WinUI 2.x ao seu controle de usuário.This section demonstrates how to add a WinRT XAML control from the WinUI 2.x library to your user control.

Observação

No momento, as Ilhas XAML dão suporte apenas a controles de hospedagem da biblioteca WinUI 2.x.Currently, XAML Islands only supports hosting controls from the WinUI 2.x library. O suporte para controles de hospedagem da Biblioteca WinUI 3 será disponibilizado em uma versão posterior.Support for hosting controls from the WinUI 3 library is coming in a later release.

  1. No projeto do aplicativo da UWP, instale a versão de lançamento ou pré-lançamento mais recente do pacote NuGet Microsoft.UI.Xaml.In the UWP app project, install the latest release or prerelease version of the Microsoft.UI.Xaml NuGet package.

    Observação

    Se seu aplicativo da área de trabalho estiver empacotado em um pacote MSIX, será possível usar uma versão de pré-lançamento ou de lançamento do pacote NuGet Microsoft.UI.Xaml.If your desktop app is packaged in an MSIX package, you can use either a prerelease or release version of the Microsoft.UI.Xaml NugGet package. Se seu aplicativo da área de trabalho não estiver empacotado usando MSIX, será necessário instalar uma versão de pré-lançamento do pacote NuGet Microsoft.UI.Xaml.If your desktop app is not packaged using MSIX, you must install a prerelease version of the Microsoft.UI.Xaml NuGet package.

  2. No arquivo App.xaml deste projeto, adicione o elemento filho a seguir ao elemento <xaml:XamlApplication>.In the App.xaml file in this project, add the following child element to the <xaml:XamlApplication> element.

    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
    

    Depois de adicionar esse elemento, o conteúdo do arquivo agora deve ser semelhante a este.After adding this element, the contents of this file should now look similar to this.

    <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">
        <Application.Resources>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </Application.Resources>
    </xaml:XamlApplication>
    
  3. No projeto de biblioteca de classes UWP, instale a versão mais recente do pacote NuGet Microsoft.UI.Xaml (a mesma versão que você instalou no projeto do aplicativo UWP).In the UWP class library project, install the latest version of the Microsoft.UI.Xaml NuGet package (the same version that you installed in the UWP app project).

  4. No mesmo projeto, abra o arquivo XAML para o controle de usuário e adicione a declaração de namespace a seguir ao elemento <UserControl>.In the same project, open the XAML file for the user control and add the following namespace declaration to the <UserControl> element.

    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    
  5. No mesmo arquivo, adicione um elemento <winui:RatingControl /> como um filho do <StackPanel>.In the same file, add a <winui:RatingControl /> element as a child of the <StackPanel>. Esse elemento adiciona uma instância da classe RatingControl da biblioteca WinUI.This element adds an instance of the RatingControl class from the WinUI library. Depois de adicionar esse elemento, o <StackPanel> agora deve ficar com a aparência a seguir.After adding this element, the <StackPanel> should now look similar to this.

    <StackPanel Background="LightCoral">
        <TextBlock>This is a simple custom WinRT XAML control</TextBlock>
        <Rectangle Fill="Blue" Height="100" Width="100"/>
        <TextBlock Text="{x:Bind XamlIslandMessage}" FontSize="50"></TextBlock>
        <winui:RatingControl />
    </StackPanel>
    
  6. Compile e execute seu aplicativo e confirme se o novo controle de classificação é exibido conforme o esperado.Build and run your app and confirm that the new rating control displays as expected.

Empacotar o aplicativoPackage the app

Opcionalmente, você pode empacotar o aplicativo WPF em um pacote MSIX para implantação.You can optionally package the WPF app in an MSIX package for deployment. O MSIX é a tecnologia moderna de empacotamento de aplicativo para o Windows e se baseia em uma combinação das tecnologias de instalação MSI, .appx, App-V e 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.

As instruções a seguir mostram como empacotar todos os componentes da solução em um pacote MSIX usando o Projeto de Empacotamento de Aplicativo do Windows no 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. Essas etapas serão necessárias apenas se você quiser empacotar o aplicativo WPF em um pacote MSIX.These steps are necessary only if you want to package the WPF app in an MSIX package.

Observação

Se você optar por não empacotar seu aplicativo em um pacote MSIX para implantação, os computadores que executam o aplicativo precisarão ter o Runtime do Visual C++ instalado.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. Adicione um novo Projeto de Empacotamento de Aplicativo do Windows à solução.Add a new Windows Application Packaging Project to your solution. Quando você criar o projeto, selecione a mesma Versão de destino e a Versão mínima que você selecionou para o projeto UWP.As you create the project, select the same Target version and Minimum version as you selected for the UWP project.

  2. No projeto de empacotamento, clique com o botão direito do mouse no nó Aplicativos e escolha Adicionar referência.In the packaging project, right-click the Applications node and choose Add reference. Na lista de projetos, selecione o projeto do WPF em sua solução e clique em OK.In the list of projects, select the WPF project in your solution and click OK.

  3. Compile e execute o projeto de empacotamento.Build and run the packaging project. Confirme se o WPF é executado e se o controle personalizado UWP é exibido conforme o esperado.Confirm that the WPF runs and the UWP custom control displays as expected.