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
Resourcesy 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. El constructor de esta clase crea una ventana inicial y le asigna la propiedad
MainPage. Esta propiedad determina qué página se muestra cuando la aplicación comienza a ejecutarse. Además, esta clase le permite invalidar controladores comunes de eventos de ciclo de vida de aplicaciones neutros de plataforma. Los eventos incluyenOnStart,OnResumeyOnSleep. Estos controladores se definen como miembros de la clase baseApplication. En el código siguiente, se muestran algunos ejemplos: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.
namespace MyMauiApp; public partial class App : Application { public App() { InitializeComponent(); MainPage = new AppShell(); } 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
Shellde .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 (oShellContent) 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="Disabled"> <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
VerticalStackLayoutcontenido en unScrollView. El elementoVerticalStackLayouthace que los controles se organicen verticalmente (en una pila) y el elementoScrollViewproporciona 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 Spacing="25" Padding="30,0" VerticalOptions="Center"> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" HeightRequest="200" HorizontalOptions="Center" /> <Label Text="Hello, World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level2" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Button x:Name="CounterBtn" Text="Click me" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> </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
Clickedpara 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áticoAnnouncede la claseSemanticScreenReaderespecifica 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
CreateMauiAppde la clase estáticaMauiProgram. Use el métodoCreateMauiApppara 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éricoUseMauiAppdel 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: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"); }); 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.CreateMauiAppque crea y ejecuta el objetoApp, 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>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
<OutputType>Exe</OutputType>
<RootNamespace>MyMauiApp</RootNamespace>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<ImplicitUsings>enable</ImplicitUsings>
<!-- Display name -->
<ApplicationTitle>MyMauiApp</ApplicationTitle>
<!-- App Identifier -->
<ApplicationId>com.companyname.mymauiapp</ApplicationId>
<ApplicationIdGuid>272B9ECE-E038-4E53-8553-E3C9EA05A5B2</ApplicationIdGuid>
<!-- Versions -->
<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
<ApplicationVersion>1</ApplicationVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.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.svg"
ForegroundFile="Resources\appiconfg.svg"
Color="#512BD4" />
<!-- Splash Screen -->
<MauiSplashScreen Include="Resources\appiconfg.svg"
Color="#512BD4"
BaseSize="128,128" />
<!-- Images -->
<MauiImage Include="Resources\Images\*" />
<MauiImage Update="Resources\Images\dotnet_bot.svg"
BaseSize="168,208" />
<!-- 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. Puede especificar esta fuente al dar formato a elementos en la descripción XAML de una página o en el diccionario de recursos de la aplicación:
<Application ...">
<Application.Resources>
<ResourceDictionary>
...
<Style TargetType="Button">
...
<Setter Property="FontFamily" Value="OpenSansRegular" />
...
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Use las carpetas Recursos de las carpetas Android e iOS en la carpeta Plataformas para recursos específicos de plataformas Android e iOS.