视频讲解

第3章〓宝剑锋从磨砺出〓梅花香自苦寒来——MAUI开发理论
3.1XAML可扩展的应用程序标记语言
3.1.1XAML概述

XAML(eXtensible Application Markup Language)是基于XML的可扩展应用程序标记语言。XAML具有跨语言、跨平台、层次化、可读性的特点，是一种声明式的、具有层次结构的标记性语言，主要用于界面设计。XAML组件包括*.xaml 界面文件和
*.xaml.cs代码文件。这样做的好处是将界面设计和业务逻辑相分离，实现界面与逻辑的解耦，提升可维护性、可理解性、可测试性。XAML能够方便地实现数据绑定机制，实现MVVM设计模式。Visual Studio能够支持XAML热重载，实时修改界面代码后，调试过程无须重启，能够在UI上形成快速迭代，提升工作效率。Visual Studio还能够支持XAML可视化，提供XAML可视化树，使用属性视图能够方便地对属性进行编辑操作。目前，.NET MAUI应用程序中没有针对XAML的视觉设计器。

XAML由以下元素组成。

声明。XAML文件根节点属性。包括XAML命名空间引用声明、XAML动态库引用声明、XAML类引用声明、XAML标记声明。

对象。基于XAML描述，可创建、可实例化。包括容器、控件、资源。

资源。与对象关联的存储或定义，具有统一定义数据、样式或行为的功效。包括数据资源、样式资源、模板资源。

属性。定义控件的数据、外观或行为。包括普通属性、内容属性、附加属性。

模板。定义控件的整体效果，具有复用性。

触发器。能够根据事件或属性变化更改控件外观。

动画。提供渐变性、交互性、动态性效果。

标记扩展。自定义组件、控件，扩充标记。

3.1.2XAML基本语法

XAML是标准的XML，但是还包括自身的一些特性，如普通属性、内容属性、附加属性和标记扩展。

Visual Studio新建.NET MAUI XAML文件的方法是，在项目中选择文件夹后，右击，从弹出的快捷菜单中选择“菜单项添加”→“类”命令，然后选择.NET MAUI ContentPage(XAML)模板，如图31所示，并输入文件名。这样在选中的文件夹下面自动生成XAML文件和XAML文件相对应的类文件。XAML文件相对应的类文件默认是隐藏的，需要在Visual Studio中展开才能看到。



图31新建.NET MAUI ContentPage(XAML)


【例31】XAML基本语法。

NewPage1.xaml代码如下： 



1<?xml version="1.0" encoding="UTF-8" ?>

2<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

3xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

4x:Class="MAUIDemo.Pages.NewPage1"

5Title="NewPage1">

6<VerticalStackLayout>

7<Label

8Text="Welcome to .NET MAUI!"

9VerticalOptions="Center"





10HorizontalOptions="Center" />

11</VerticalStackLayout>

12</ContentPage>


首行和普通XML一样，声明了XML文件的版本号和编码方式。ContentPage是内容页面，对应的属性含义详见3.1.4节内容。内容部分定义了VerticalStackLayout（垂直布局）。内部包括Label（标签）控件，具有Text（文本）属性，属性值显示Welcome to.NET MAUI!，VerticalOptions 垂直对齐方式属性是Center（居中）显示和HorizontalOptions水平对齐方式属性也是Center显示。属性统一使用键值对的方式进行定义，中间使用赋值运算符，属性值使用双引号进行包裹。XAML中的标签可以采用单标签或双标签的形式。

NewPage1.xaml.cs代码如下：



1namespace MAUIDemo.Pages;

2

3public partial class NewPage1 : ContentPage

4{

5public NewPage1()

6{

7InitializeComponent();

8}

9}


NewPage1.xaml.cs是NewPage1.xaml 对应的代码文件。NewPage1类继承ContentPage类，属于分部类。构造方法调用InitializeComponent()完成界面控件初始化操作。命名空间与XAML文件中 x:Class相对应。

3.1.3XAML标记扩展

XAML标记扩展的目的是提升扩展性和灵活性。下面直接引入示例展示XAML标记扩展的各种使用方式。

【例32】XAML标记扩展。



1<VerticalStackLayout x:Name="vStackLayout">

2<Label

3BackgroundColor="Blue"

4HorizontalOptions="Center"

5Text="属性示例"

6VerticalOptions="Center"

7WidthRequest="300" />

8<Label BackgroundColor="Orange" Text="x:StaticExtension成员">

9<Label.WidthRequest>

10<x:StaticExtension Member="core:XAMLConstants.WidthRequest" />

11</Label.WidthRequest>

12</Label>

13<Label BackgroundColor="Red" Text="x:Static成员">

14<Label.WidthRequest>

15<x:Static Member="core:XAMLConstants.WidthRequest" />

16</Label.WidthRequest>

17</Label>

18<Label





19BackgroundColor="Green"

20Text="x:StaticExtension成员"

21WidthRequest="{x:StaticExtension Member=core:XAMLConstants.WidthRequest}" />

22<Label

23BackgroundColor="Gray"

24Text="x:Static Member=core"

25WidthRequest="{x:Static Member=core:XAMLConstants.WidthRequest}" />

26<Label

27BackgroundColor="Yellow"

28Text="x:Static core"

29WidthRequest="{x:Static core:XAMLConstants.WidthRequest}" />

30<Label

31BackgroundColor="Violet"

32HeightRequest="{x:Static sys:Math.E}"

33Scale="5"

34Text="x:Static sys"

35WidthRequest="{x:Static sys:Math.PI}" />

36<Slider

37x:Name="slider1"

38HorizontalOptions="Center"

39Maximum="100"

40WidthRequest="300" />

41<Label BindingContext="{x:Reference slider1}" Text="{Binding Value}" />

42<ListView

43HorizontalOptions="Center"

44VerticalOptions="Center"

45WidthRequest="300">

46<ListView.ItemsSource HorizontalOptions="Center">

47<x:Array Type="{x:Type sys:String}">

48<sys:String>x:Array AAA</sys:String>

49<sys:String>x:Array BBB</sys:String>

50<sys:String>x:Array CCC</sys:String>

51</x:Array>

52</ListView.ItemsSource>

53</ListView>

54<Label

55BackgroundColor="DarkOliveGreen"

56FontFamily="{x:Null}"

57Text="OnPlatform" />

58<Label

59BackgroundColor="Aqua"

60Text="OnPlatform"

61WidthRequest="{OnPlatform 300,

62iOS=350,

63Android=250,

64Tizen=260,

65MacCatalyst=320}" />

66<Label BackgroundColor="{OnIdiom LightGreen, Phone=Yellow, Desktop=Green, Tablet=Orange}" Text="OnIdiom" />

67<Grid BackgroundColor="{AppThemeBinding Light={StaticResource DayModePrimaryColor}, Dark={StaticResource NightModePrimaryColor}}" WidthRequest="300">

68<Button Style="{StaticResource ButtonTheme}" Text="AppThemeBinding" />

69</Grid>

70<Label BackgroundColor="{core:RGB R=150, G=80, B=120}" Text="IMarkupExtension" />

71</VerticalStackLayout>


上述示例从上往下依次对应标记扩展的使用方式。

属性设置。类似HTML/XML属性语法，对控件设置相应的属性。

静态扩展。使用x:StaticExtension标记扩展并配置Member属性设置相应的属性。

静态引用。使用x:Static标记扩展并配置Member属性设置相应的属性。

插值静态扩展。使用x:StaticExtension标记扩展结合花括号插值语法并配置Member属性设置相应的属性。

插值静态引用。使用x:Static标记扩展结合花括号插值语法并配置Member属性设置相应的属性。

插值静态引用。使用x:Static标记扩展结合花括号插值语法并省略Member属性直接设置相应的属性。

命名空间引用。通过命名空间机制引入变量作为属性值。

控件引用。BindingContext（绑定上下文）属性中使用x:Reference标记扩展引用之前通过x:Name定义的控件，Binding（绑定）属性配置绑定的变量。

类型标记扩展。使用x:Type标记扩展，后面指定类型参数。

数组标记扩展。使用x:Array标记扩展，通过Type属性指定数组元素类型。

空值标记扩展。使用x:Null标记扩展，表示空。

平台标记扩展。使用OnPlatform标记扩展，分别设置iOS、Android、Tizen、MacCatalyst 不同平台显示的参数值。

习语标记扩展。使用OnIdiom标记扩展，分别设置Phone 手机、Desktop 桌面、Tablet 平板不同终端显示的参数值。

主题标记扩展。使用AppThemeBinding标记扩展，结合 StaticResource引用相应的资源展示不同的主题。

自定义标记扩展。继承IMarkupExtension接口自定义标记扩展。

RGBExtension.cs代码如下：



1namespace MAUIDemo.Core

2{

3public class RGBExtension : IMarkupExtension<Color>

4{

5public int R

6{

7get;

8set;

9}

10public int G

11{

12get;

13set;

14}

15public int B

16{

17get;

18set;

19}

20public Color ProvideValue(IServiceProvider serviceProvider)





21{

22return Color.FromRgb(R,G,B);

23}

24object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)

25{

26return (this as IMarkupExtension<Color>).ProvideValue(serviceProvider);

27}

28}

29}


上述代码展示了自定义标记扩展的使用，RGBExtension 继承IMarkupExtension，泛型参数是Color（颜色）类。重写ProvideValue()方法完成对象转换。

XAML标记扩展涉及的语法现象示例程序的运行结果如图32所示。



图32XAML标记扩展涉及的语法现象示例程序的运行结果


3.1.4XAML命名空间

命名空间是用于组织类文件的层次化结构。例33包含了常见的命名空间引用情况。

【例33】XAMLPage.xaml 命名空间。



1<ContentPage

2x:Class="MAUIDemo.Pages.XAMLPage"

3xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

4xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

5xmlns:core="clr-namespace:MAUIDemo.Core"

6xmlns:sys="clr-namespace:System;assembly=mscorlib"

7Title="标记扩展">


ContentPage根节点包含了6个属性。

x:Class。声明当前组织XAML命名空间的类。

xmlns。XML Namespaces 声明了.NET MAUI命名空间。

xmlns:x。声明了.NET MAUI关于 xaml的命名空间。

xmlns:core。引入自定义的命名空间。clrnamespace指定命名空间前缀。

xmlns:sys。引入系统定义的命名空间。clrnamespace指定命名空间前缀，assembly属性指定命名空间对应的程序集。

Title。声明当前页面标题。

3.1.5XAML参数传递

XAML参数传递主要通过x:Arguments标记扩展。

【例34】XAML参数传递。



1<Label Text="x:Arguments">

2<Label.BackgroundColor>

3<Color>

4<x:Arguments>

5<x:Int32>110</x:Int32>

6<x:Int32>233</x:Int32>

7<x:Int32>89</x:Int32>

8</x:Arguments>

9</Color>

10</Label.BackgroundColor>

11</Label>

12<Label Text="x:Arguments工厂方式">

13<Label.BackgroundColor>

14<Color x:FactoryMethod="FromRgb">

15<x:Arguments>

16<x:Int32>199</x:Int32>

17<x:Int32>22</x:Int32>

18<x:Int32>98</x:Int32>

19</x:Arguments>

20</Color>

21</Label.BackgroundColor>

22</Label>


XAML参数传递构造对象有如下方式。

参数构造。使用x:Arguments标记扩展，传入参数构造相应对象。

工厂构造。使用x:Arguments标记扩展，结合 x:FactoryMethod标记扩展利用工厂方法传入参数构造相应对象。

3.1.6XAML动态加载

【例35】XAML动态加载。

XAML动态加载界面代码如下：



1<Button

2Command="{Binding OnClick}"

3CommandParameter="{x:Type Stepper}"

4Text="x:Type" />

5<Button Command="{Binding OnRuntimeClick}" Text="运行时加载" />

6<Button Command="{Binding OnFindClick}" Text="运行时查找" />


XAML动态加载逻辑代码如下：



1public ICommand OnClick

2{

3get;

4set;

5}

6public ICommand OnRuntimeClick

7{

8get;

9set;

10}

11public ICommand OnFindClick

12{

13get;

14set;

15}

16OnClick = new Command<Type>((Type type) =>

17{

18View view = (View)Activator.CreateInstance(type);

19view.HorizontalOptions = LayoutOptions.Center;

20view.VerticalOptions = LayoutOptions.Center;

21vStackLayout.Insert(9, view);

22});

23OnRuntimeClick = new Command(() =>

24{

25string xaml = "<Label Text=＼"OnRuntimeClick＼" HorizontalOptions=＼"Center＼" VerticalOptions=＼"Center＼" BackgroundColor=＼"Olive＼" WidthRequest=＼"300＼"/>";

26Label label = new Label().LoadFromXaml(xaml);

27vStackLayout.Insert(18, label);

28});

29OnFindClick = new Command(async () =>

30{

31string xaml = """

32<?xml version="1.0" encoding="utf-8"?>

33<ContentPage

34xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

35xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

36<Button Text="OnFindClick"x:Name="btn" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Olive" WidthRequest="300"/>

37</ContentPage>

38""";

39ContentPage page = new ContentPage().LoadFromXaml(xaml);





40Button btn = page.FindByName<Button>("btn");

41await DisplayAlert("信息", btn.Text, "确认");

42});


上述代码涉及的3个方法如下。

OnClick()。通过CommandParameter属性传入Stepper对象调用Activator 静态方法CreateInstance()实例化，设置参数后插入垂直布局中索引值为9的位置。

OnRuntimeClick()。运行时加载。运行时通过调用LoadFromXaml()方法动态加载XAML构建的Label控件。

OnFindClick()。运行时查找。运行时通过调用FindByName()方法动态查找指定名称的按钮控件，查找后对按钮控件的属性进行弹窗展示。

3.1.7XAML编译选项

XAML文件格式是*.xaml，一方面特定于不同平台的处理器将XAML文件*.xaml解释翻译成描述界面的中间语言； 另一方面把处理后的中间语言与C#代码*.xaml.cs进行链接，二者被.NET编译器进行编译，最终形成可执行程序。.NET MAUI应用程序默认开启XAML编译功能。XAML编译器直接将XAML文件编译为中间语言，通过编译过程一方面检查语法正确性，另一方面优化代码并减少最终生成程序集文件的大小。

关闭编译功能。类文件上方添加注解［XamlCompilation (XamlCompilationOptions.Skip)］ 关闭XAML编译器编译功能。

开启编译功能。类文件上方添加注解［XamlCompilation(XamlCompilationOptions.Compile)］ 开启XAML编译器编译功能。

3.2MAUI生命周期

MAUI包含4种状态： Not Running（未运行）、Running（运行）、Stopped（停止）和Deactivated（去激活）。其中Not Running状态尚未加载至内存。Window类的跨平台生命周期事件会导致上述状态之间的切换。MAUI生命周期状态转换如图33所示。



图33MAUI生命周期状态转换


MAUI事件针对不同平台映射到不同的方法。

Activated。激活窗口后引发。

Created。创建窗口后引发。

Deactivated。窗口失去焦点时引发。

Destroying。窗口销毁时引发。

Resumed。应用恢复时引发。

Stopped。窗口不可见时引发。

MAUI不同平台生命周期的对应关系见表31。


表31MAUI不同平台生命周期的对应关系





事件Android平台iOS平台Windows平台


CreatedOnPostCreateFinishedLaunchingCreated
ActivatedOnResumeOnActivatedActivated(CodeActivated and PointerActivated)
DeactivatedOnPauseOnResignActivationActivated(Deactivated)
StoppedOnStopDidEnterBackgroundVisibilityChanged
ResumedOnRestartWillEnterForegroundResumed
DestroyingOnDestroyWillTerminateClosed


例36中的代码重写了CreateWindow()方法，并向Window对象添加Created()事件委托，内部完成个性化创建逻辑即可。读者实验时可在相应位置增加断点进行调试。

【例36】MAUI生命周期。

App.xaml.cs代码如下：



1public partial class App : Application

2{

3protected override Window CreateWindow(IActivationState activationState)

4{

5Window window = base.CreateWindow(activationState);

6window.Created += (sender, e) =>

7{

8// 创建逻辑

9};

10return window;

11}

12// 此处省略其他代码

13}


3.3MAUI行为特性

除用子类继承控件的方式外，为现有控件增加新功能和特性还可以通过行为操作，这样做能够增强扩展性，如图34所示。



图34通过行为操作为现有控件增加新功能


图34中的行为特性演示包括增加和删除行为。

【例37】MAUI行为特性。

BehaviorPage.xaml代码如下：



1<?xml version="1.0" encoding="UTF-8" ?>

2<ContentPage





3x:Class="MAUIDemo.Pages.BehaviorPage"

4xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

5xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

6xmlns:local="clr-namespace:MAUIDemo.Behaviors"

7Title="行为操作">

8<ContentPage.Resources>

9<!-- 此处省略其他代码 -->

10<Style x:Key="PositiveValidationStyle" TargetType="Entry">

11<Style.Setters>

12<Setter Property="HorizontalOptions" Value="Center" />

13<Setter Property="WidthRequest" Value="300" />

14<Setter Property="local:PositiveValidationBehavior.AttachBehavior" 
Value="true" />

15</Style.Setters>

16</Style>

17</ContentPage.Resources>

18<VerticalStackLayout>

19<Entry Placeholder="行为示例(输入正数)">

20<Entry.Behaviors>

21<local:PositiveValidationBehavior />

22</Entry.Behaviors>

23</Entry>

24<Entry

25x:Name="entry2"

26Placeholder="样式行为(输入正数)"

27Style="{StaticResource PositiveValidationStyle}" />

28<Button Command="{Binding OnAddClick}" Text="增加行为" />

29<Button Command="{Binding OnDeleteClick}" Text="删除行为" />

30</VerticalStackLayout>

31</ContentPage>


行为演示页面中，页面资源中定义了Entry控件的HorizontalOptions水平对齐属性、WidthRequest 宽度属性，PositiveValidationBehavior为自定义行为属性。页面中包含两种行为使用方式。上面的Entry控件通过Entry.Behaviors标记扩展调用PositiveValidationBehavior实现的相关操作，下面的Entry控件引用了资源部分定义的样式资源，通过定义的样式资源控制行为。

BehaviorPage.xaml.cs代码如下：



1using MAUIDemo.Behaviors;

2using System.Windows.Input;





3

4namespace MAUIDemo.Pages;

5

6public partial class BehaviorPage : ContentPage

7{

8public ICommand OnDeleteClick

9{

10get;

11set;

12}

13public ICommand OnAddClick

14{

15get;

16set;

17}

18public BehaviorPage()

19{

20InitializeComponent();

21OnDeleteClick = new Command<Type>((Type type) =>

22{

23Behavior del = entry2.Behaviors.FirstOrDefault(behavior => behavior is PositiveValidationBehavior);

24if (del != null)

25{

26entry2.Behaviors.Remove(del);

27}

28});

29OnAddClick = new Command<Type>((Type type) =>

30{

31entry2.Behaviors.Add(new PositiveValidationBehavior());

32});

33BindingContext = this;

34}

35}


控件的Behaviors属性包含了涉及的全部行为列表，增加行为逻辑中向该列表中追加了自定义的PositiveValidationBehavior 行为。删除行为逻辑中遍历全部行为列表，如果找到PositiveValidationBehavior 行为则删除。

PositiveValidationBehavior.cs代码如下：



1using Microsoft.Maui.Controls;

2

3namespace MAUIDemo.Behaviors

4{

5public class PositiveValidationBehavior : Behavior<Entry>

6{

7public static readonly BindableProperty AttachBehaviorProperty = BindableProperty.CreateAttached("AttachBehavior", typeof(bool), typeof(PositiveValidationBehavior), false, propertyChanged: OnAttachBehaviorChanged);

8protected override void OnAttachedTo(Entry entry)

9{

10entry.TextChanged += OnEntryTextChanged;

11base.OnAttachedTo(entry);

12}

13protected override void OnDetachingFrom(Entry entry)






14{

15entry.TextChanged -= OnEntryTextChanged;

16base.OnDetachingFrom(entry);

17}

18void OnEntryTextChanged(object sender, TextChangedEventArgs args)

19{

20_ = Int32.TryParse(args.NewTextValue, out int result);

21bool isValid = result > 0;

22((Entry)sender).TextColor = isValid ? Colors.LightGreen : Colors.Red;

23}

24public static bool GetAttachBehavior(BindableObject view)

25{

26return (bool)view.GetValue(AttachBehaviorProperty);

27}

28public static void SetAttachBehavior(BindableObject view, bool value)

29{

30view.SetValue(AttachBehaviorProperty, value);

31}

32static void OnAttachBehaviorChanged(BindableObject view, object oldValue, object newValue)

33{

34if (view is not Entry entry)

35{

36return;

37}

38if (Convert.ToBoolean(newValue))

39{

40entry.Behaviors.Add(new PositiveValidationBehavior());

41}

42else

43{

44Behavior del = entry.Behaviors.FirstOrDefault(behavior => behavior is PositiveValidationBehavior);

45if (del != null)

46{

47entry.Behaviors.Remove(del);

48}

49}

50}

51}

52}


具体自定义行为实现时需要继承Behavior<T>类，控件类型作为泛型参数。自定义的PositiveValidationBehavior正数验证行为定义了静态只读的BindableProperty 可绑定的属性。通过GetAttachBehavior()和SetAttachBehavior()实现该属性的存取和访问。可绑定属性属性值发生变化时调用OnAttachBehaviorChanged()方法，该方法首先判断是否为Entry控件导致，否则直接返回，如果为Entry控件导致，则根据输入值情况进行行为的增减。如果输入值转换为布尔型变量为true，追加PositiveValidationBehavior 行为，否则删除PositiveValidationBehavior行为。OnAttachedTo()和OnAttachedFrom()方法分别用于增减OnEntryTextChanged()事件委托。OnEntryTextChanged()方法用于判断输入数据正负，如果为正则设置为浅绿色。

3.4MAUI手势特性

MAUI手势特性是基于硬件特性抽象出的手势识别器。用户发起的连续手势动作导致屏幕识别位置的连续变更，对应数据参数信息状态发生变化。包括如下手势特性。

DragGestureRecognizer。拖动手势。DragStarting是开始拖放事件。

DropGestureRecognizer。拖放手势。DragOver是拖放过程事件，Drop是拖放完毕事件。

PanGestureRecognizer。移动手势。PanUpdated是移动更新事件。

TapGestureRecognizer。触摸手势。NumberOfTapsRequired属性代表触发事件的触摸次数，Tapped是触摸事件。

SwipeGestureRecognizer。滑动手势。Direction属性代表滑动方向，Swiped是滑动事件。

图35所示为手势操作的运行效果。



图35手势操作的运行效果


【例38】MAUI手势特性。

GesturePage.xaml代码如下：



1<?xml version="1.0" encoding="UTF-8" ?>

2<ContentPage

3x:Class="MAUIDemo.Pages.GesturePage"

4xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

5xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

6xmlns:viewmodels="clr-namespace:MAUIDemo.ViewModels"

7Title="手势操作">

8<VerticalStackLayout>

9<Image HeightRequest="50" Source="dotnet_bot.png">

10<Image.GestureRecognizers>

11<DragGestureRecognizer DragStarting="OnDragStarting" />






12<DropGestureRecognizer DragOver="OnDragOver" />

13<DropGestureRecognizer Drop="OnDrop" />

14<PanGestureRecognizer PanUpdated="OnPanUpdated" />

15<TapGestureRecognizer NumberOfTapsRequired="2" Tapped="OnTapped" />

16</Image.GestureRecognizers>

17</Image>

18<Grid>

19<viewmodels:PinchViewModel>

20<Image HeightRequest="50" Source="dotnet_bot.png" />

21</viewmodels:PinchViewModel>

22</Grid>

23<BoxView

24HeightRequest="50"

25WidthRequest="50"

26Color="Chartreuse">

27<BoxView.GestureRecognizers>

28<SwipeGestureRecognizer Direction="Left" Swiped="OnSwipedAsync" />

29SwipeGestureRecognizer Direction="Right" Swiped="OnSwipedAsync" />

30<SwipeGestureRecognizer Direction="Up" Swiped="OnSwipedAsync" />

31<SwipeGestureRecognizer Direction="Down" Swiped="OnSwipedAsync" />

32</BoxView.GestureRecognizers>

33</BoxView>

34</VerticalStackLayout>

35</ContentPage>


上述代码针对控件的GestureRecognizers标记扩展进行手势相关的配置。Image是图片控件，BoxView是盒视图控件。无论是何种手势，ContentView内容视图内部维护着GestureRecognizers手势识别器这个数据结构，包含多个手势识别器的链表。

GesturePage.xaml.cs代码如下：



1namespace MAUIDemo.Pages;

2

3public partial class GesturePage : ContentPage

4{

5double X, Y;

6public GesturePage()

7{

8InitializeComponent();

9}

10void OnDragStarting(object sender, DragStartingEventArgs e)

11{

12}

13void OnDragOver(object sender, DragEventArgs e)

14{

15e.AcceptedOperation = DataPackageOperation.None;

16}

17async void OnDrop(object sender, DropEventArgs e)

18{

19}

20void OnPanUpdated(object sender, PanUpdatedEventArgs e)

21{

22switch (e.StatusType)

23{

24case GestureStatus.Running:





25Content.TranslationX = Math.Clamp(X + e.TotalX, -Content.Width, Content.Width);


26Content.TranslationY = Math.Clamp(Y + e.TotalY, -Content.Height, Content.Height);

27break;

28case GestureStatus.Completed:

29X = Content.TranslationX;

30Y = Content.TranslationY;

31break;

32}

33}

34async void OnSwipedAsync(object sender, SwipedEventArgs e)

35{

36switch (e.Direction)

37{

38case SwipeDirection.Left:

39await DisplayAlert("信息", "Left", "确认");

40break;

41case SwipeDirection.Right:

42await DisplayAlert("信息", "Right", "确认");

43break;

44case SwipeDirection.Up:

45await DisplayAlert("信息", "Up", "确认");

46break;

47case SwipeDirection.Down:

48await DisplayAlert("信息", "Down", "确认");

49break;

50}

51}

52async void OnTapped(object sender, EventArgs e)

53{

54await DisplayAlert("信息", "OnTapped", "确认");

55}

56}


对应逻辑部分的代码展示了手势触发的各种事件执行逻辑。特别说明一下PanUpdatedEventArgs是移动手势更新事件参数，根据StatusType枚举确定移动手势更新是Running（运行）态，还是Completed（完成）态。SwipedEventArgs是滑动手势更新事件参数，根据Direction枚举确定滑动手势的滑动方向。

PinchViewModel.cs代码如下：



1namespace MAUIDemo.ViewModels

2{

3public class PinchViewModel : ContentView

4{

5double currentScale = 1;

6double startScale = 1;

7double xOffset = 0;

8double yOffset = 0;

9public PinchViewModel()

10{

11PinchGestureRecognizer pinchGesture = new();

12pinchGesture.PinchUpdated += OnPinchUpdated;

13GestureRecognizers.Add(pinchGesture);





14}

15private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)

16{

17if (e.Status == GestureStatus.Started)

18{

19startScale = Content.Scale;

20Content.AnchorX = 0;

21Content.AnchorY = 0;

22}

23if (e.Status == GestureStatus.Running)

24{

25currentScale += (e.Scale - 1) * startScale;

26currentScale = Math.Max(1, currentScale);

27double renderedX = Content.X + xOffset;

28double deltaX = renderedX / Width;

29double deltaWidth = Width / (Content.Width * startScale);

30double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

31double renderedY = Content.Y + yOffset;

32double deltaY = renderedY / Height;

33double deltaHeight = Height / (Content.Height * startScale);

34double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

35double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);

36double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

37Content.TranslationX = Math.Clamp(targetX, -Content.Width * (currentScale - 1), 0);

38Content.TranslationY = Math.Clamp(targetY, -Content.Height* (currentScale
 - 1), 0);

39Content.Scale = currentScale;

40}

41if (e.Status == GestureStatus.Completed)

42{

43xOffset = Content.TranslationX;

44yOffset = Content.TranslationY;

45}

46}

47}

48}


上述代码是微软公司官方提供的移动手势视图模型，用于完成手势操作的正交变换(仅涉及平移和缩放，不涉及旋转)。构造方法通过构造PinchGestureRecognizer（移动手势识别器）并增加事件委托，将移动手势识别器追加至内部的GestureRecognizers（手势识别器）列表数据结构中。OnPinchUpdated事件根据手势状态 Started（开始）、Running（运行）、Completed（完成）更新相关数据，实现手势操作的正交变换。

3.5MAUI数据绑定
3.5.1数据绑定概述

数据绑定是指将两个对象的属性进行关联，其中一个对象的属性发生变化引起另一个对象相关联的属性变化。涉及的两个对象称为目标对象和源对象。目标对象是继承BindableObject的可绑定对象。目标对象的BindingContext属性设置为源对象，调用SetBinding()方法后即可完成数据绑定。数据绑定的方法分为基本绑定、高级绑定、路径绑定、条件绑定、模型绑定。

3.5.2基本绑定

基本绑定是最简单的一种数据绑定。

【例39】基本绑定。



1<VerticalStackLayout>

2<Label x:Name="label1" Text="文本1" />

3<Label x:Name="label2" Text="文本2" />

4<Label

5x:Name="label3"

6BindingContext="{x:Reference Name=slider}"

7Rotation="{Binding Path=Value}"

8Text="文本3" />

9<Label

10x:Name="label4"

11BindingContext="{x:Reference slider}"

12Rotation="{Binding Value}"

13Text="文本4" />

14<Label x:Name="label5" Text="文本5">

15<Label.Rotation>

16<Binding Path="Value" Source="{x:Reference slider}" />

17</Label.Rotation>

18</Label>

19<VerticalStackLayout BindingContext="{x:Reference slider}">

20<Label

21x:Name="label6"

22Rotation="{Binding Value}"

23Text="文本6" />

24</VerticalStackLayout>

25<Slider

26x:Name="slider"

27Maximum="360"

28VerticalOptions="Center"

29WidthRequest="300" />

30<Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='The slider value is {0:F3}'}" />

31</VerticalStackLayout>


BindingPage.xaml.cs代码如下：



1namespace MAUIDemo.Pages;

2

3public partial class BindingPage : ContentPage

4{

5public BindingPage()

6{

7InitializeComponent();

8label1.BindingContext = slider;

9label1.SetBinding(Label.RotationProperty, "Value");


10label2.SetBinding(Label.RotationProperty, new Binding("Value", source: slider));

11}

12}


上述代码使用6种方式进行绑定，VerticalStackLayout垂直布局最后一个Label控件通过Binding Source={x:Reference slider}绑定了上面定义的Slider滑块控件，Path=Value是监控滑块控件的Value属性，StringFormat 使用字符串插值方法完成信息的格式化展示。实际使用时，绑定方式非常灵活，对应上述6个标签的基本绑定方式如下。

第1个标签采用C#代码方式进行绑定，设置BindingContext并调用SetBinding()方法完成数据绑定，参数代表绑定的属性是标签的RotationProperty 旋转属性。

第2个标签采用C#代码方式进行绑定，直接调用SetBinding()的重载方法完成数据绑定，第一个参数代表绑定的属性是标签的RotationProperty 旋转属性，第二个参数使用Binding对象，采用绑定源控件属性和绑定源控件名称进行构造。

第3个标签采用XAML方式进行绑定，BindingContext使用{x:Reference Name=slider}指定源对象为Slider控件，Rotation（旋转）属性使用{Binding Path=Value}指定绑定的是Slider控件的Value属性。

第4个标签采用XAML方式进行绑定，与第3个标签不同的是，BindingContext和Rotation属性的表达采用简写方式。

第5个标签采用XAML方式进行绑定，采用XAML标记扩展<Label.Rotation>层级化方式进行绑定的定义。


图36基本绑定示例的运行效果




第6个标签采用XAML方式进行绑定，Label控件嵌套在VerticalStackLayout垂直布局内部，垂直布局为目标对象设置其BindingContext属性，再对嵌套在内部的Label控件进行Rotation属性设置绑定。

基本绑定示例的运行效果如图36所示。



3.5.3高级绑定

高级绑定分为自身绑定、绑定回退、相对绑定和模板绑定。

【例310】自身绑定。



1<Button

2BackgroundColor="Yellow"

3Text="自身绑定"

4WidthRequest="100"

5HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}" />


自身绑定是特殊的相对绑定。通过RelativeSource相对绑定关键字 Self引用自身，绑定通过Path参数指定WidthRequest。这样HeightRequest高度值和WidthRequest 宽度值相等。

【例311】绑定回退。



1<ContentPage.Resources>

2<sys:String x:Key="FallBack">绑定回退</sys:String>

3</ContentPage.Resources>

4<Button

5BackgroundColor="LawnGreen"

6Text="{Binding Parameter, FallbackValue={StaticResource FallBack}}"





7WidthRequest="100"

8HeightRequest="100"/>


绑定回退是指因找不到相应的数据导致绑定失败时，为提升用户感知而显示的临时信息，通过FallbackValue属性指定。上述代码引用了资源中的FallBack字符串关键字，对应绑定回退字样。

将相对绑定和模板绑定合并在一个示例中，下面首先定义了GoodViewTemplate模板资源。该模板资源通过Frame框架实现，Frame框架通过RelativeSource相对绑定绑定到了TemplatedParent父模板中，意味着该框架嵌入了后面的GoodView自定义控件中。Frame框架内部通过VerticalStackLayout垂直布局排放3个标签控件，第一个标签控件对Name商品名称进行了绑定，第二个标签控件用于分隔符显示，第三个标签控件对Description商品描述进行了绑定。GoodView自定义商品视图控件的样式资源中设置了GoodViewTemplate控件模板属性，该控件模板属性引用了之前定义的GoodViewTemplate模板资源，通过这种方式实现模板绑定。

【例312】相对绑定和模板绑定。

相对绑定和模板绑定资源代码如下：



1<ContentPage.Resources>

2<ControlTemplate x:Key="GoodViewTemplate">

3<Frame BackgroundColor="{TemplateBinding ControlBackgroundColor}" BindingContext="{Binding Source={RelativeSource TemplatedParent}}">

4<VerticalStackLayout>

5<Label Text="{TemplateBinding Name}" />

6<Label BackgroundColor="Red" HeightRequest="20"/>

7<Label Text="{TemplateBinding Description}"/>

8</VerticalStackLayout>

9</Frame>

10</ControlTemplate>

11<Style TargetType="controls:GoodView">

12<Setter Property="ControlTemplate" Value="{StaticResource GoodViewTemplate}" />

13</Style>

14</ContentPage.Resources>


GoodView自定义商品控件继承ContentView类，内部定义了BindableProperty可绑定属性NameProperty商品名称属性和DescriptionProperty商品描述属性，这两个可绑定属性作为Name商品名称和Description商品描述访问器的参数。同时，Name商品名称和Description商品描述使用nameof 运算符作为对应可绑定属性的参数。

GoodView.cs代码如下：



1namespace MAUIDemo.Controls

2{

3public class GoodView : ContentView

4{

5public static readonly BindableProperty NameProperty = BindableProperty.Create(nameof(Name), typeof(string), typeof(GoodView), String.Empty);

6public static readonly BindableProperty DescriptionProperty = BindableProperty.Create(nameof(Description), typeof(string), typeof(GoodView), String.Empty);


7public string Name





8{

9get => (string)GetValue(NameProperty);

10set => SetValue(NameProperty, value);

11}

12public string Description

13{

14get => (string)GetValue(DescriptionProperty);

15set => SetValue(DescriptionProperty, value);

16}

17public new Color BackgroundColor

18{

19get;

20set;

21}

22}

23}




图37高级绑定示例的运行效果

高级绑定(包括自身绑定、绑定回退、相对绑定、模板绑定)示例的运行效果如图37所示。


3.5.4路径绑定

路径绑定是特殊的数据绑定，通过设置绑定的Path属性指定绑定的数据对象。路径绑定通过时间选择器控件进行演示。

例313的代码中，两个Label控件通过设置绑定的Path属性分别绑定了TimePicker（时间选择器）控件的TotalSeconds 秒数和DateTimeFormat.DayNames［0］ 每周的第一天。

【例313】路径绑定。



1<VerticalStackLayout>

2<TimePicker

3x:Name="timePicker"

4HorizontalOptions="Center"

5VerticalOptions="Center" />

6<Label Text="{Binding Source={x:Reference timePicker}, Path=Time.TotalSeconds, StringFormat='{0}总秒数'}" />

7<Label Text="{Binding Source={x:Static globe:CultureInfo.CurrentCulture}, Path=DateTimeFormat.DayNames［0］, StringFormat='每周的第一天是{0}'}" />


8</VerticalStackLayout>




图38路径绑定示例的运行效果

路径绑定示例的运行效果如图38所示。


3.5.5条件绑定

条件绑定是自定义满足某些条件的绑定逻辑，自定义的类需要继承IMultiValueConverter接口。

【例314】条件绑定。

条件绑定资源代码如下：



1<ContentPage.Resources>

2<converters:AllSatisfyMultiConverter x:Key="allSatisfyMultiConverter" />

3<ContentPage.Resources>


条件绑定界面代码如下：



1<HorizontalStackLayout HorizontalOptions="Center">

2<CheckBox>

3<CheckBox.IsChecked>

4<MultiBinding Converter="{StaticResource allSatisfyMultiConverter}">

5<Binding Path="Good.Fresh" />

6<Binding Path="Good.Inventory" />

7</MultiBinding>

8</CheckBox.IsChecked>

9</CheckBox>

10</HorizontalStackLayout>


条件绑定界面引用了前面定义的条件绑定资源。

AllSatisfyMultiConverter.cs代码如下：



1using System.Globalization;

2

3namespace MAUIDemo.Converters

4{

5public class AllSatisfyMultiConverter : IMultiValueConverter

6{

7public object Convert(object［］ values, Type targetType, object parameter, CultureInfo culture)

8{

9if (values == null || !targetType.IsAssignableFrom(typeof(bool)))

10{

11return false;

12}

13foreach (var value in values)

14{

15if (value is not bool flag)

16{

17return false;

18}

19else if (!flag)

20{

21return false;

22}

23}

24return true;

25}

26public object［］ ConvertBack(object value, Type［］ targetTypes, object parameter, CultureInfo culture)

27{

28if (value is not bool flag || targetTypes.Any(t => !t.IsAssignableFrom(typeof(bool))))

29{

30return null;

31}

32if (flag)

33{






34return targetTypes.Select(t => (object)true).ToArray();

35}

36else

37{

38return null;

39}

40}

41}

42}


条件绑定转换器需要实现Convert()方法和ConvertBack()方法用于实现类型之间的相互转换。上述示例中，如果商品满足是Fresh(新鲜)的且有Inventory(库存)，则CheckBox（复选框）控件默认效果是选中。

3.5.6模型绑定

实际应用程序中，数据绑定与MVVM模型紧密结合，相辅相成、相得益彰。界面中应用视图模型，将视图模型中的数据在视图中动态呈现，实现模型绑定。

首先定义RGBViewModel类，继承INotifyPropertyChanged接口的目的是保证属性数据变化时及时通知视图层，从而实现数据属性的一致性变化。定义Color成员变量，由Hue（色调）、Saturation（饱和度）、Luminosity（亮度）3个分量进行描述。分别对这4个属性设置访问器。

【例315】模型绑定。

RGBViewModel.cs代码如下：



1using System.ComponentModel;

2

3namespace MAUIDemo.ViewModels

4{

5public class RGBViewModel : INotifyPropertyChanged

6{

7private Color color;

8float hue;

9float saturation;

10float luminosity;

11public event PropertyChangedEventHandler PropertyChanged;

12public float Hue

13{

14get

15{

16return hue;

17}

18set

19{

20if (hue != value)

21{

22Color = Color.FromHsla(value, saturation, luminosity);

23}

24}

25}

26public float Saturation

27{






28get

29{

30return saturation;

31}

32set

33{

34if (saturation != value)

35{

36Color = Color.FromHsla(hue, value, luminosity);

37}

38}

39}

40public float Luminosity

41{

42get

43{

44return luminosity;

45}

46set

47{

48if (luminosity != value)

49{

50Color = Color.FromHsla(hue, saturation, value);

51}

52}

53}

54public Color Color

55{

56get

57{

58return color;

59}

60set

61{

62if (color != value)

63{

64color = value;

65hue = color.GetHue();

66saturation = color.GetSaturation();

67luminosity = color.GetLuminosity();

68PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hue"));

69PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Saturation"));

70PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Luminosity"));

71PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color"));

72}

73}

74}

75}

76}


其次，在视图中定义资源，引用RGBViewModel 视图模型。

模型绑定资源代码如下：



1<ContentPage.BindingContext>

2<viewmodels:RGBViewModel Color="Teal" />

3</ContentPage.BindingContext>






4<ContentPage.Resources>

5<Style x:Key="SliderStyle" TargetType="Slider">

6<Setter Property="WidthRequest" Value="300" />

7<Setter Property="Minimum" Value="0" />

8<Setter Property="Maximum" Value="1" />

9</Style>

10</ContentPage.Resources>


最后，在界面中定义Grid（网格）布局，包含BoxView（盒视图）和3个Slider（滑块）控件。3个Slider控件引用资源定义的样式，Slider控件的Value属性绑定了RGBViewModel模型视图中的属性。

模型绑定界面代码如下：



1<Grid>

2<Grid.RowDefinitions>

3<RowDefinition Height="100" />

4<RowDefinition Height="100" />

5</Grid.RowDefinitions>

6<BoxView

7Grid.Row="0"

8WidthRequest="300"

9Color="{Binding Color}" />

10<StackLayout Grid.Row="1">

11<Slider Style="{StaticResource SliderStyle}" Value="{Binding Hue}" />

12<Slider Style="{StaticResource SliderStyle}"Value="{Binding Saturation}" />

13<Slider Style="{StaticResource SliderStyle}"Value="{Binding Luminosity}" />

14</StackLayout>

15</Grid>


模型绑定示例的运行效果如图39所示。



图39模型绑定示例的运行效果


3.5.7绑定转换器

通过定义绑定转换器进行数值转换，将转换后的对象赋值为相应的属性，从而改变控件的外观或行为。定义的转换器需要继承IValueConverter接口，重写Convert()和ConvertBack()两个方法。这两个方法完成类型的相互转换。

【例316】绑定转换器。


DoubleToBoolConverter.cs代码如下：



1using System.Globalization;

2

3namespace MAUIDemo.Converters

4{

5public class DoubleToBoolConverter : IValueConverter

6{

7public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

8{

9if (value == null || value.Equals(""))

10{

11return false;

12}

13_ = Double.TryParse(value.ToString(), out double res);

14return res * GetParameter(parameter) >= 0;

15}

16public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

17{

18int flag = GetParameter(parameter);

19return (bool)value ? flag : -flag;

20}

21private static int GetParameter(object parameter)

22{

23if (parameter is int || parameter is float || parameter is double)

24return (int)parameter;

25else if(parameter is string)

26return Int32.Parse(parameter.ToString());

27return 0;

28}

29}

30}


下面定义了绑定转换器资源。

绑定转换器资源代码如下：



1<ContentPage.Resources>

2<converters:DoubleToBoolConverter x:Key="doubleToBool" />

3</ContentPage.Resources>


绑定转换器界面中的Button控件引用了Entry输入条目控件，指定采用DoubleToBoolConverter转换器。界面将ConverterParameter作为Convert()和ConvertBack()两个方法的第三个参数进行传递。

绑定转换器界面代码如下：



1<VerticalStackLayout>

2<Entry

3x:Name="entry1"

4Placeholder="符号转换器"

5Text="" />

6<Button IsEnabled="{Binding Source={x:Reference entry1}, Path=Text, Converter={StaticResource doubleToBool}, ConverterParameter=-1}" Text="符号转换器" />

7</VerticalStackLayout>


绑定转换器示例的运行效果如图310所示。



图310绑定转换器示例的运行效果


3.6MAUI模板介绍
3.6.1控件模板

控件模板是为控件量身定做的个性化界面展示的组织方式。控件模板的实现方式有使用XAML定义或完全使用C#代码两种方式。本书中大量使用XAML定义模板，这种方式随处可见。完全使用C#代码的方式请读者参阅第4章的相关内容。

3.6.2数据模板

数据模板是为控件量身定做的个性化数据展示的组织方式。数据模板选择器是根据不同的条件适配不同的数据模板。下面自定义的ItemTemplateSelector（条目数据模板选择器）继承了DataTemplateSelector（数据模板选择器）。通过OnSelectTemplate()方法实现模板选择，该方法包含两个参数，第一个参数是模板名称前缀参数，用于根据名称前缀进行匹配，第二个参数是绑定容器对象参数。

【例317】数据模板。

ItemTemplateSelector.cs代码如下：



1namespace MAUIDemo.Templates

2{

3public class ItemTemplateSelector : DataTemplateSelector

4{

5public DataTemplate DefaultTemplate

6{

7get;

8set;

9}

10public DataTemplate FavorTemplate

11{

12get;

13set;

14}

15protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

16{

17return item.ToString().Equals("Favor") ? FavorTemplate : DefaultTemplate;

18}

19}

20}


BindableLayoutPage.xaml在资源部分定义了两个不同的模板以及一个模板选择器。模板选择器分别对上述两个定义的模板进行了静态资源绑定。嵌套在内部的VerticalStackLayout垂直布局涉及如下3个关键属性。

BindableLayout.EmptyView。无模板绑定时的默认显示。

BindableLayout.ItemTemplateSelector。绑定模板选择器。这里引用了上面定义的数据模板选择器。

BindableLayout.ItemsSource。绑定数据源。

BindableLayoutPage.xaml代码如下：



1<?xml version="1.0" encoding="UTF-8" ?>

2<ContentPage

3x:Class="MAUIDemo.Pages.Layouts.BindableLayoutPage"

4xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

5xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

6xmlns:templates="clr-namespace:MAUIDemo.Templates"

7xmlns:viewmodels="clr-namespace:MAUIDemo.ViewModels"

8Title="绑定布局">

9<ContentPage.BindingContext>

10<viewmodels:CarViewModel />

11</ContentPage.BindingContext>

12<ContentPage.Resources>

13<DataTemplate x:Key="defaultTemplate">

14<Label BackgroundColor="Beige" Text="{Binding CarName}" />

15</DataTemplate>

16<DataTemplate x:Key="favorTemplate">

17<Label BackgroundColor="Chartreuse" Text="{Binding CarName}" />

18</DataTemplate>

19<templates:ItemTemplateSelector

20x:Key="itemTemplateSelector"

21DefaultTemplate="{StaticResource defaultTemplate}"

22FavorTemplate="{StaticResource favorTemplate}" />

23</ContentPage.Resources>

24<VerticalStackLayout>

25<Button

26Command="{Binding OnClear}"

27HeightRequest="40"

28HorizontalOptions="Center"

29Text="清空库存"

30WidthRequest="300" />

31<Button

32Command="{Binding OnLoad}"

33HeightRequest="40"

34HorizontalOptions="Center"

35Text="加载汽车"

36WidthRequest="300" />

37<VerticalStackLayout

38BindableLayout.EmptyView="No Car"

39BindableLayout.ItemTemplateSelector="{StaticResource itemTemplateSelector}"

40BindableLayout.ItemsSource="{Binding CarList}"

41HorizontalOptions="Center" />

42</VerticalStackLayout>

43</ContentPage>


ContentPage.BindingContext配置了绑定上下文，此处引用了视图模型命名空间中的CarViewModel（汽车视图模型）。CarViewModel 继承自下面的BaseViewModel（基本视图模型）类。

BaseViewModel.cs代码如下：



1using System.ComponentModel;

2using System.Runtime.CompilerServices;

3

4namespace MAUIDemo.ViewModels

5{

6public class BaseViewModel : IQueryAttributable, INotifyPropertyChanged

7{

8public event PropertyChangedEventHandler PropertyChanged;

9public virtual void ApplyQueryAttributes(IDictionary<string, object> query)

10{

11}

12protected virtual void OnPropertyChanged(［CallerMemberName］ string propertyName = null)

13{

14PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

15}

16}

17}


BaseViewModel类实现了IQueryAttributable（查询属性）接口和INotifyPropertyChanged（属性变更）接口。OnPropertyChanged()触发属性变更事件。

Car.cs代码如下：



1namespace MAUIDemo.Models

2{

3public class Car

4{

5public Car(string CarName)

6{

7this.CarName = CarName;

8}

9public string CarName

10{

11get;

12set;

13}

14}

15}


本示例定义的Car（汽车）数据结构如上。

CarViewModel.cs代码如下：



1using MAUIDemo.Data;

2using MAUIDemo.Models;

3using System.Collections.ObjectModel;

4using System.Windows.Input;

5

6namespace MAUIDemo.ViewModels

7{

8public class CarViewModel: BaseViewModel

9{

10public ICommand OnClear






11{

12set;

13get;

14}

15public ICommand OnLoad

16{

17set;

18get;

19}

20public ObservableCollection<Car> CarList

21{

22get;

23set;

24}

25public CarViewModel()

26{

27CarList = Mocker.LoadCars();

28OnClear = new Command(() =>

29{

30CarList.Clear();

31OnPropertyChanged("CarList");

32});

33OnLoad = new Command(() =>

34{

35CarList = Mocker.LoadCars();

36OnPropertyChanged("CarList");

37});

38}

39}

40}


CarViewModel内部维护着CarList（汽车列表），作为ObservableCollection（可观察）属性列表，调用父类的OnPropertyChanged()方法可实现属性变更。OnClear()方法完成清空汽车列表数据，OnLoad()方法完成加载汽车列表数据。Mocker对象是自定义的数据模拟器，因篇幅所限，不在此展示，读者可自行查阅相关代码。

3.7MAUI触发器
3.7.1触发器概述

触发器是基于XAML声明式语法完成，通过数据、状态、事件等的改变，进而更改控件外观的一种机制。控件通过Triggers XAML标记扩展来定义，视觉状态的变更通过VisualState视觉状态来定义。.NET MAUI中的触发器分为普通触发器、样式触发器、数据触发器、事件触发器、条件触发器、动画触发器、状态触发器、比较触发器、设备触发器、方向触发器和自适应触发器。其中普通触发器、样式触发器、数据触发器、事件触发器、条件触发器、动画触发器是通过Triggers XAML标记扩展来定义的，而状态触发器、比较触发器、设备触发器、方向触发器、自适应触发器是通过视觉状态来定义的。


3.7.2普通触发器

大部分控件可使用普通触发器，通过Triggers XAML标记扩展来定义。

【例318】普通触发器。



1<Entry

2HorizontalOptions="Center"

3Placeholder="普通触发器"

4WidthRequest="300">

5<Entry.Triggers>

6<Trigger TargetType="Entry" Property="IsFocused" Value="True">

7<Setter Property="BackgroundColor" Value="BlueViolet" />

8</Trigger>

9</Entry.Triggers>

10</Entry>


上述代码中Trigger标签的TargetType属性指向Entry 输入条目控件自身，当IsFocused属性值为True时，此时激活触发器，导致BackgroundColor(背景色)属性设置为BlueViolet。

3.7.3样式触发器

通过Style.Triggers XAML标记扩展定义样式触发器。

【例319】样式触发器。

样式触发器资源代码如下： 



1<ContentPage.Resources>

2<Style x:Key="EntryTrigger" TargetType="Entry">

3<Setter Property="WidthRequest" Value="300" />

4<Setter Property="HeightRequest" Value="40" />

5<Setter Property="HorizontalOptions" Value="Center" />

6<Style.Triggers>

7<Trigger TargetType="Entry" Property="IsFocused" Value="True">

8<Setter Property="BackgroundColor" Value="DarkRed" />

9</Trigger>

10</Style.Triggers>

11</Style>

12</ContentPage.Resources>


上述资源定义中定义了样式触发器。与普通触发器类似，当IsFocused属性值为True时，此时激活触发器，导致BackgroundColor属性的更改。

样式触发器界面代码如下：



1<Entry Placeholder="样式触发器" Style="{StaticResource EntryTrigger}" />


引用定义的样式触发器资源时，只需将Style属性设置为静态引用即可。

3.7.4数据触发器

数据触发器使用DataTrigger进行定义，当满足某些数据条件时，激活此类触发器。

【例320】数据触发器。



1<Entry

2x:Name="entry"

3HorizontalOptions="Center"

4Placeholder="数据触发器"

5Text=""

6WidthRequest="300" />

7<Button

8HorizontalOptions="Center"

9Text="按钮状态"

10WidthRequest="300">

11<Button.Triggers>

12<DataTrigger

13Binding="{Binding Source={x:Reference entry}, Path=Text.Length}"

14TargetType="Button"

15Value="0">

16<Setter Property="BackgroundColor" Value="YellowGreen" />

17<Setter Property="IsEnabled" Value="False" />

18</DataTrigger>

19</Button.Triggers>

20</Button>


上述代码Button控件中的数据触发器绑定了Entry 输入条目控件，输入条目控件的文本长度为0时激活数据触发器。该数据触发器的效果是将TargetType（目标类型）控件，即Button控件的BackgroundColor变为YellowGreen（黄绿色），IsEnabled（是否启用）属性变为False不可用。

3.7.5事件触发器

事件触发器基于事件驱动机制进行激活。

【例321】事件触发器。

事件触发器界面代码如下：



1<Entry

2HorizontalOptions="Center"

3Placeholder="事件触发器"

4WidthRequest="300">

5<Entry.Triggers>

6<EventTrigger Event="TextChanged">

7<triggers:EntryTriggerAction />

8</EventTrigger>

9</Entry.Triggers>

10</Entry>


上述代码通过EventTrigger XAML标记扩展来定义事件触发器。触发器激活后的事件由Event属性配置。这里的事件回调函数是TextChanged。

EntryTriggerAction.cs代码如下：



1using System.Text.RegularExpressions;

2

3namespace MAUIDemo.Triggers

4{






5public class EntryTriggerAction : TriggerAction<Entry>

6{

7protected override void Invoke(Entry entry)

8{

9entry.TextColor = IsNumeric(entry.Text) ? Colors.LightGreen : Colors.Red;

10}

11/// <summary>

12/// 判断是否是数字

13/// </summary>

14/// <param name="value">字符串</param>

15/// <returns>是否是数字</returns>

16public static bool IsNumeric(string value)

17{

18return Regex.IsMatch(value, @"^SymbolYCp［+-］?＼d*［.］?＼d*$");

19}

20}

21}


事件触发器的动作类EntryTriggerAction需要继承TriggerAction<T>，其中泛型参数需要指明控件类型。重写Invoke()方法执行激活后的逻辑。IsNumeric()方法通过正则表达式判断是否是数字。根据判断结果，修改条目控件的文字颜色。

3.7.6条件触发器

条件触发器是满足指定的条件后才激活相应的逻辑。例322中定义了两个Slider控件，MultiTrigger是多个条件XAML标记扩展，MultiTrigger.Conditions指定了需要满足的条件集合，BindingCondition是单个条件。通过Binding属性绑定滑块控件的值，当满足设置的Value(即Maximum 最大值)时，条件触发器生效，将BackgroundColor属性设置为LightGreen（浅绿色）。

【例322】条件触发器。



1<Slider

2x:Name="slider1"

3Maximum="100"

4WidthRequest="300" />

5<Slider

6x:Name="slider2"

7Maximum="100"

8WidthRequest="300" />

9<Button Text="条件触发器" WidthRequest="300">

10<Button.Triggers>

11<MultiTrigger TargetType="Button">

12<MultiTrigger.Conditions>

13<BindingCondition Binding="{Binding Source={x:Reference slider1}, Path=Value}" Value="100" />

14<BindingCondition Binding="{Binding Source={x:Reference slider2}, Path=Value}" Value="100" />

15</MultiTrigger.Conditions>

16<Setter Property="BackgroundColor" Value="LightGreen" />

17</MultiTrigger>

18</Button.Triggers>

19</Button>


同时将两个滑块控件的值手动设置到最大即可激活条件触发器，执行前后的效果分别如图311和图312所示。



图311条件触发器触发前状态




图312条件触发器触发后状态




3.7.7动画触发器

动画触发器通过定义两个状态，这里的状态类似动画制作中的关键帧。动画触发器被激活后，不同状态之间的切换过程产生动画过渡效果。

【例323】动画触发器。

动画触发器界面代码如下：



1<Entry Placeholder="动画触发器" WidthRequest="300">

2<Entry.Triggers>

3<Trigger TargetType="Entry" Property="Entry.IsFocused" Value="True">

4<Trigger.EnterActions>

5<triggers:AnimationTriggerAction Begin="0" />

6</Trigger.EnterActions>

7<Trigger.ExitActions>

8<triggers:AnimationTriggerAction Begin="1" />

9</Trigger.ExitActions>

10</Trigger>

11</Entry.Triggers>

12</Entry>


上述代码通过Trigger.EnterActions定义两个动画，第一个动画的状态是Begin属性为0，第二个动画的状态是Begin属性为1。两个状态之间的过渡逻辑需要自定义。

AnimationTriggerAction.cs代码如下：



1namespace MAUIDemo.Triggers

2{

3public class AnimationTriggerAction : TriggerAction<VisualElement>

4{

5public int Begin

6{

7get;

8set;

9}

10protected override void Invoke(VisualElement sender)

11{

12sender.Animate("AnimationTriggerAction", new Animation((d) =>

13{

14double val = Begin == 1 ? d : 1 - d;

15sender.BackgroundColor = Color.FromRgb(1, val, 1);

16}),

17length: 1500,

18easing: Easing.Linear);






19}

20}

21}


自定义的AnimationTriggerAction 同样需要继承TriggerAction<T>类，这里的泛型参数指定为VisualElement（可视化元素）。内部包含自定义的Begin属性用于区分状态。重写的Invoke()方法中，设置了Animation对象。其中第三个参数指明了需要动画的缓动函数。关于缓动动画的内容，读者可参阅本书第4章中的相关内容。

3.7.8状态触发器

状态触发器和动画触发器类似，只不过是将VisualElement对象换成了VisualState对象。以下是关于状态触发器的XAML标记扩展。

VisualStateGroupList。可视化状态组列表。用于描述一系列可视化状态组。

VisualStateGroup。可视化状态组。用于描述一系列可视化状态。

VisualState。可视化状态。用于描述单个可视化状态。

VisualState.StateTriggers。可视化状态的状态触发器。定义状态触发条件。

VisualState.Setters。可视化状态的状态触发器激活后的设置。定义状态触发器激活后设置的属性。

【例324】状态触发器。

状态触发器资源代码如下：



1<ContentPage.Resources>

2<Style x:Key="GridTrigger" TargetType="Grid">

3<Setter Property="VisualStateManager.VisualStateGroups">

4<VisualStateGroupList>

5<VisualStateGroup>

6<VisualState x:Name="Checked">

7<VisualState.StateTriggers>

8<StateTrigger IsActive="{Binding IsChecked}" IsActiveChanged="OnChecked" />

9</VisualState.StateTriggers>

10<VisualState.Setters>

11<Setter Property="BackgroundColor" Value="LightBlue" />

12</VisualState.Setters>

13</VisualState>

14<VisualState x:Name="Unchecked">

15<VisualState.StateTriggers>

16<StateTrigger IsActive="{Binding IsChecked}" IsActive
Changed="OnUnchecked" />

17</VisualState.StateTriggers>

18<VisualState.Setters>

19<Setter Property="BackgroundColor" Value="LightSalmon" />

20</VisualState.Setters>

21</VisualState>

22</VisualStateGroup>

23</VisualStateGroupList>

24</Setter>

25</Style>

26</ContentPage.Resources>


上述代码在资源中定义了状态触发器。IsChecked属性选中时触发OnChecked 事件，不选中时触发OnUnchecked 事件。触发执行逻辑就是将BackgroundColor属性设置为相应的颜色。

状态触发器界面代码如下：



1<HorizontalStackLayout HorizontalOptions="Center">

2<CheckBox

3x:Name="checkBox1"

4HorizontalOptions="Center"

5IsChecked="False" />

6<Label Text="状态触发器" VerticalOptions="Center" />

7</HorizontalStackLayout>

8<Grid

9BindingContext="{x:Reference checkBox1}"

10HorizontalOptions="Center"

11Style="{StaticResource GridTrigger}">

12<Grid.RowDefinitions>

13<RowDefinition Height="50" />

14<RowDefinition Height="50" />

15</Grid.RowDefinitions>

16<Grid.ColumnDefinitions>

17<ColumnDefinition Width="150" />

18<ColumnDefinition Width="150" />

19</Grid.ColumnDefinitions>

20<Label

21Grid.Row="0"

22Grid.Column="0"

23Text="0行0列" />

24<Label

25Grid.Row="0"

26Grid.Column="1"

27Text="0行1列" />

28<Label

29Grid.Row="1"

30Grid.Column="0"

31Text="1行0列" />

32<Label

33Grid.Row="1"

34Grid.Column="1"

35Text="1行1列" />

36</Grid>


状态触发器界面中定义了两行两列的表格，当CheckBox控件状态改变时触发相应的事件。

TriggerPage.xaml.cs代码如下：



1void OnChecked(object sender, EventArgs e)

2{

3StateTriggerBase stateTrigger = sender as StateTriggerBase;

4Console.WriteLine($"Checked state active: {stateTrigger.IsActive}");

5}

6void OnUnchecked(object sender, EventArgs e)

7{

8StateTriggerBase stateTrigger = sender as StateTriggerBase;






9Console.WriteLine($"Unchecked state active: {stateTrigger.IsActive}");

10}


事件函数中将参数 sender转换为StateTriggerBase对象。通过IsActive属性来检测触发器是否被激活。

3.7.9比较触发器

比较触发器资源定义的语法与状态触发器类似，只不过是将 StateTrigger 换成CompareStateTrigger。

【例325】比较触发器。

比较触发器资源代码如下：



1<ContentPage.Resources>

2<Style x:Key="CompareTrigger" TargetType="Grid">

3<Setter Property="VisualStateManager.VisualStateGroups">

4<VisualStateGroupList>

5<VisualStateGroup>

6<VisualState x:Name="Checked">

7<VisualState.StateTriggers>

8<CompareStateTrigger Property="{Binding Source={x:Reference checkBox2}, Path=IsChecked}" Value="True" />

9</VisualState.StateTriggers>

10<VisualState.Setters>

11<Setter Property="BackgroundColor" Value="Blue" />

12</VisualState.Setters>

13</VisualState>

14<VisualState x:Name="Unchecked">

15<VisualState.StateTriggers>

16<CompareStateTrigger Property="{Binding Source={x:Reference checkBox2}, Path=IsChecked}" Value="False" />

17</VisualState.StateTriggers>

18<VisualState.Setters>

19<Setter Property="BackgroundColor" Value="Green" />

20</VisualState.Setters>

21</VisualState>

22</VisualStateGroup>

23</VisualStateGroupList>

24</Setter>

25</Style>

26</ContentPage.Resources>


比较触发器界面中定义了两行两列的表格，当CheckBox控件状态改变时触发相应的事件。

比较触发器界面代码如下：



1<HorizontalStackLayout HorizontalOptions="Center">

2<CheckBox

3x:Name="checkBox2"

4HorizontalOptions="Center"

5IsChecked="False" />

6<Label Text="比较触发器" VerticalOptions="Center" />

7</HorizontalStackLayout>

8<Grid





9BindingContext="{x:Reference checkBox2}"

10HorizontalOptions="Center"

11Style="{StaticResource CompareTrigger}">

12<Grid.RowDefinitions>

13<RowDefinition Height="50" />

14<RowDefinition Height="50" />

15</Grid.RowDefinitions>

16<Grid.ColumnDefinitions>

17<ColumnDefinition Width="150" />

18<ColumnDefinition Width="150" />

19</Grid.ColumnDefinitions>

20<Label

21Grid.Row="0"

22Grid.Column="0"

23Text="0行0列" />

24<Label

25Grid.Row="0"

26Grid.Column="1"

27Text="0行1列" />

28<Label

29Grid.Row="1"

30Grid.Column="0"

31Text="1行0列" />

32<Label

33Grid.Row="1"

34Grid.Column="1"

35Text="1行1列" />

36</Grid>


手动勾选或取消复选框控件的选项，看到表格的颜色会随之改变。

3.7.10设备触发器

设备触发器是针对不同的设备触发不同的效果，也是通过视觉状态进行定义的，这里使用DeviceStateTrigger(设备触发器)类进行定义。参数Device 指明设备类型。UWP指通用Windows操作系统设备、Android指安卓设备等。

【例326】设备触发器。

设备触发器资源代码如下：



1<ContentPage.Resources>

2<Style x:Key="DeviceTrigger" TargetType="Button">

3<Setter Property="HorizontalOptions" Value="Center" />

4<Setter Property="WidthRequest" Value="300" />

5<Setter Property="VisualStateManager.VisualStateGroups">

6<VisualStateGroupList>

7<VisualStateGroup>

8<VisualState x:Name="UWP">

9<VisualState.StateTriggers>

10<DeviceStateTrigger Device="UWP" />

11</VisualState.StateTriggers>

12<VisualState.Setters>

13<Setter Property="BackgroundColor" Value="LightGreen" />

14</VisualState.Setters>

15</VisualState>






16<VisualState x:Name="Android">

17<VisualState.StateTriggers>

18<DeviceStateTrigger Device="Android" />

19</VisualState.StateTriggers>

20<VisualState.Setters>

21<Setter Property="BackgroundColor" Value="LightBlue" />

22</VisualState.Setters>

23</VisualState>

24</VisualStateGroup>

25</VisualStateGroupList>

26</Setter>

27</Style>

28</ContentPage.Resources>


设备触发器资源的定义完全类似，引用时通过Style属性指定对应的资源即可。

设备触发器界面代码如下：



1<Button Style="{StaticResource DeviceTrigger}" Text="设备触发器" />


3.7.11方向触发器

方向触发器基于判断设备方向从而决定触发器是否被激活。也是通过视觉状态进行定义的，这里使用OrientationStateTrigger（方向触发器）类进行定义。Orientation属性指明方向。

【例327】方向触发器。

方向触发器资源代码如下：



1<ContentPage.Resources>

2<Style x:Key="OrientationTrigger" TargetType="Button">

3<Setter Property="HorizontalOptions" Value="Center" />

4<Setter Property="WidthRequest" Value="300" />

5<Setter Property="VisualStateManager.VisualStateGroups">

6<VisualStateGroupList>

7<VisualStateGroup>

8<VisualState x:Name="Portrait">

9<VisualState.StateTriggers>

10<OrientationStateTrigger Orientation="Portrait" />

11</VisualState.StateTriggers>

12<VisualState.Setters>

13<Setter Property="BackgroundColor" Value="LightGreen" />

14</VisualState.Setters>

15</VisualState>

16<VisualState x:Name="Landscape">

17<VisualState.StateTriggers>

18<OrientationStateTrigger Orientation="Landscape" />

19</VisualState.StateTriggers>

20<VisualState.Setters>

21<Setter Property="BackgroundColor" Value="SeaGreen" />

22</VisualState.Setters>

23</VisualState>

24</VisualStateGroup>

25</VisualStateGroupList>

26</Setter>





27</Style>

28</ContentPage.Resources>


方向触发器资源的定义完全类似，引用时通过Style属性指定对应的资源即可。

方向触发器界面代码如下：



1<Button Style="{StaticResource OrientationTrigger}" Text="方向触发器" />


3.7.12自适应触发器

自适应触发器是根据容器中文字的多少来触发相应的显示状态。观察自适应触发器示例前后状态的运行效果分别如图313和图314所示。




图313自适应触发器触发前状态




图314自适应触发器触发后状态


自适应触发器也是通过视觉状态进行定义的，这里使用AdaptiveTrigger（自适应触发器）类进行定义。MinWindowWidth属性指明最小视窗宽度。

【例328】自适应触发器。

自适应触发器资源代码如下：



1<ContentPage.Resources>

2<Style x:Key="AdaptiveTrigger" TargetType="StackLayout">

3<Setter Property="VisualStateManager.VisualStateGroups">

4<VisualStateGroupList>

5<VisualStateGroup>

6<VisualState x:Name="Vertical">

7<VisualState.StateTriggers>

8<AdaptiveTrigger MinWindowWidth="0" />

9</VisualState.StateTriggers>

10<VisualState.Setters>

11<Setter Property="Orientation" Value="Vertical" />

12</VisualState.Setters>

13</VisualState>

14<VisualState x:Name="Horizontal">

15<VisualState.StateTriggers>

16<AdaptiveTrigger MinWindowWidth="800" />

17</VisualState.StateTriggers>

18<VisualState.Setters>

19<Setter Property="Orientation" Value="Horizontal" />

20</VisualState.Setters>

21</VisualState>

22</VisualStateGroup>

23</VisualStateGroupList>

24</Setter>





25</Style>

26</ContentPage.Resources>


自适应触发器资源的定义完全类似，引用时通过Style属性指定对应的资源即可。

自适应触发器界面代码如下：



1<StackLayout

2BackgroundColor="Gold"

3HorizontalOptions="Center"

4Style="{StaticResource AdaptiveTrigger}">

5<Label Text="自适应触发器-自适应触发器-自适应触发器-自适应触发器-自适应触发器-自适应触发器" />

6<Label Text="自适应触发器-自适应触发器-自适应触发器-自适应触发器" />

7<Label Text="自适应触发器-自适应触发器-自适应触发器" />

8<Label Text="自适应触发器-自适应触发器" />

9<Label Text="自适应触发器-自适应触发器-自适应触发器-自适应触发器-自适应触发器" />

10</StackLayout>


自适应触发器界面代码中专门设置了5个Label控件，内容文字长短不一。读者可通过变更视窗长度和宽度自行查看运行效果。

3.8MAUI消息通信
3.8.1消息概述

消息是一种进程间通信机制，基于生产者消费者模型实现。生产者消费者是操作系统中经典的多线程并发协作机制，尤其在分布式场合使用广泛。生产者和消费者之间存在缓冲区，生产者生产数据后，暂时存放在缓冲区中，待消费者空闲时取走。缓冲区为空时，消费者阻塞； 缓冲区为满时，生产者阻塞。缓冲区的引入目的是解决生产者和消费者之间处理速度不匹配问题。解决思路是定义信号量，并利用锁机制实现。缓冲区使用队列这种数据结构，可以根据实际需求采用循环队列。先入先出的这种方式接收或取走相应的数据。将生产者消费者模型具体化，衍生出了发布订阅模型。实现发布订阅模型比较成熟的中间件有ActiveMQ、RabbitMQ、RocketMQ、Kafka等。

.NET MAUI消息通信使用MessagingCenter对象封装了底层实现细节。使用基于事件机制的发布订阅模型，降低事件发布方和订阅方之间的耦合关系，实现多发布方和多订阅方。内部使用弱引用机制无须使数据保持实时活跃状态，必要时可进行垃圾回收（Garbage Collection,GC）。用户通过调用相应的方法即可快速实现消息的订阅、发布和取消。本节涉及的示例集中在MessagingCenterPage页面中，如图315所示。



图315消息概述


【例329】消息中心。

MessagingCenterPage.xaml.cs代码如下：



1<?xml version="1.0" encoding="UTF-8" ?>

2<ContentPage

3x:Class="MAUIDemo.Pages.MessagingCenterPage"

4xmlns="http://schemas.microsoft.com/dotnet/2021/maui"





5xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

6Title="消息中心">

7<VerticalStackLayout>

8<Entry

9x:Name="entry"

10Placeholder="消息内容"

11Text=""

12WidthRequest="300" />

13<Button

14Command="{Binding OnSend}"

15Style="{StaticResource NormButton}"

16Text="消息发布" />

17<Button

18Command="{Binding OnSubscribe}"

19Style="{StaticResource NormButton}"

20Text="消息订阅" />

21<Button

22Command="{Binding OnUnsubscribe}"

23Style="{StaticResource NormButton}"

24Text="取消订阅" />

25</VerticalStackLayout>

26</ContentPage>


MessagingCenterPage 使用VerticalStackLayout垂直布局。内部包含Entry控件用于输入待测试的消息内容，3个Button控件分别用于测试消息发布、消息订阅和取消订阅。

3.8.2消息发布

消息发布是消息发布者将用户输入的消息进行发布。

【例330】消息发布。



1OnSend = new Command(() =>

2{

3MessagingCenter.Send<MessagingCenterPage, string>(this, "message", entry.Text);

4});


Send()方法完成消息发布，涉及的5个参数如下。

(1) 泛型参数一是发布消息的类型。上述代码对应当前页面。

(2) 泛型参数二是发布消息的有效负载类型。上述代码对应字符串类型。

(3) 形参一是发布消息的类型。上述代码对应当前页面。

(4) 形参二是发布消息的主题。主题可以理解为感兴趣的频道。上述代码对应的主题是message。

(5) 形参三是发布消息的有效负载类型。上述代码对应字符串类型。

3.8.3消息订阅

消息订阅是消息订阅者对感兴趣的消息进行订阅。

【例331】消息订阅。



1OnSubscribe = new Command(() =>

2{

3MessagingCenter.Subscribe<MessagingCenterPage, string>(this, "message", async (sender, arg) =>

4{

5await DisplayAlert("订阅消息", "消息参数>" + arg, "确认");

6});

7});


Subscribe()方法完成消息订阅，涉及的5个参数如下。

(1) 泛型参数一是订阅消息的类型。上述代码对应当前页面。

(2) 泛型参数二是订阅消息的有效负载类型。上述代码对应字符串类型。

(3) 形参一是订阅消息的类型。上述代码对应当前页面。

(4) 形参二是订阅消息的主题。主题可以理解为感兴趣的频道。上述代码对应的主题是message。

(5) 形参三是订阅消息的回调函数。回调函数包含两个参数，参数一是发布者，参数二是消息参数内容。

3.8.4取消订阅

取消订阅是用户取消对指定主题的订阅，即不再接收此主题或频道的消息信息。

【例332】取消订阅。



1OnUnsubscribe = new Command(() =>

2{

3MessagingCenter.Unsubscribe<MessagingCenterPage, string>(this, "message");

4});


Unsubscribe()方法完成取消订阅，涉及的4个参数如下。

(1) 泛型参数一是取消订阅消息的类型。上述代码对应当前页面。

(2) 泛型参数二是取消订阅消息的有效负载类型。上述代码对应字符串类型。

(3) 形参一是取消订阅消息的类型。上述代码对应当前页面。

(4) 形参二是取消订阅消息的主题。主题可以理解为感兴趣的频道。上述代码对应的主题是message。