Creación de un proyecto de .NET MAUI en Visual Studio

Después de instalar y configurar las herramientas de .NET MAUI, puede usar Visual Studio para crear una aplicación de .NET MAUI (interfaz de usuario de aplicaciones multiplataforma).

En esta unidad, obtendrá información sobre la estructura de la plantilla de .NET MAUI en Visual Studio. Usará esta plantilla para crear aplicaciones multiplataforma para dispositivos móviles y de escritorio.

Introducción

Para crear un proyecto .NET MAUI con Visual Studio, en el cuadro de diálogo Crear un nuevo proyecto, seleccione el tipo de proyecto .NET MAUI y, a continuación, elija la plantilla de aplicación .NET MAUI:

Siga los pasos del asistente para asignar un nombre al proyecto y especificar una ubicación.

Un proyecto de .NET MAUI recién creado contiene los elementos siguientes:

Estructura del proyecto .NET MAUI e inicio de aplicaciones

El contenido del proyecto incluye los siguientes elementos:

• App.xaml. Este archivo define los recursos de la aplicación que se utilizan en el diseño del lenguaje XAML. Los recursos predeterminados se encuentran en la carpeta Resources y definen los colores para toda la aplicación y estilos predeterminados para cada control integrado de .NET MAUI. Aquí se pueden ver los dos diccionarios de recursos que se combinan:

  <?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 archivo es el código subyacente del archivo App.xaml. Define la clase App. Esta clase representa la aplicación en tiempo de ejecución. La clase crea una ventana inicial y la asigna a la propiedad MainPage. Esta propiedad determina qué página se mostrará cuando la aplicación comience a ejecutarse. Además, esta clase le permite invalidar controladores comunes de eventos de ciclo de vida de aplicaciones neutros de plataforma. Los eventos incluyen OnStart, OnResume y OnSleep. Estos controladores se definen como miembros de la clase base Application. En el código siguiente se muestran ejemplos de la plantilla predeterminada y la capacidad de invalidar estos eventos:

  Nota:

  También se pueden invalidar eventos de ciclo de vida específicos de la plataforma cuando la aplicación empiece a ejecutarse por primera vez. Esto se describe más adelante.

  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 archivo es una estructura principal de la aplicación de .NET MAUI. El Shell de .NET MAUI proporciona muchas características que son beneficiosas para aplicaciones de varias plataformas, entre las que se incluyen el estilo de las aplicaciones, la navegación basada en URI y las opciones de diseño, que incluyen la navegación por control flotante y las pestañas de la raíz de la aplicación. La plantilla predeterminada proporciona una única página (o ShellContent) que se infla cuando se inicia la aplicación.

    <?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 archivo contiene la definición de la interfaz de usuario. La aplicación de ejemplo generada por la plantilla de aplicación de MAUI consta de dos etiquetas, un botón y una imagen. Los controles se organizan mediante un VerticalStackLayout contenido en un ScrollView. El elemento VerticalStackLayout hace que los controles se organicen verticalmente (en una pila) y el elemento ScrollView proporciona una barra de desplazamiento si la vista es demasiado grande para que se muestre en el dispositivo. Su intención es reemplazar el contenido de este archivo con su propio diseño de interfaz de usuario. También puede definir más páginas XAML si tiene una aplicación de varias 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 archivo contiene el código subyacente de la página. En este archivo se define la lógica para los distintos controladores de eventos y otras acciones desencadenadas por los controles de la página. El código de ejemplo implementa un controlador para el evento Clicked para el botón en la página. El código simplemente incrementa una variable de recuento y muestra el resultado en una etiqueta en la página. El servicio semántico proporcionado como parte de la biblioteca MAUI Essentials admite la accesibilidad. El método estático Announce de la clase SemanticScreenReader especifica el texto anunciado por un lector de pantalla cuando el usuario selecciona el botón:

  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 tiene un punto de partida diferente que crea e inicializa la aplicación. Encontrará este código en la carpeta Plataformas del proyecto. Este código es específico de la plataforma, pero al final llama al método CreateMauiApp de la clase estática MauiProgram. Use el método CreateMauiApp para configurar la aplicación mediante la creación de un objeto generador de aplicaciones. Como mínimo, debe especificar qué clase describe la aplicación mediante el método genérico UseMauiApp del objeto del generador de aplicaciones; el parámetro de tipo (<App>) especifica la clase de aplicación. El generador de aplicaciones también proporciona métodos para tareas como el registro de fuentes, la configuración de servicios para la inserción de dependencias, el registro de controladores personalizados para los controles y mucho más. El código siguiente muestra un ejemplo de uso del generador de aplicaciones para registrar una fuente:

  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 carpeta contiene recursos y archivos de código de inicialización específicos de la plataforma. Hay carpetas para Android, iOS, MacCatalyst, Tizen y Windows. En tiempo de ejecución, la aplicación se inicia de una forma que es específica de la plataforma. Las bibliotecas MAUI abstraen gran parte del proceso de puesta en marcha, pero los archivos de código de estas carpetas proporcionan un mecanismo para enlazar su propia inicialización personalizada. El punto importante es que cuando se completa la inicialización, el código específico de la plataforma llama al método MauiProgram.CreateMauiApp que crea y ejecuta el objeto App, como se ha descrito anteriormente. Por ejemplo, el archivo MainApplication.cs de la carpeta Android, el archivo AppDelegate.cs de las carpetas iOS y MacCatalyst, y el archivo App.xaml.cs de la carpeta Windows contienen, todos, las invalidaciones:

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

La siguiente imagen ilustra el flujo de control cuando se inicia una aplicación .NET MAUI:

Recursos del proyecto

El archivo del proyecto (.csproj) para el proyecto principal incluye varias secciones destacadas. El PropertyGroup inicial especifica los marcos de plataforma a los que se dirige el proyecto y los elementos como el título de la aplicación, el identificador, la versión, la versión de visualización y los sistemas operativos admitidos. Puede modificar estas propiedades según sea necesario.

<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>

La sección ItemGroup debajo del grupo de propiedades inicial le permite especificar una imagen y un color para la pantalla de presentación que aparece mientras se carga la aplicación, antes de que aparezca la primera ventana. También puede establecer las ubicaciones predeterminadas para las fuentes, imágenes y activos que usa la aplicación.

<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>

En la ventana Explorador de soluciones de Visual Studio, puede expandir la carpeta Recursos para ver estos elementos. Puede agregar otras fuentes, imágenes y otros recursos gráficos requeridos por la aplicación a esta carpeta y subcarpetas.

Debe registrar las fuentes agregadas a la carpeta fuentes con el objeto generador de aplicaciones cuando la aplicación empiece a ejecutarse. Recuerde que el método CreateMauiApp de la clase MauiProgram registra las fuentes con el método ConfigureFonts:

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

        ...
    }
}

En este ejemplo el método AddFont asocia la fuente con el nombre OpenSansRegular. Es posible especificar esta fuente al dar formato a elementos de la descripción XAML de una página, aplicación o en el diccionario de recursos compartidos:

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

</ResourceDictionary>

Use las carpetas Recursos de las carpetas Android e iOS en la carpeta Plataformas para recursos específicos de plataformas Android e iOS.