.NET MAUI 教程 - 使用 C# 生成第一个多平台应用

编辑代码

当使用 .NET MAUI 开发应用程序时,在调试应用程序时可使用 XAML 热重载。这意味着可以在应用程序运行时更改 XAML 用户界面(UI),并且 UI 将自动更新。

返回到 Visual Studio,使应用保持运行状态。在“解决方案资源管理器”中,双击 MyFirstMauiApp 项目下的 MainPage.xaml 文件。如果看不到“解决方案资源管理器”窗格,请从主菜单中选择“视图”>“解决方案资源管理器”(或按 Ctrl+ALT+L)。

突出显示 MainPage.xaml 文件的“解决方案资源管理器”窗格。

返回到 VS Code 中的 MainPage.xaml 文件,并使应用保持运行状态。

突出显示 MainPage.xaml 文件的“解决方案资源管理器”窗格。

目前,第 17 行第二个 LabelText 设置为 Hello, World!,如以下代码中所示:

MainPage.xaml
<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

将文本更新为 Hello, .NET MAUI!:

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

在你进行更改时,应用 UI 会自动更新。

运行 .NET MAUI 应用的 Windows。通过热重载更新时显示“Hello, World!”消息。

运行 .NET MAUI 应用的 Mac。通过热重载更新时显示“Hello, World!”消息。

使用 .NET MAUI 开发应用程序时,还可以使用 .NET 热重载重新加载 C# 代码。我们来修改应用程序中的逻辑,以在单击按钮时将计数增加 10 而不是 1。

打开 MainPage.xaml.cs (此文件嵌套在 MainPage.xaml 下,或者可以右键单击并从菜单中选择“查看代码”)。

下拉选项以显示 MainPage.xaml 背后的代码

该文件上的 OnCounterClicked 方法当前具有以下代码:

MainPage.xaml.cs
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);
}

更新 count++;,让它按 10 递增,方法是将其更改为 count += 10;

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

若要应用代码更改,请保存文件并在 Visual Studio 中选择热重载按钮,或选择 ALT+F10。

下拉选项以显示 MainPage.xaml 背后的代码

选择“单击这里”按钮,你将看到其按 10 递增。很棒! 现在可以关闭正在运行的应用。

计数器已更新为 10 的增量

继续