.NET MAUI XAML 入门 您所在的位置:网站首页 shell显示隐藏字符 .NET MAUI XAML 入门

.NET MAUI XAML 入门

2023-05-07 23:44| 来源: 网络整理| 查看: 265

XAML 入门 项目 05/05/2023

浏览示例

在 .NET 多平台应用 UI (.NET MAUI) 应用中,XAML 主要用于定义页面的可视内容,并与 C# 代码隐藏文件协同工作。 代码隐藏文件为标记提供代码支持。 这两个文件共同促成了一个新的类定义,其中包括子视图和属性初始化。 在 XAML 文件中,类和属性通过 XML 元素和属性进行引用,并在标记和代码之间建立链接。

XAML 文件的剖析

新的 .NET MAUI 应用包含三个 XAML 文件及其关联的代码隐藏文件:

第一个文件配对是 App.xaml(一个 XAML 文件)和 App.xaml.cs(一个与 XAML 文件关联的 C# 代码隐藏 文件)。 App.xaml 和 App.xaml.cs 都贡献了派生自 Application的名为 App 的类。 第二个文件配对是 AppShell.xaml 和 AppShell.xaml.cs,它们为派生自 Shell的名为 AppShell 的类。 大多数具有 XAML 文件的其他类都提供派生自 ContentPage的类,并定义页面的 UI。 MainPage.xaml 和 MainPage.xaml.cs 文件也是如此。

MainPage.xaml 文件具有以下结构:

...

) 声明 (xmlns 两个 XML 命名空间引用 microsoft.com 上的 URI。 但是,这些 URI 中没有内容,它们基本上充当版本标识符。

第一个 XML 命名空间声明意味着在 XAML 文件中定义的无前缀的标记引用 .NET MAUI 中的类,例如 ContentPage。 第二个命名空间声明定义 前缀 x。 这用于 XAML 本身固有且受 XAML 其他实现支持的多个元素和属性。 但是,根据 URI 中嵌入的年份,这些元素和属性略有不同。 .NET MAUI 支持 2009 XAML 规范。

在第一个标记的末尾, x 前缀用于名为 的属性 Class。 由于此 x 前缀的用法对于 XAML 命名空间几乎是通用的,因此 XAML 属性(如 ) Class 几乎始终称为 x:Class。 特性 x:Class 指定完全限定的 .NET 类名称: MainPage 命名空间中的 MyMauiApp 类。 这意味着,此 XAML 文件在命名空间中MyMauiApp定义一个名为 MainPage 的新类,该类派生自ContentPage () 显示属性的标记x:Class。

特性 x:Class 只能出现在 XAML 文件的根元素中,以定义派生的 C# 类。 这是 XAML 文件中定义的唯一新类。 相反,XAML 文件中显示的其他内容只是从现有类实例化并初始化。

MainPage.xaml.cs 文件如下所示:

namespace MyMauiApp; public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } }

类 MainPage 派生自 ContentPage,是分部类定义。

当 Visual Studio 生成项目时,源生成器会生成新的 C# 源,其中包含从MainPage构造函数调用的方法的定义InitializeComponent,并将其添加到编译对象。

在运行时,类中的 MauiProgram 代码会启动应用并执行 App 类构造函数,以实例化 AppShell。 类 AppShell 实例化要显示的应用的第一页,即 MainPage。 构造 MainPage 函数调用 InitializeComponent,这将初始化 XAML 文件中定义的所有对象,在父子关系中将它们连接在一起,将代码中定义的事件处理程序附加到 XAML 文件中设置的事件,并将生成的对象的树设置为页面的内容。

注意

类 AppShell 使用 .NET MAUI Shell 设置要显示的应用的第一页。 但是,Shell 超出了 XAML 简介的范围。 有关详细信息,请参阅 .NET MAUI Shell。

设置页面内容

ContentPage应包含单个子级,可以是视图或包含子视图的布局。 的子级 ContentPage 会自动设置为 属性的值 ContentPage.Content 。

以下示例演示包含 ContentPageLabel的 :

从上面的示例中,类、属性和 XML 之间的关系应该是显而易见的。 .NET MAUI 类 ((如 ContentPage 或 Label) )作为 XML 元素显示在 XAML 文件中。 该类的属性(包括 Title on ContentPage 和 的 Label 7 个属性)通常显示为 XML 属性。

存在许多快捷方式来设置这些属性的值。 某些属性是基本数据类型。 例如, Title 和 Text 属性的类型为 string,类型 Rotation 为 double。 属性 HorizontalTextAlignment 的类型 TextAlignment为 ,这是一个枚举。 对于任何枚举类型的属性,只需提供成员名称。

但是,对于更复杂的类型的属性,转换器用于分析 XAML。 这些是 .NET MAUI 中派生自 TypeConverter的类。 对于上面的示例,会自动应用多个 .NET MAUI 转换器将字符串值转换为其正确的类型:

LayoutOptionsConverterVerticalOptions为 属性。 此转换器将 结构的公共静态字段 LayoutOptions 的名称转换为 类型的 LayoutOptions值。 ColorTypeConverterTextColor为 属性。 此转换器转换类的公共静态字段 Colors 的名称或十六进制 RGB 值,无论是否具有 alpha 通道。 页面导航

运行 .NET MAUI 应用时, MainPage 通常会显示 。 若要查看其他页面,可以将 它设置为 AppShell.xaml 文件中的新启动页,或者从 MainPage导航到新页面。

若要实现导航,可以在 MainPage.xaml.cs 构造函数中创建一个简单 Button 并使用 事件处理程序导航到 HelloXamlPage:

public MainPage() { InitializeComponent(); Button button = new Button { Text = "Navigate!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center }; button.Clicked += async (sender, args) => { await Navigation.PushAsync(new HelloXamlPage()); }; Content = button; }

编译和部署此应用的新版本时,屏幕上会显示一个按钮。 按它导航到 HelloXamlPage:

可以使用每个平台上显示的导航栏导航回 MainPage 去。

注意

此导航模型的替代方法是使用 .NET MAUI Shell。 有关详细信息,请参阅 .NET MAUI Shell 概述。

XAML 和代码交互

大多数 ContentPage 导数的子元素是布局(如 StackLayout 或 ), Grid布局可以包含多个子元素。 在 XAML 中,这些父子关系是使用普通 XML 层次结构建立的:

此 XAML 文件在语法上是完整的,并生成以下 UI:

但是,虽然可以与 Slider 和 Button交互,但 UI 不会更新。 应 Slider 使 Label 显示当前值,而 Button 应执行某些操作。

Slider使用 Label 显示值完全可以在 XAML 中使用数据绑定来实现。 但是,首先查看代码解决方案会很有用。 即便如此,处理 Button 单击肯定需要代码。 这意味着 的代码隐藏文件XamlPlusCodePage必须包含 的 和 SliderClicked 事件的Button处理程序ValueChanged:

namespace XamlSamples { public partial class XamlPlusCodePage { public XamlPlusCodePage() { InitializeComponent(); } void OnSliderValueChanged(object sender, ValueChangedEventArgs args) { valueLabel.Text = args.NewValue.ToString("F3"); } async void OnButtonClicked(object sender, EventArgs args) { Button button = (Button)sender; await DisplayAlert("Clicked!", "The button labeled '" + button.Text + "' has been clicked", "OK"); } } }

回到 XAML 文件中, Slider 和 Button 标记需要包含引用这些处理程序的 ValueChanged 和 Clicked 事件的属性:

请注意,将处理程序分配给事件与将值分配给属性的语法相同。 此外,若要使 ValueChanged 的 Slider 事件处理程序使用 Label 显示当前值,处理程序需要从代码中引用该对象。 因此, Label 需要一个名称,该名称是使用 x:Name 属性指定的。 属性 x 的 x:Name 前缀指示此属性是 XAML 固有的。 分配给 x:Name 属性的名称与 C# 变量名称具有相同的规则。 例如,它必须以字母或下划线开头,并且不包含嵌入空格。

事件处理程序 ValueChanged 现在可以将 设置为 Label 显示新 Slider 值,该值可从事件参数获取:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args) { valueLabel.Text = args.NewValue.ToString("F3"); }

或者,处理程序可以从 参数获取 Slider 生成此事件的对象, sender 并从中获取 Value 属性:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args) { valueLabel.Text = ((Slider)sender).Value.ToString("F3"); }

结果是,对 的任何 Slider 操作都会导致其值显示在 中 Label:

在上面的示例中, Button 通过显示带有 按钮的 的 警报Text来模拟对事件的响应Clicked。 因此,事件处理程序可以将 参数强制转换为 sender , Button 然后访问其属性:

async void OnButtonClicked(object sender, EventArgs args) { Button button = (Button)sender; await DisplayAlert("Clicked!", "The button labeled '" + button.Text + "' has been clicked", "OK"); }

方法 OnButtonClicked 定义为 , async 因为 DisplayAlert 该方法是异步的,并且应以 await 运算符开头,该运算符在方法完成时返回 。 由于此方法从 sender 参数获取Button触发 事件,因此同一处理程序可用于多个按钮。

后续步骤

XAML 主要用于实例化和初始化对象。 但通常,必须将属性设置为无法轻松表示为 XML 字符串的复杂对象,有时必须在子类上设置由一个类定义的属性。 这两个需求需要 属性元素 和 附加属性的基本 XAML 语法功能。

基本 XAML 语法



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有