创建 .NET MAUI 应用(Notes)(一)
创建项目
在开始之前,我们遵循一些约定,避免后续代码不可用,项目名称:Notes。 取消“将解决方案和项目放在同一目录中”的设置。创建项目时,请选择最新的 .NET版本。
调试模式
.NET MAUI 应用可在多个操作系统和设备上运行。 在 Visual Studio 工具栏中,将“调试目标”设置为要用于调试和测试的设备。 以下步骤演示如何将“调试目标”设置为 Android:
默认文件
Visual Studio 创建 .NET MAUI 项目时,将生成四个重要的代码文件。 可以在 Visual Studio 的“解决方案资源管理器”窗格中看到这些文件:
这些文件有助于配置和运行 .NET MAUI 应用。 每个文件都有不同的用途,如下所述:
MauiProgram.cs
此文件中的代码充当应用的跨平台入口点,用于配置和启动应用。
指向 App.xaml 文件定义的 App 类。
using Microsoft.Extensions.Logging; namespace Notes { 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(); } } }
App.xaml 和 App.xaml.cs
所有 XAML 文件通常都包含两个文件,即 .xaml 文件本身,以及一个相应的代码文件。
.xaml 文件包含 XAML 标记,.xaml.cs代码文件包含用户创建的用于与 XAML 标记交互的代码。
App.xaml 文件包含应用范围的 XAML 资源,例如颜色、样式或模板。
<?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:Notes" x:Class="Notes.App"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources/Styles/Colors.xaml" /> <ResourceDictionary Source="Resources/Styles/Styles.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
App.xaml.cs 文件通常包含用于实例化 Shell 应用程序的代码。
namespace Notes { public partial class App : Application { public App() { InitializeComponent(); MainPage = new AppShell(); } } }
在此项目中,它指向 AppShell 类。
AppShell.xaml 和 AppShell.xaml.cs
此文件定义 AppShell 类,该类用于定义应用的视觉层次结构。
<?xml version="1.0" encoding="UTF-8" ?> <Shell x:Class="Notes.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Notes" Shell.FlyoutBehavior="Disabled" Title="Notes"> <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" /> </Shell>
namespace Notes { public partial class AppShell : Shell { public AppShell() { InitializeComponent(); } } }
MainPage.xaml 和 MainPage.xaml.cs
MainPage.xaml 文件定义页面的 UI(用户界面)。
<?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="Notes.MainPage"> <ScrollView> <VerticalStackLayout Padding="30,0" Spacing="25"> <Image Source="dotnet_bot.png" HeightRequest="185" Aspect="AspectFit" SemanticProperties.Description="dot net bot in a race car number eight" /> <Label Text="Hello, World!" Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" /> <Label Text="Welcome to .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 包含 XAML 的代码,如按钮单击事件的代码。
using Microsoft.Extensions.Logging; namespace Notes { 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(); } } }