Criar um projeto .NET MAUI no Visual Studio

Depois de instalar e configurar as ferramentas .NET MAUI, você pode usar o Visual Studio para criar um aplicativo .NET MAUI (Multi-platform Application User Interface).

Nesta unidade, você aprenderá sobre a estrutura do modelo .NET MAUI no Visual Studio. Você usa esse modelo para criar aplicativos móveis e de desktop multiplataforma.

Como começar

Para criar um novo projeto .NET MAUI com o Visual Studio, na caixa de diálogo Criar um novo projeto , selecione o tipo de projeto .NET MAUI e escolha o modelo .NET MAUI App:

Siga as etapas no assistente para nomear o projeto e especificar um local.

Um projeto .NET MAUI recém-criado contém os itens conforme mostrado:

Estrutura do projeto .NET MAUI e inicialização do aplicativo

O conteúdo do projeto inclui os seguintes itens:

• App.xaml. Esse arquivo define os recursos do aplicativo que o aplicativo usa no layout XAML (Extensible Application Markup Language). Os recursos padrão estão localizados na pasta e definem cores e estilos padrão em todo o Resources aplicativo para cada controle interno do .NET MAUI. Aqui, você vê os dois dicionários de recursos sendo fundidos:

  <?xml version = "1.0" encoding = "UTF-8" ?>
  <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:MyMauiApp"
               x:Class="MyMauiApp.App">
      <Application.Resources>
          <ResourceDictionary>
              <ResourceDictionary.MergedDictionaries>
                  <ResourceDictionary Source="Resources/Colors.xaml" />
                  <ResourceDictionary Source="Resources/Styles.xaml" />
              </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
      </Application.Resources>
  </Application>
  

• App.xaml.cs. Este arquivo é o code-behind para o arquivo App.xaml. Ele define a classe App. Esta classe representa seu aplicativo em tempo de execução. A classe cria uma janela inicial e a atribui à MainPage propriedade, essa propriedade determina qual página é exibida quando o aplicativo começa a ser executado. Além disso, essa classe permite que você substitua manipuladores de eventos comuns do ciclo de vida do aplicativo neutro em relação à plataforma. Os eventos incluem OnStart, OnResumee OnSleep. Esses manipuladores são definidos como membros da Application classe base. O código a seguir mostra exemplos do modelo padrão e a capacidade de substituir esses eventos:

  Nota

  Você também pode substituir eventos de ciclo de vida específicos da plataforma quando o aplicativo começar a ser executado pela primeira vez. Isso é descrito mais adiante.

  public partial class App : Application
  {
      public App()
      {
          InitializeComponent();
      }
  
      protected override Window CreateWindow(IActivationState? activationState)
      {
          return new Window(new AppShell());
      }
  
      // Optional events to implement for the application lifecycle. The Window created 
      // above also has lifecycle events that can be used to track the Window lifecycle.
      protected override void OnStart()
      {
          base.OnStart();
      }
  
      protected override void OnResume()
      {
          base.OnResume();
      }
  
      protected override void OnSleep()
      {
          base.OnSleep();
      }
  }
  

• AppShell.xaml. Este arquivo é a estrutura principal de um aplicativo .NET MAUI. O MAUI Shell .NET fornece muitos recursos que são benéficos para aplicativos de várias plataformas, incluindo estilo de aplicativo, navegação baseada em URI e opções de layout, incluindo navegação de submenu e guias para a raiz do aplicativo. O modelo padrão fornece uma única página (ou ShellContent) que é inflada quando o aplicativo é iniciado.

    <?xml version="1.0" encoding="UTF-8" ?>
    <Shell
        x:Class="MyMauiApp.AppShell"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:MyMauiApp"
        Shell.FlyoutBehavior="Flyout"
        Title="MyMauiApp">
  
        <ShellContent
            Title="Home"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
  
    </Shell>
  

• MainPage.xaml. Este arquivo contém a definição da interface do usuário. O aplicativo de exemplo que o modelo de aplicativo MAUI gera contém dois rótulos, um botão e uma imagem. Os controles são organizados usando um VerticalStackLayout incluso em um ScrollViewarquivo . O VerticalStackLayout elemento organiza os controles verticalmente (em uma pilha) e fornece ScrollView uma barra de rolagem se a exibição for muito grande para ser exibida no dispositivo. Pretende-se que você substitua o conteúdo desse arquivo pelo seu próprio layout de interface do usuário. Você também pode definir mais páginas XAML se tiver um aplicativo de várias páginas.

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="MyMauiApp.MainPage">
  
      <ScrollView>
          <VerticalStackLayout
              Padding="30,0"
              Spacing="25">
              <Image
                  Source="dotnet_bot.png"
                  HeightRequest="185"
                  Aspect="AspectFit"
                  SemanticProperties.Description="dot net bot in a hovercraft number nine" />
  
              <Label
                  Text="Hello, World!"
                  Style="{StaticResource Headline}"
                  SemanticProperties.HeadingLevel="Level1" />
  
              <Label
                  Text="Welcome to &#10;.NET Multi-platform App UI"
                  Style="{StaticResource SubHeadline}"
                  SemanticProperties.HeadingLevel="Level2"
                  SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
  
              <Button
                  x:Name="CounterBtn"
                  Text="Click me" 
                  SemanticProperties.Hint="Counts the number of times you click"
                  Clicked="OnCounterClicked"
                  HorizontalOptions="Fill" />
          </VerticalStackLayout>
      </ScrollView>
  
  </ContentPage>
  

• MainPage.xaml.cs. Este arquivo contém o code-behind para a página. Neste arquivo, você define a lógica para os vários manipuladores de eventos e outras ações acionadas pelos controles na página. O código de exemplo implementa um manipulador para o Clicked evento para o botão na página. O código simplesmente incrementa uma variável de contador e exibe o resultado em um rótulo na página. O serviço semântico fornecido como parte da biblioteca MAUI Essentials suporta acessibilidade. O método estático Announce da classe especifica o SemanticScreenReader texto anunciado por um leitor de tela quando o usuário seleciona o botão:

  namespace MyMauiApp;
  
  public partial class MainPage : ContentPage
  {
      int count = 0;
  
      public MainPage()
      {
          InitializeComponent();
      }
  
      private void OnCounterClicked(object sender, EventArgs e)
      {
          count++;
  
          if (count == 1)
              CounterBtn.Text = $"Clicked {count} time";
          else
              CounterBtn.Text = $"Clicked {count} times";
  
          SemanticScreenReader.Announce(CounterBtn.Text);
      }
  }
  

• MauiProgram.cs. Cada plataforma nativa tem um ponto de partida diferente que cria e inicializa o aplicativo. Você pode encontrar esse código na pasta Plataformas no projeto. Esse código é específico da plataforma, mas no final ele chama o CreateMauiApp método da classe estática MauiProgram . Use o CreateMauiApp método para configurar o aplicativo criando um objeto do construtor de aplicativos. No mínimo, você precisa especificar qual classe descreve seu aplicativo usando o UseMauiApp método genérico do objeto do construtor de aplicativos; o parâmetro type (<App>) especifica a classe do aplicativo. O construtor de aplicativos também fornece métodos para tarefas como registrar fontes, configurar serviços para injeção de dependência, registrar manipuladores personalizados para controles e muito mais. O código a seguir mostra um exemplo de como usar o construtor de aplicativos para registrar uma fonte:

  using Microsoft.Extensions.Logging;
  
  namespace MyMauiApp;
  
  public static class MauiProgram
  {
      public static MauiApp CreateMauiApp()
      {
          var builder = MauiApp.CreateBuilder();
          builder
              .UseMauiApp<App>()
              .ConfigureFonts(fonts =>
              {
                  fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                  fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
              });
  
  #if DEBUG
          builder.Logging.AddDebug();
  #endif
  
          return builder.Build();
      }
  }
  

• Plataformas. Esta pasta contém arquivos e recursos de código de inicialização específicos da plataforma. Existem pastas para Android, iOS, MacCatalyst, Tizen e Windows. No tempo de execução, o aplicativo é iniciado de uma maneira específica da plataforma. As bibliotecas MAUI abstraem grande parte do processo de inicialização, mas os arquivos de código nessas pastas fornecem um mecanismo para conectar sua própria inicialização personalizada. O ponto importante é que, quando a inicialização é concluída, o código específico da plataforma chama o MauiProgram.CreateMauiApp método, que cria e executa o App objeto conforme descrito anteriormente. Por exemplo, o arquivo MainApplication.cs na pasta Android , o arquivo AppDelegate.cs na pasta iOS e MacCatalyst e o arquivo App.xaml.cs na pasta Windows contêm as substituições:

  protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
  

A imagem a seguir ilustra o fluxo de controle quando um aplicativo .NET MAUI é iniciado:

Recursos do projeto

O arquivo de projeto (.csproj) para o projeto principal inclui várias seções dignas de nota. A inicial PropertyGroup especifica as estruturas de plataforma a que o projeto se destina e itens como o título do aplicativo, ID, versão, versão de exibição e sistemas operacionais suportados. Você pode alterar essas propriedades conforme necessário.

<Project Sdk="Microsoft.NET.Sdk">

	<PropertyGroup>
		<TargetFrameworks>net10.0-android;net10.0-ios;net10.0-maccatalyst</TargetFrameworks>
		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net10.0-windows10.0.19041.0</TargetFrameworks>
		<OutputType>Exe</OutputType>
		<RootNamespace>MyMauiApp</RootNamespace>
		<UseMaui>true</UseMaui>
		<SingleProject>true</SingleProject>
		<ImplicitUsings>enable</ImplicitUsings>
		<Nullable>enable</Nullable>

		<!-- Display name -->
		<ApplicationTitle>MyMauiApp</ApplicationTitle>

		<!-- App Identifier -->
		<ApplicationId>com.companyname.mymauiapp</ApplicationId>

		<!-- Versions -->
		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
		<ApplicationVersion>1</ApplicationVersion>

		<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
		<WindowsPackageType>None</WindowsPackageType>

		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
		<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
	</PropertyGroup>
    ...

</Project>

A ItemGroup seção abaixo do grupo de propriedades inicial permite especificar uma imagem e uma cor para a tela inicial que aparece enquanto o aplicativo está carregando, antes que a primeira janela apareça. Você também pode definir os locais padrão para as fontes, imagens e ativos que o aplicativo usa.

<Project Sdk="Microsoft.NET.Sdk">

    ...

	<ItemGroup>
		<!-- App Icon -->
		<MauiIcon Include="Resources\AppIcon\appicon.svg" 
                  ForegroundFile="Resources\AppIcon\appiconfg.svg" 
                  Color="#512BD4" />

		<!-- Splash Screen -->
		<MauiSplashScreen Include="Resources\Splash\splash.svg" 
                          Color="#512BD4" 
                          BaseSize="128,128" />

		<!-- Images -->
		<MauiImage Include="Resources\Images\*" />
		<MauiImage Update="Resources\Images\dotnet_bot.png" 
                   Resize="True" BaseSize="300,185" />

		<!-- Custom Fonts -->
		<MauiFont Include="Resources\Fonts\*" />

		<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
		<MauiAsset Include="Resources\Raw\**" 
                   LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
	</ItemGroup>

    ...

</Project>

Na janela Gerenciador de Soluções no Visual Studio, você pode expandir a pasta Recursos para ver esses itens. Você pode adicionar quaisquer outras fontes, imagens e outros recursos gráficos que o aplicativo requer para esta pasta e subpastas.

Você deve registrar todas as fontes adicionadas à pasta de fontes com o objeto do construtor de aplicativos quando o aplicativo começar a ser executado. Lembre-se de que o método CreateMauiApp na classe MauiProgram registra fontes com o ConfigureFonts método:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            ...
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        ...
    }
}

Neste exemplo, o AddFont método associa a fonte ao nome OpenSansRegular. Você pode especificar essa fonte ao formatar itens na descrição XAML de uma página, aplicativo ou no dicionário de recursos compartilhados:

<ResourceDictionary ..>
    ...
    <Style TargetType="Button">
        ...
        <Setter Property="FontFamily" Value="OpenSansRegular" />
        ...
    </Style>

</ResourceDictionary>

Use as pastas Recursos nas pastas Android e iOS na pasta Plataformas para recursos específicos da plataforma Android e iOS.