.NET MAUI 正式版初体验 - Catalog of Artiga

.NET Multi-platform App UI (MAUI) 现已加入 Visual Studio 2022 17.3，成为工作负载(Workload)之一，~~遥想上次 VS 增加新 workload 还是在上一次~~。VS 的默认项目模板支持 Android、iOS、MacCatalyst、Tizen 和 Windows。Linux仅有社区支持。

项目结构#

默认项目的目录结构是这样的：

1
.
2
└── MauiApp1
3
    ├── App.xaml
4
    ├── App.xaml.cs
5
    ├── AppShell.xaml
6
    ├── AppShell.xaml.cs
7
    ├── MainPage.xaml
8
    ├── MainPage.xaml.cs
9
    ├── MauiApp1.csproj
10
    ├── MauiProgram.cs
11
    ├── Platforms
12
    │   ├── Android
13
    │   ├── MacCatalyst
14
    │   ├── Tizen
15
    │   ├── Windows
16
    │   └── iOS
17
    ├── Properties
18
    │   └── launchSettings.json
19
    └── Resources

结构说明#

MauiProgram.cs 中定义了一个静态类和一个名为CreateMauiApp的静态方法，方法内部使用 Generic Hosting 模式创建了一个 MauiApp 并配置依赖注入，就像 ASP.NET Core 一样。

编译时，对应平台会使用Platforms文件夹中的配置，这些文件夹中的内容是特定于平台的。

例如 Windows 平台是一个 WinUI3 项目的结构，它的 App 类继承自 MauiWinUIApplication, 而后者继承自Microsoft.UI.Xaml.Application,也就是 windows app sdk 提供的 WinUI3 程序的基类。这个App类便会调用MauiProgram.CreateMauiApp。

Android 平台则是一个MainApplication类，它继承自MauiApplication,而后者继承自Android.App.Application,这是 Android 应用程序的基类。

这使得可以修改应用程序对于特定平台的配置, 例如可以分别配置 Android 平台的 AndroidMainifest 和 WinUI 的 app.mainifest与以及MSIX打包的 Package.appxmanifest。

MAUI 使用平台原生UI框架#

xaml文件最终会被编译为各个平台的原生UI。这里我就在默认实例上加几个控件。 MAUI WinUI 和 Android 控件对比

可以看到，尽管控件样式基本一致，但都渲染为平台自己的UI框架对应的控件。比如 Switch 渲染为了 WinUI 的 ToggleSwitch，它会在旁边显示 On 或 Off 的文字；而 Android 的 Switch 控件则不会，而且还在左侧空出了空间。

更明显的，可以看看两个平台的日期选择控件： MAUI WinUI 和 Android 日期选择控件对比

这就像是同样的 html input 标签，不同的浏览器会使用不同默认样式。同样的 xaml 会被编译为平台本机的 UI。

就像用css来统一html样式，指定 Style 可以是 MAUI 在各个平台上获得几乎一样的表现，同时使用平台原生的UI交互。

开发#

特定于平台的代码#

尽管 MAUI 在于统一各个平台，但是仍然可以指定不同平台的不同实现。文档的 Platform Integration一节介绍了 MAUI 库提供的不同平台 API 的统一抽象，但是对于这些 API 没有覆盖到的地方，仍然要自行编写针对不同平台的实现。

这是一个常见的场景，例如要获取当前应用是否处于流量计费的网络，目前 MAUI 平台库没有现成的封装，要自己写的话，很显然 Windows 上的实现和 Android/iOS 上是不同的（而我甚至不知道 Mac 有没有这个功能）。

实例：统一接口和平台特定的实现#

配置项目多目标#

借由依赖注入模式，可以让一个接口在不同平台对应不同的实现。首先你参考官方文档配置多目标。这里就直接用最后一项方案，结合基于目录和基于文件名的多目标。在项目配置里加上这个：

1
<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-android')) != true">
2
  <Compile Remove="**\**\*.Android.cs" />
3
  <None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
4
  <Compile Remove="**\Android\**\*.cs" />
5
  <None Include="**\Android\**\*.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
6
</ItemGroup>
7

8
<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-ios')) != true AND $(TargetFramework.StartsWith('net6.0-maccatalyst')) != true">
9
  <Compile Remove="**\**\*.iOS.cs" />
10
  <None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
11
  <Compile Remove="**\iOS\**\*.cs" />
12
  <None Include="**\iOS\**\*.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
13
</ItemGroup>
14

15
<ItemGroup Condition="$(TargetFramework.Contains('-windows')) != true ">
16
  <Compile Remove="**\*.Windows.cs" />
17
  <None Include="**\*.Windows.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
18
  <Compile Remove="**\Windows\**\*.cs" />
19
  <None Include="**\Windows\**\*.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
20
</ItemGroup>

效果是：例如，当编译 Android 平台时，所有 *.Windows.cs 和 *.iOS.cs 文件，或是任何 Windows 和 iOS 文件夹下的文件，都会被忽略并跳过编译，Roslyn也不会分析对应的代码，从而保证 IntelliSense 的正确性。

定义接口#

创建一个INetStatusService.cs文件，内容如下：

1
namespace MauiApp1
2
{
3
    public interface INetStatusService
4
    {
5
        public bool IsMeteredConnection();
6
    }
7
}

如果你在这个共享文件里直接尝试访问平台命名空间，IntelliSense会给出这样的提示： IntelliSense提示：平台可用性所以，必须分别编写三个平台的代码，实现这个接口。

分平台实现接口#

Windows:

1
using Windows.Networking.Connectivity;
2
namespace MauiApp1
3
{
4
    public class NetStatusService : INetStatusService
5
    {
6
        public bool IsMeteredConnection()
7
        {
8
            var profile = NetworkInformation.GetInternetConnectionProfile();
9
            var cost = profile.GetConnectionCost();
10
            return cost.NetworkCostType switch
11
            {
12
                NetworkCostType.Unrestricted => false,
13
                NetworkCostType.Unknown => false,
14
                _ => true
15
            };
16
        }
17
    }
18
}

另外，你还会注意到这里的switch表达式模板匹配语法，这也是 MAUI 的好处之一，它使用最新的 .NET SDK，支持最新的 C# 语法。

Android:

1
using Android.Content;
2
using Android.Net;
3

4
namespace MauiApp1
5
{
6
    public class NetStatusService : INetStatusService
7
    {
8
        public bool IsMeteredConnection()
9
        {
10
            var manager = (ConnectivityManager)Android.App.Application.Context.GetSystemService(Context.ConnectivityService);
11
            return manager.IsActiveNetworkMetered;
12
        }
13
    }
14
}

iOS (我不会~~(因为没Mac)~~，那就 throw not impl吧)

1
namespace MauiApp1
2
{
3
    public class NetStatusService : INetStatusService
4
    {
5
        public bool IsMeteredConnection()
6
        {
7
            throw new NotImplementedException();
8
        }
9
    }
10
}

依赖注入#

由于 Maui App 使用 Generic Host 和依赖注入模式。所以可以轻松地为这个接口配置多实现。

在 MauiProgram.cs 加一句

1
    builder.Services.AddTransient<INetStatusService, NetStatusService>();

虽然构造函数注入很好用，但是对于这个简单的示例，或是一些特殊情况，还是要拿到 IServiceProvider 的。由于各个平台的App基类不一样，所以给 App.xaml.cs 加一个属性方便使用：

1
namespace MauiApp1;
2

3
public partial class App : Application
4
{
5
    public App()
6
    {
7
        InitializeComponent();
8

9
        MainPage = new AppShell();
10
    }
11
    public static IServiceProvider Services =>
12
#if ANDROID
13
        MauiApplication.Current.Services;
14
#elif WINDOWS10_0_17763_0_OR_GREATER
15
        MauiWinUIApplication.Current.Services;
16
#elif MACCATALYST || IOS
17
        MauiUIApplicationDelegate.Current.Services;
18
#else
19
        null;
20
#endif
21
}

这样就可以随时通过App.Services来得到 DI 容器了。

在 MainPage.xaml.cs 设置一个属性用于绑定，并在构造函数里设置默认的BindingContext，实际项目应该用ViewModel实现MVVM的，不过这个示例就从简了。

1
    public MainPage()
2
    {
3
        InitializeComponent();
4
        this.BindingContext = this;
5
    }
6
    private readonly INetStatusService _netStatus = App.Services.GetRequiredService<INetStatusService>();
7
    public bool IsMeteredConnection => _netStatus.IsMeteredConnection();

然后我们在示例页面加个控件测试一下：

1
            <StackLayout Orientation="Horizontal">
2
                <CheckBox
3
                    IsChecked="{x:Binding IsMeteredConnection}"
4
                    IsEnabled="False" />
5
                <Label Text="使用按流量计费的网络" />
6
            </StackLayout>

在 Windows 上的效果：

Windows示例

在 Android 上的效果： Android示例

其它#

MAUI 还有强大的热重载，包括UI和后台代码的即时加载，而且在所有平台都可用。

MAUI 短期内不会添加官方的Linux支持，这是因为Linux桌面环境碎片严重。

比起早先的 Xamarin Forms， MAUI 生成的 Android 应用体积小了不少。另外对于 Windows 平台的 WinUI3，可以像其它 WinUI3 应用一样配置为不使用MSIX打包发布，这样最终发布的应用是一个可以直接执行的 .exe 文件，就像传统win32应用程序一样。

参考资料#

.NET Multi-platform App UI documentation .NET MAUI Roadmap Introducing .NET MAUI - One Codebase, Many Platforms - .NET Blog