DevExpress官网

.NET多平台应用程序UI（. NET MAUI）的市场吸引力与日俱增，这是微软最新的开发平台，允许开发者使用单个代码库创建跨平台应用程序。尽管很多WPF开发人员还没有跟上 .NET MAUI的潮流，但我们将在这篇文章中为大家展示他的潜力，具体来说想描述一下WPF和.NET MAUI之前的共性。

PS：DevExpress WPF拥有120+个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。

DevExpress WPF 最新版下载

DevExpress技术交流群8：523159565      欢迎一起进群讨论

项目结构

与Xamarin不同，.NET MAUI解决方案包含针对所有目标平台的单个项目。像WPF一样， .NET MAUI项目包含一个App.xaml文件和主视图，另外可以发现AppShell类被用作根视觉元素：

Resources文件夹包含跨每个平台使用的应用程序资源，开发者可以将特定于平台的资源放在Platforms目录的子文件夹中，以便在应用程序启动时执行相关代码。

XAML和代码隐藏

.NET MAUI页面具有与WPF窗口或用户控件相似的结构，根元素包含命名空间声明和x:Class属性，该属性定义了代码背后的类名：

<?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="MauiFirstApp.MainPage">
<ScrollView>
<!--...-->
</ScrollView>
</ContentPage>

InitializeComponent方法是根据XAML自动生成的：

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

绑定

.NET MAUI绑定使用与WPF绑定相似的上下文，它有类似的模式、相对源、转换器等。.NET MAUI使用了与WPF的DataContext类似的概念，唯一的区别是这个属性叫做BindingContext：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiFirstApp"
x:Class="MauiFirstApp.MainPage">
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<Label Text="{Binding FirstName}"/>
</ContentPage>

布局

.NET MAUI包含与Grid和StackPanel相似的东西，可以帮助开发者根据业务需求安排可视化元素：

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0"/>
<StackLayout Grid.Column="1" WidthRequest="50">
<Button Text="Print"/>
<Button Text="Export"/>
</StackLayout>
</Grid>

资源

资源字典存储应用程序资源(样式、模板、转换器等)，开发者可以使用StaticResource或DynamicResource标记扩展来将这些资源应用到元素上：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiFirstApp"
x:Class="MauiFirstApp.MainPage">
<ContentPage.Resources>
<Color x:Key="ButtonBackgroundColor">DarkOrange</Color>
<Color x:Key="ButtonForegroundColor">Black</Color>
</ContentPage.Resources>

<Button Text="Export"
BackgroundColor="{StaticResource ButtonBackgroundColor}"
TextColor="{StaticResource ButtonForegroundColor}"/>
</ContentPage>

模板

在.NET MAUI中，您可以使用 ControlTemplates 和DataTemplates来保持与WPF相同的UI灵活性：

<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding FirstName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

样式

开发者可以创建显式和隐式样式来将类似的设置应用于多个元素：

<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Orange"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="CornerRadius" Value="4"/>
</Style>
</ContentPage.Resources>
<StackLayout Orientation="Horizontal">
<Button Text="Next"/>
<Button Text="Prev"/>
</StackLayout>

触发器

声明式XAML触发器允许开发者有条件地应用样式：

<ContentPage.Resources>
<Style TargetType="Editor" x:Key="redOnFocusStyle">
<Style.Triggers>
<Trigger TargetType="Editor" Property="IsFocused" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ContentPage.Resources>
<StackLayout VerticalOptions="Start">
<Editor Text="Red on Focus" Style="{StaticResource redOnFocusStyle}"/>
</StackLayout>

可视化树

与WPF非常相似，可视元素的层次结构允许开发者轻松地识别控件的父元素和子元素，Parent属性包含直接可视父属性和Children属性——直接子属性，主要区别在于.NET MAUI没有逻辑树。

MVVM

.NET MAUI使用与WPF相同的MVVM范例，许多MVVM框架(如Prism)都是跨平台的，因此您不太可能注意到许多差异。下面是一个基本的例子，演示了如何在视图模型中将编辑器绑定到属性，将按钮绑定到命令：

<?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"
xmlns:local="clr-namespace:MauiFirstApp"
x:Class="MauiFirstApp.MainPage">
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<StackLayout VerticalOptions="Start">
<Editor Text="{Binding FirstName}"/>
<Button Text="Process" Command="{Binding ProcessUserCommand}"/>
</StackLayout>
</ContentPage>

public class ViewModel : INotifyPropertyChanged {
private string name;
public string FirstName {
get { return name; }
set {
name = value;
OnPropertyChanged();
}
}

public ICommand ProcessUserCommand { get; }

public ViewModel() {
ProcessUserCommand = new Command(ProcessUser);
}

void ProcessUser() {
Console.WriteLine(FirstName);
}

public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged([CallerMemberName] string name = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

依赖项属性

.NET MAUI 依赖属性称为可绑定属性，它们使用类似的声明结构：一个静态字段和一个公共属性。BindableProperty.Create方法接受所有与DependencyProperty.Register类似的参数在WPF中注册：

public int MaxValue {
get => (int)GetValue(MaxValueProperty);
set => SetValue(MaxValueProperty, value);
}

public static readonly BindableProperty MaxValueProperty =
BindableProperty.Create("MaxValue", typeof(int), typeof(MainPage), 0, propertyChanged: OnMaxValueChanged);

private static void OnMaxValueChanged(BindableObject bindable, object oldValue, object newValue) {
// ...
}

结论

WPF和.NET MAUI开发有许多共同之处，如果您熟悉WPF，可以毫不费力地创建一个功能强大的.NET MAUI应用程序。

更多DevExpress线上公开课、中文教程资讯请上中文网获取

相关产品： DevExpress Universal Subscription,