.NET多平臺應(yīng)用程序UI（. NET MAUI）的市場吸引力與日俱增，這是微軟最新的開發(fā)平臺，允許開發(fā)者使用單個代碼庫創(chuàng)建跨平臺應(yīng)用程序。盡管很多WPF開發(fā)人員還沒有跟上 .NET MAUI的潮流，但我們將在這篇文章中為大家展示他的潛力，具體來說想描述一下WPF和.NET MAUI之前的共性。

PS：DevExpress WPF擁有120+個控件和庫，將幫助您交付滿足甚至超出企業(yè)需求的高性能業(yè)務(wù)應(yīng)用程序。通過DevExpress WPF能創(chuàng)建有著強大互動功能的XAML基礎(chǔ)應(yīng)用程序，這些應(yīng)用程序?qū)Ｗ⒂诋?dāng)代客戶的需求和構(gòu)建未來新一代支持觸摸的解決方案。

DevExpress WPF 最新版下載

DevExpress技術(shù)交流群8：523159565      歡迎一起進群討論

項目結(jié)構(gòu)

與Xamarin不同，.NET MAUI解決方案包含針對所有目標(biāo)平臺的單個項目。像WPF一樣， .NET MAUI項目包含一個App.xaml文件和主視圖，另外可以發(fā)現(xiàn)AppShell類被用作根視覺元素：

Resources文件夾包含跨每個平臺使用的應(yīng)用程序資源，開發(fā)者可以將特定于平臺的資源放在Platforms目錄的子文件夾中，以便在應(yīng)用程序啟動時執(zhí)行相關(guān)代碼。

XAML和代碼隱藏

.NET MAUI頁面具有與WPF窗口或用戶控件相似的結(jié)構(gòu)，根元素包含命名空間聲明和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方法是根據(jù)XAML自動生成的：

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

綁定

.NET MAUI綁定使用與WPF綁定相似的上下文，它有類似的模式、相對源、轉(zhuǎn)換器等。.NET MAUI使用了與WPF的類似的概念，唯一的區(qū)別是這個屬性叫做：

<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包含與和相似的東西，可以幫助開發(fā)者根據(jù)業(yè)務(wù)需求安排可視化元素：

<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>

資源

資源字典存儲應(yīng)用程序資源(樣式、模板、轉(zhuǎn)換器等)，開發(fā)者可以使用StaticResource或DynamicResource標(biāo)記擴展來將這些資源應(yīng)用到元素上：

<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>

樣式

開發(fā)者可以創(chuàng)建顯式和隱式樣式來將類似的設(shè)置應(yīng)用于多個元素：

<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>

觸發(fā)器

聲明式XAML觸發(fā)器允許開發(fā)者有條件地應(yīng)用樣式：

<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非常相似，可視元素的層次結(jié)構(gòu)允許開發(fā)者輕松地識別控件的父元素和子元素，Parent屬性包含直接可視父屬性和Children屬性——直接子屬性，主要區(qū)別在于.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 依賴屬性稱為可綁定屬性，它們使用類似的聲明結(jié)構(gòu)：一個靜態(tài)字段和一個公共屬性。BindableProperty.Create方法接受所有與DependencyProperty.Register類似的參數(shù)在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) {
// ...
}

結(jié)論

WPF和.NET MAUI開發(fā)有許多共同之處，如果您熟悉WPF，可以毫不費力地創(chuàng)建一個功能強大的.NET MAUI應(yīng)用程序。