.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的類似的概念，唯一的區別是這個屬性叫做：

<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>
<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中，您可以使用 和來保持與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應用程序。