当前位置：首页 > 技能相关 > .NET > 正文内容

.NET MAUI 新建Page.xaml文件 (二)

admin10个月前 (10-23).NET5020 修订时间：2024-10-23 17:13:27

问题

如何向.NET MAUI项目添加另一个页面，页面的数据和操作又如何执行？

探索

一、添加页面

右键Notes项目，选择添加-新建项

如果出现下图，则点击显示所有模板

选择创建XAML项

创建完毕

二、编辑文件

双击AboutPage.xaml文件

将文件代码修改为：

<?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.AboutPage">
    <VerticalStackLayout Spacing="10" Margin="10">
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="网络机器人挥手问好！"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="Notes" VerticalOptions="End" />
            <Label FontSize="22" Text="v1.0" VerticalOptions="End" />
        </HorizontalStackLayout>
        <Label Text="此应用程序是用XAML和C#编写的 .NET MAUI." />
        <Button Text="了解更多..." Clicked="LearnMore_Clicked" />
    </VerticalStackLayout>
</ContentPage>

上述代码元素详解如下：

<ContentPage> 是 AboutPage 类的根对象。

<VerticalStackLayout> 是 ContentPage 的唯一子对象。 ContentPage 只能有一个子对象。 VerticalStackLayout 类型可以有多个子项。此布局控件将其子控件逐一垂直排列。

<HorizontalStackLayout> 的运行方式与 <VerticalStackLayout>相同，只是其子项以水平方式排列。

<Image> 显示图像，在本例中，它使用的是每个 .NET MAUI 项目附带的 dotnet_bot.png 图像。

<Label> 控件显示文本。

<Button> 控件来引发 Clicked 事件。

<Image>添加到项目的文件实际上是 dotnet_bot.svg。 .NET MAUI 基于目标设备将可缩放的向量图形 (SVG) 文件转换为可移植网络图形格式 (PNG) 文件。因此，将 SVG 文件添加到 .NET MAUI 应用项目时，应从具有 .png 扩展名的 XAML 或 C# 引用该文件。对 SVG 文件的唯一引用应位于项目文件中。

Clicked 事件的代码我们一般书写在AboutPage.xaml.cs文件，具体代码如下：

namespace Notes;
public partial class AboutPage : ContentPage
{
	public AboutPage()
	{
		InitializeComponent();
	}
}

上述为默认代码，以下时添加指定点击事件的代码：

namespace Notes;
public partial class AboutPage : ContentPage
{
	public AboutPage()
	{
	   InitializeComponent();
	}
	private async void LearnMore_Clicked(object sender, EventArgs e)
	{
       //在系统浏览器中导航到指定的URL。
       await Launcher.Default.OpenAsync("http://www.lifeiai.com/");
	}
}