Como segmentar várias plataformas com seu aplicativo WinUI 3

Depois de criar um aplicativo inicial Hello World WinUI 3, você pode estar se perguntando como alcançar mais usuários com uma única base de código. Este tutorial usará da plataforma Uno para expandir o alcance do seu aplicativo existente, permitindo a reutilização da lógica de negócios e da camada de interface do usuário em dispositivos móveis, Web e desktop nativos.

Pré-requisitos

• Visual Studio 2022 17.4 ou posterior
• Configurar o computador de desenvolvimento (consulte Introdução ao WinUI)
• Carga de trabalho de desenvolvimento ASP.NET e web (para desenvolvimento WebAssembly)
• Instalado o desenvolvimento de UI de aplicações multiplataforma .NET (para desenvolvimento de iOS, Android, Mac Catalyst).
• Desenvolvimento de desktop .NET instalado (para desenvolvimento Gtk, Wpf e Linux Framebuffer)

Finalize seu ambiente

1. Abra um prompt de linha de comando, o Terminal do Windows, se o tiver instalado, ou então o Prompt de Comando ou o Windows Powershell a partir do Menu Iniciar.

2. Instale ou atualize a ferramenta uno-check:

   • Use o seguinte comando:

     dotnet tool install -g uno.check
     

   • Para atualizar a ferramenta, se você já tiver instalado anteriormente uma versão mais antiga:

     dotnet tool update -g uno.check
     

3. Execute a ferramenta com o seguinte comando:

   uno-check
   

4. Siga as instruções indicadas pela ferramenta. Como ele precisa modificar seu sistema, você pode ser solicitado a fornecer permissões elevadas.

Instalar os modelos de solução da plataforma Uno

Inicie o Visual Studio e clique em Continue without code. Clique em Extensions ->Manage Extensions na barra de menus.

No Extension Manager, expanda o nó Online e procure por Uno, instale a extensão Uno Platform ou descarregue-a do Visual Studio Marketplacee, em seguida, reinicie o Visual Studio.

Criar uma aplicação

Agora que estamos prontos para criar um aplicativo multiplataforma, a abordagem que adotaremos é criar um novo aplicativo Uno Platform. Copiaremos o código XAML do projeto Hello World WinUI 3 do tutorial anterior para nosso projeto multiplataforma. Isso é possível porque a plataforma Uno permite que você reutilize sua base de código existente. Para recursos dependentes das APIs do sistema operacional fornecidas por cada plataforma, você pode facilmente fazê-los funcionar ao longo do tempo. Essa abordagem é especialmente útil se você tiver um aplicativo existente que deseja portar para outras plataformas.

Brevemente, poderás colher os benefícios desta abordagem, ao alcançar mais plataformas num estilo XAML familiar e com a base de código que já possuis.

Abra o Visual Studio e crie um novo projeto por meio de File>New>Project:

Procure o Uno e selecione o modelo de projeto do Uno Platform App:

Especifique um nome de projeto, nome da solução e diretório. Neste exemplo, nosso projeto Hello World MultiPlatform pertence a uma solução Hello World MultiPlatform, que viverá em C:\Projects:

Crie uma nova solução em C# usando o tipo de aplicação Uno Platform na página inicial do Visual Studio . Para evitar conflitos com o código do tutorial anterior, daremos a esta solução um nome diferente, "Hello World Uno".

Agora você escolherá um modelo base para levar seu aplicativo Hello World multiplataforma. O modelo Uno Platform App vem com duas opções predefinidas que permitem que você comece rapidamente com uma solução em branco ou a configuração padrão, que inclui referências às bibliotecas Uno.Material e Uno.Toolkit. A configuração padrão também inclui Uno.Extensions, que é usado para injeção de dependência, configuração, navegação e registro, e usa MVUX no lugar de MVVM, tornando-se um ótimo ponto de partida para a criação rápida de aplicativos do mundo real.

Para simplificar, selecione a predefinição em branco. Em seguida, clique no botão Criar. Aguarde até que os projetos sejam criados e suas dependências sejam restauradas.

Um banner na parte superior do editor pode pedir para recarregar projetos, clique em Recarregar projetos:

Criando seu aplicativo

Agora que você gerou o ponto de partida funcional do seu aplicativo WinUI multiplataforma, você pode copiar a marcação para ele a partir do projeto Hello World WinUI 3 descrito no tutorial anterior.

Você deve ver a seguinte estrutura de arquivo padrão no Gerenciador de Soluções:

Verifique se o Visual Studio tem seu projeto WinUI 3 aberto e, em seguida, copie os elementos XAML filho de MainWindow.xaml no projeto WinUI 3 para seu arquivo MainPage.xaml no projeto Uno Platform. A visualização XAML do MainPage deve ter esta forma:

<Page x:Class="HelloWorld.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <!-- Below is the code you copied from MainWindow: -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
          <TextBlock x:Name="myText" 
                     Text="Hello world!"
                     Foreground="Red"/>
      </StackPanel>
</Page>

Inicie o destino HelloWorld.Windows. Observe que este aplicativo WinUI é idêntico ao tutorial anterior.

Agora você pode criar e executar seu aplicativo em qualquer uma das plataformas suportadas. Para fazer isso, pode-se usar a lista suspensa da barra de ferramentas de depuração para selecionar uma plataforma de destino para implementação.

• Para executar o cabeçalho do WebAssembly (Wasm):

  • Clique com o botão direito do mouse no projeto HelloWorld.Wasm, selecione Definir como projeto de inicialização
  • Pressione o botão HelloWorld.Wasm para implantar o aplicativo
  • Se desejar, você pode usar o projeto HelloWorld.Server como alternativa

• Para depurar para iOS:

  • Clique com o botão direito do mouse no projeto HelloWorld.Mobile, selecione Definir como projeto de inicialização

  • Na lista suspensa da barra de ferramentas de depuração, selecione um dispositivo iOS ativo ou o simulador. Você precisará estar emparelhado com um Mac para que isso funcione.

    

• Para efetuar a depuração para Mac Catalyst:

  • Clique com o botão direito do mouse no projeto HelloWorld.Mobile, selecione Definir como projeto de inicialização
  • No menu suspenso da barra de ferramentas de depuração, selecione um dispositivo macOS remoto. Você precisará ser emparelhado com um para que isso funcione.

• Para depurar na plataforma Android :

  • Clique com o botão direito do mouse no projeto HelloWorld.Mobile, selecione Definir como projeto de inicialização
  • No menu suspenso da barra de ferramentas de depuração, selecione um dispositivo Android ativo ou o emulador
    • Selecione um dispositivo ativo no submenu "Dispositivo"

• Para depurar em Linux com Skia GTK:

  • Clique com o botão direito do mouse no projeto HelloWorld.Skia.Gtk e selecione Definir como projeto de inicialização
  • Pressione o botão HelloWorld.Skia.Gtk para implantar o aplicativo

Agora você está pronto para começar a criar seu aplicativo multiplataforma!

Ver também

• Documentação da plataforma Uno
• funcionalidades do Uno Extensions