Tutorial: Modernizar um aplicativo WPFTutorial: Modernize a WPF app

Há várias maneiras de modernizar aplicativos da área de trabalho existentes integrando os recursos mais recentes do Windows ao código-fonte existente em vez de reescrever os aplicativos do zero.There are many ways to modernize existing desktop apps by integrating the latest Windows features into the existing source code instead of rewriting the apps from scratch. Neste tutorial, exploraremos várias maneiras de modernizar um aplicativo de linha de negócios existente do WPF usando estes recursos:In this tutorial we'll explore several ways to modernize an existing WPF line-of-business app by using these features:

  • .NET Core 3.NET Core 3
  • Controles XAML da UWP com Ilhas XAMLUWP XAML controls with XAML Islands
  • Cartões Adaptáveis e notificações do Windows 10Adaptive Cards and Windows 10 notifications
  • Implantação de MSIXMSIX deployment

Este tutorial requer as seguintes habilidades de desenvolvimento:This tutorial requires the following development skills:

  • Experiência no desenvolvimento de aplicativos da área de trabalho do Windows com o WPF.Experience in developing Windows desktop apps with WPF.
  • Conhecimento básico de C# e XAML.Basic knowledge of C# and XAML.
  • Conhecimento básico da UWP.Basic knowledge of UWP.

Visão geralOverview

Este tutorial fornece o código para um aplicativo de linha de negócios simples do WPF chamado Contoso Expenses.This tutorial provides the code for a simple WPF line-of-business app named Contoso Expenses. No cenário fictício do tutorial, o Contoso Expenses é um aplicativo interno usado pelos gerentes da Contoso Corporation para manter o controle das despesas enviadas por seus subordinados.In the fictional scenario of the tutorial, Contoso Expenses is an internal app used by managers of Contoso Corporation to keep track of the expenses submitted by their reports. Agora, os gerentes estão equipados com dispositivos habilitados para toque e gostariam de usar o aplicativo Contoso Expenses sem mouse e teclado.The managers are now equipped with touch-enabled devices, and they would like to use the Contoso Expenses app without a mouse or keyboard. Infelizmente, a versão atual do aplicativo não é amigável para controle por toque.Unfortunately, the current version of the app isn't touch friendly.

A Contoso deseja modernizar o aplicativo com novos recursos do Windows para permitir que os funcionários criem relatórios de despesas com mais eficiência.Contoso wants to modernize this app with new Windows features to enable employees to create expenses reports more efficiently. Muitos dos recursos podem ser facilmente implementados com a criação de um novo aplicativo UWP.Many of the features could be easily implemented by building a new UWP app. No entanto, o aplicativo existente é complexo e é resultado de muitos anos de desenvolvimento por equipes diferentes.However, the existing app is complex and is the result of many years of development by different teams. Sendo assim, reescrevê-lo do zero com uma nova tecnologia não é uma opção.As such, rewriting it from scratch with a new technology isn't an option. A equipe está buscando a melhor abordagem para adicionar recursos à base de código existente.The team is looking for the best approach to add new features into the existing codebase.

No início do tutorial, o Contoso Expenses tem como alvo o .NET Framework 4.7.2 e usa as seguintes bibliotecas de terceiros:At the beginning of the tutorial, Contoso Expenses targets the .NET Framework 4.7.2 and uses the following 3rd party libraries:

  • MVVM Light, uma implementação básica do padrão MVVM.MVVM Light, a basic implementation for the MVVM pattern.
  • Unity, um contêiner de injeção de dependência.Unity, a dependency injection container.
  • LiteDb, uma solução NoSQL inserida para armazenar os dados.LiteDb, an embedded NoSQL solution to store the data.
  • Bogus, uma ferramenta para gerar dados falsos.Bogus, a tool to generate fake data.

No tutorial, você aprimorará o Contoso Expenses com novos recursos do Windows:In the tutorial, you'll enhance Contoso Expenses with new Windows features:

  • Migrar um aplicativo do WPF para o .NET Core 3.0.Migrate an existing WPF app to .NET Core 3.0. Isso possibilitará cenários novos e importantes no futuro.This will open up new and important scenarios in the future.
  • Usar Ilhas XAML para hospedar os controles encapsulados InkCanvas e MapControl fornecidos pelo Windows Community Toolkit.Use XAML Islands to host the InkCanvas and MapControl wrapped controls provided by the Windows Community Toolkit.
  • Use Ilhas XAML para hospedar qualquer controle XAML padrão da UWP (nesse caso, um CalendardView).Use XAML Islands to host any standard UWP XAML control (in this case, a CalendardView).
  • Integrar Cartões Adaptáveis e notificações do Windows 10 ao aplicativo.Integrate Adaptive Cards and Windows 10 notifications into the app.
  • Empacote o aplicativo com MSIX e configure um pipeline de CI/CD no Azure DevOps para que você possa fornecer automaticamente novas versões do aplicativo para testadores e usuários assim que elas estiverem disponíveis.Package the app with MSIX and set up a CI/CD pipeline on Azure DevOps so that you can automatically deliver new versions of the app to testers and users as soon as it is available.

Pré-requisitosPrerequisites

Para executar este tutorial, o computador de desenvolvimento precisará ter estes pré-requisitos instalados:To perform this tutorial, your development computer must have these prerequisites installed:

Instale as seguintes cargas de trabalho e recursos opcionais com o Visual Studio 2019:Make sure you install the following workloads and optional features with Visual Studio 2019:

  • Desenvolvimento para Desktop com .NET.NET Desktop development
  • Desenvolvimento para a Plataforma Universal do WindowsUniversal Windows Platform development
  • SDK do Windows 10 (10.0.18362.0 ou posterior)Windows 10 SDK (10.0.18362.0 or later)

Obter o aplicativo de exemplo Contoso ExpensesGet the Contoso Expenses sample app

Antes de começar o tutorial, baixe o código-fonte do aplicativo Contoso Expenses e verifique se você pode compilar o código no Visual Studio.Before you begin the tutorial, download the source code for the Contoso Expenses app and make sure you can build the code in Visual Studio.

  1. Baixe o código-fonte do aplicativo na guia Versões do Repositório do workshop AppConsult WinAppsModernization.Download the app source code from the Releases tab of the AppConsult WinAppsModernization workshop repository. O link direto é https://github.com/microsoft/AppConsult-WinAppsModernizationWorkshop/releases.The direct link is https://github.com/microsoft/AppConsult-WinAppsModernizationWorkshop/releases.
  2. Abra o arquivo zip e extraia todo o conteúdo para a raiz de sua unidade C:\ .Open the zip file and extract all the content to the root of your C:\ drive. Ele criará uma pasta chamada C:\WinAppsModernizationWorkshop.It will create a folder named C:\WinAppsModernizationWorkshop.
  3. Abra o Visual Studio 2019 e clique duas vezes no arquivo C:\WinAppsModernizationWorkshop\Lab\Exercise1\01-Start\ContosoExpenses\ContosoExpenses.sln para abrir a solução.Open Visual Studio 2019 and double click on the C:\WinAppsModernizationWorkshop\Lab\Exercise1\01-Start\ContosoExpenses\ContosoExpenses.sln file to open the solution.
  4. Verifique se você pode compilar, executar e depurar o projeto do WPF Contoso Expenses pressionando o botão Iniciar ou CTRL + F5.Verify that you can build, run, and debug the Contoso Expenses WPF project by pressing the Start button or CTRL + F5.

IntroduçãoGet started

Quanto tiver o código-fonte do aplicativo de exemplo Contoso Expenses e confirmar que pode compilá-lo no Visual Studio, você estará pronto para iniciar o tutorial:After you have the source code for the Contoso Expenses sample app and you can confirm that you can build it in Visual Studio, you're ready to start the tutorial:

Conceitos importantesImportant concepts

As seções a seguir fornecem o contexto de alguns dos principais conceitos discutidos neste tutorial.The following sections provide background for some of the key concepts discussed in this tutorial. Se já estiver familiarizado com esses conceitos, ignore esta seção.If you're already familiar with these concepts, you can skip this section.

UWP (Plataforma Universal do Windows)Universal Windows Platform (UWP)

No Windows 8, a Microsoft introduziu uma nova estrutura chamada WinRT (Windows Runtime).In Windows 8, Microsoft introduced a new framework called the Windows Runtime (WinRT). Diferente do .NET Framework, o WinRT é uma camada nativa de APIs que são expostas diretamente aos aplicativos.Unlike the .NET Framework, WinRT is a native layer of APIs which are exposed directly to apps. O WinRT também introduziu projeções de linguagem, que são camadas adicionadas sobre o runtime para permitir que os desenvolvedores interajam com ele usando linguagens como C# e JavaScript além de C++.WinRT also introduced language projections, which are layers added on top of the runtime to allow developers to interact with it using languages such as C# and JavaScript in addition to C++. As projeções permitem que os desenvolvedores criem aplicativos sobre o WinRT aproveitando os mesmos conhecimentos sobre o C# e o XAML adquiridos na criação de aplicativos com o .NET Framework.Projections enable developers to build apps on top of WinRT that leverage the same C# and XAML knowledge they acquired in building apps with the .NET Framework.

No Windows 10, a Microsoft introduziu a UWP (Plataforma Universal do Windows), que se baseia no WinRT.In Windows 10, Microsoft introduced the Universal Windows Platform (UWP), which is built on top of WinRT. O recurso mais importante da UWP é que ela oferece um conjunto comum de APIs para todas as plataformas de dispositivo: não importa se o aplicativo está em execução em um desktop, um Xbox ou um HoloLens, você pode usar as mesmas APIs.The most important feature of UWP is that it offers a common set of APIs across every device platform: no matter if the app is running on a desktop, on a Xbox One or on a HoloLens, you’re able to use the same APIs.

No futuro, a maioria dos novos recursos do Windows 10 serão expostos por meio de APIs do WinRT, incluindo recursos como Linha do Tempo, Projeto Roma e Windows Hello.Going forward, most new Windows 10 features are exposed via WinRT APIs, including features such as Timeline, Project Rome, and Windows Hello.

Empacotamento MSIXMSIX packaging

MSIX é o modelo de empacotamento moderno para aplicativos do Windows.MSIX is the modern packaging model for Windows apps. O MSIX dá suporte a aplicativos UWP, bem como à criação de aplicativos da área de trabalho usando tecnologias como Win32, WPF, Windows Forms, Java, Electron e muito mais.MSIX supports UWP apps as well as desktop apps building using technologies such as Win32, WPF, Windows Forms, Java, Electron, and more. Quando você empacota um aplicativo da área de trabalho em um pacote MSIX, é possível publicá-lo na Microsoft Store.When you package a desktop app in an MSIX package, you can publish your app to the Microsoft Store. Seu aplicativo da área de trabalho também obtém o identificador de pacote quando é instalado, o que permite ele use um conjunto mais amplo de APIs do WinRT.Your desktop app also get package identity when it is installed, which enables your desktop app to use a broader set of WinRT APIs.

Para saber mais, confira estes artigos:For more information, see these articles:

Ilhas XAMLXAML Islands

No Windows 10 em diante, versão 1903, você pode hospedar controles UWP em aplicativos da área de trabalho que não sejam UWP usando um recurso chamado Ilhas XAML.Starting in Windows 10, version 1903, you can host UWP controls in non-UWP desktop apps using a feature called XAML Islands. Esse recurso permite que você aprimore a aparência e a funcionalidade de seus aplicativos da área de trabalho existentes, com os recursos mais recentes de interface do usuário do Windows 10 que só estão disponíveis por meio dos controles UWP.This feature enables you to enhance the look, feel, and functionality of your existing desktop apps with the latest Windows 10 UI features that are only available via UWP controls. Isso significa que você pode usar recursos UWP, como o Windows Ink e controles que dão suporte ao Sistema Fluent Design em seus aplicativos WPF, Windows Forms e C++ Win32 existentes.This means that you can use UWP features such as Windows Ink and controls that support the Fluent Design System in your existing WPF, Windows Forms, and C++ Win32 apps.

Para obter mais informações, confira Controles UWP em aplicativos da área de trabalho (Ilhas XAML).For more information, see UWP controls in desktop applications (XAML Islands). Este tutorial orienta você no processo de usar dois tipos diferentes de controles de Ilha XAML:This tutorial guides you through the process of using two different types of XAML Island controls:

  • InkCanvas e MapControl no Windows Community Toolkit.The InkCanvas and MapControl in the Windows Community Toolkit. Esses controles do WPF encapsulam a interface e a funcionalidade dos controles da UWP correspondentes e podem ser usados como qualquer outro controle do WPF no designer do Visual Studio.These WPF controls wrap the interface and functionality of the corresponding UWP controls and can be used like any other WPF control in the Visual Studio designer.

  • O controle de Exibição de calendário da UWP.The UWP Calendar view control. Esse é um controle padrão da UWP que você hospedará usando o controle WindowsXamlHost no Windows Community Toolkit.This is a standard UWP control that you will host by using the WindowsXamlHost control in the Windows Community Toolkit.

.NET Core 3.NET Core 3

O .NET Core é uma estrutura de software livre que implementa uma versão multiplataforma, leve e facilmente extensível, do .NET Framework completo..NET Core is an open-source framework that implements a cross-platform, lightweight and easily extensible version of the full .NET Framework. Em comparação com o .NET Framework completo, o runtime do .NET Core é muito mais rápido e muitas das APIs foram otimizadas.Compared to the full .NET Framework, .NET Core startup time is much faster and many of the APIs have been optimized.

Nas primeiras versões, o foco do .NET Core era o suporte a aplicativos Web ou de back-end.Through its first several releases, the focus of .NET Core was for supporting web or back-end apps. Com o .NET Core, você pode criar facilmente aplicativos Web ou APIs escalonáveis que podem ser hospedados no Windows, no Linux ou em arquiteturas de microsserviço, como contêineres do Docker.With .NET Core, you can easily build scalable web apps or APIs that can be hosted on Windows, Linux, or in micro-service architectures like Docker containers.

O .NET Core 3 é a versão mais recente do .NET Core..NET Core 3 is latest release of .NET Core. O destaque dessa versão é o suporte para aplicativos da área de trabalho do Windows, incluindo aplicativos Windows Forms e WPF.The highlight of this release is support for Windows desktop apps, including Windows Forms and WPF apps. Você pode executar aplicativos da área de trabalho do Windows novos e existentes no .NET Core 3 e aproveitar todos os benefícios que o .NET Core tem a oferecer.You can run new and existing Windows desktop apps on .NET Core 3 and enjoy all the benefits that .NET Core has to offer. Controles da UWP que são hospedados nas ilhas de XAML também podem ser usados em aplicativos do Windows Forms e WPF destinados ao .NET Core 3.UWP controls that are hosted in XAML Islands can also be used in Windows Forms and WPF apps that target .NET Core 3.

Observação

O WPF e o Windows Forms não estão se tornando multiplataforma e você não pode executar um WPF ou Windows Forms no Linux e no MacOS.WPF and Windows Forms are not becoming cross-platform, and you cannot run a WPF or Windows Forms on Linux and MacOS. Os componentes da interface do usuário do WPF e do Windows Forms ainda têm dependência do sistema de renderização do Windows.The UI components of WPF and Windows Forms still have a dependency on the Windows rendering system.

Para obter mais informações, consulte Novidades do .NET Core 3.0.For more information, see What's new in .NET Core 3.0.