EP 32: TopStore App with .NET Multi-platform App UI (MAUI)

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP32。

而本篇 EP32 要来介绍前面整个 EP1~EP21 所完成的双平台 TopStore App 在利用 Xamarin.Forms 所完成的部分，转换成目前接下来在 .NET 开发技术中颇受瞩目 .NET Multi-platform App UI (MAUI) 的撰写方式唷!

MAUI

首先若要将 Xamarin.Forms 转换成 .NET MAUI 的撰写，有几个需考量的条件:

App 开发中利用到的 Xamarin.Forms 第三方套件是否已经支援 .NET 6 / MAUI。
其 App 成长性是否需要迁移至 MAUI 之必要性来做发展。

.NET 6 是微软接下来长期支援的开发技术(LTS) 的 .NET 版本，而 .NET MAUI 并不会随着 .NET 6 正式释出的(2021/11/8) 时间点而正式释出，而是可能在 2022 年的 Q2 才有机会正式释出(有兴趣的朋友可以参考 GitHub 的 Projects)。

但若在这个时间点要完成 Xamarin.Forms 专案迁移至 .NET MAUI 的话，那本篇就来介绍介绍该怎麽个处理法罗~~~

如果以撰写本篇 EP32 的时间点来看，最新释出的是 "Visual Studio 2022 version 17.0 RC3 and Preview 7" 而 MAUI 则为 "Preview 9"。

而或许有捧友会问，那怎只有 EP1~EP21 呢?

如果去看看 EP22 就会知道从这篇开始在介绍的是使用了 sqlite-net-pcl 这个 Nuget 套件处理 SQLite 的介绍，而 sqlite-net-pcl 套件作者有在 GitHub 上说明会在 .NET MAUI 正式释出时支援。

2021/11/13 补充更新:

若是要在 MAUI 专案当中使用 SQLite，可以考虑微软官方伴随 .NET 6 所释出的 EF Core for SQLite。

参考文件:

[微软文件] 在 Xamarin 当中使用 EFCore: https://docs.microsoft.com/en-us/ef/core/get-started/xamarin

EF Core 的 GitHub: https://github.com/dotnet/efcore

EF Core for SQLite 的 Nuget: https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite

若如果已经装好 Visual Stuido 2022 version 17.0 RC3 and Preview 7 的版本，理论上记得再透过 Visual Studio Installer 安装的时候，记得要勾选 .NET MAUI 的 "个别元件" 安装，就可以在 Visual Studio 2022 当中选择到 MAUI 的专案范本。

01-1

新增专案。
01-2

在专案范本中搜寻 "MAUI"。
02-1

02-2

建立 "MAUI" 行动应用设定。

Visual Studio 2022 建立好 MAUI 的专案范本。

在预设的空白专案范本当中会有 MainPage.xaml 的预设页面。
05-1

要把 TopStore App 的 XAML 放进来，所以将这个 MainPage.xaml 删除。
05-2

"删除" 完毕。
05-3

接着把 EP21 的 TopStore App 在 Xamarin.Forms 专案中的程序 "复制"(除了 *.csproj、App.xaml/.cs、AssemblyInfo.cs 不复制，其他皆复选後复制)。
06-1

在 MAUI 的专案资料夹当中直接 "贴上"。
06-2

"贴上" 完成後档案总管的呈现。
06-3

"贴上" 完成後 Visaul Studio 2022 的方案总管呈现。
06-4

开启文字替换窗格，并将替换范围设定为整个方案。

在文字替换窗格当中将 **「xmlns="http://xamarin.com/schemas/2014/forms"」** 点选 "全部取代" 替换成 **「xmlns="http://schemas.microsoft.com/dotnet/2021/maui"」**。
07-1-1

在此次 TopStore App 的专案中的文字替换，共有 6 个替换，确定。
07-1-2

继续在文字替换窗格当中将 「Xamarin.Forms.Xaml」 点选 "全部取代" 替换成 「Microsoft.Maui.Controls.Xaml"」。
07-2-1

在此次 TopStore App 的专案中的文字替换，共有 4 个替换，确定。
07-2-2

继续在文字替换窗格当中将 「Xamarin.Forms」 点选 "全部取代" 替换成 「Microsoft.Maui.Controls」。
07-3-1

在此次 TopStore App 的专案中的文字替换，共有 13 个替换，确定。
07-3-2
(其中有两个替换是在 OrdersPage 与 SettingsPage 的 XAML 标记当中，有使用到 Label 标记所设定 Text 的显示文字，最後记得再去改一下。)

继续在文字替换窗格当中将 「Xamarin.Essentials」 点选 "全部取代" 替换成 「Microsoft.Maui.Essentials」。
07-4-1

在此次 TopStore App 的专案中的文字替换，共有 1 个替换，确定。
07-4-2

接着打开 App.xaml 将原本 ResourceDictionary 的 XAML 标记内部包含的 XAML 标记圈选後删除。
08-1

并贴上原本在 TopStore App 的 Xamarin.Forms 当中的 App.xaml 所撰写的 Resource，并且补上其所需引用的 XAML 命名空间。
08-2

继续在 Application.Resources 的 XAML 标记之後，撰写 Application.MainPage 的 XAML 标记，并且在其中设计 Shell 的 XAML 标记。
08-3

完成後，打开 AppShell.xaml 并将当中撰写 TabBar 的 XAML 标记复制。
08-4-1

贴入刚刚在 App.xaml 中所设计的 Shell 的 XAML 标记当中。
08-4-2

并补上其所需引用的 XAML 命名空间。
08-4-3

打开 App.xaml.cs 将其中的 MainPage 指定 MainPage 产生的程序码给移除。
09-1

将原本 AppShell.xaml.cs 当中的路由指定，设定到此。
09-2

接着在 Visual Studio 的方案总管当中，把 Assets 资料夹当中的 FontAwesome5.otf 档案搬移到 Resources 底下的 Fonts 资料夹。
10-1

搬移完成。
10-2

若确定没问题，就可以把 Assets 资料夹与 AppShell.xaml 档案删除。
10-3

再打开 MauiProgram.cs 档案，并找到其中 .ConfigureFonts() 的部分。
10-4-1

将其原本设定的字型档，换成 TopStore App 当中所用的 FontAwesome5.otf。
10-4-2

接着在相容性当中透过右键选单选取 "新增参考"。
11-1

选取 Maui.Plugin.BaseBindingLibrary 的 dll。
11-2

把先前透过 Nuget 安装使用的 Xam.Plugin.BaseBindingLibrary 替换成 Maui.Plugin.BaseBindingLibrary。加入该 dll 的参考後，会看到在各个平台下的组件都增加了 "Maui.Plugin.BaseBindingLibrary"。
11-3
(之後会另外发布此 DLL 透过 Nuget 安装的版本)