在2022的5月份，某軟正式釋出了 MAUI 跨平台 UI 架構。我本來想着趁六一兒童節放假來寫幾篇關于 MAUI 入門的部落格，可惜發現我不擅長寫很入門的部落格。再加上 MAUI 似乎是為了趕釋出日期而釋出，隻能勉強說能開發了，能用了。于是我就來開始假定大家是一個成熟的 MAUI 開發者了，開始進入複雜控件自繪的自定義繪圖渲染的部落格
在 MAUI 裡面，預設将會在 Microsoft.Maui.Dependencies 引用 Microsoft.Maui.Graphics 的負載。在 Microsoft.Maui.Graphics 裡，提供了跨平台的獨立繪圖能力，在 GitHub 上作為獨立的開源項目，開源在 https://github.com/dotnet/Microsoft.Maui.Graphics
也如 Microsoft.Maui.Graphics 在它開源項目裡面描述的一樣，使用 Microsoft.Maui.Graphics 不會被局限于 MAUI 架構上，可以在任何的應用架構下使用上 Microsoft.Maui.Graphics 庫，就和其他的 NuGet 包一樣去使用。換句話說，我可以在 WPF 或 WinForms 或者是純控制台裡面使用 Microsoft.Maui.Graphics 進行繪圖
另外，我也可以自己注入 Microsoft.Maui.Graphics 的實作定義，擴充其他渲染引擎或架構作為繪圖的基礎支援
回到主題，本文将告訴大家如何在 MAUI 裡面使用 Microsoft.Maui.Graphics 提供的繪圖能力進自繪。對于任何的 UI 架構來說，隻要能實作好的自繪，就能擴充出超級多炫酷的界面效果，同時也可以友善将舊技術積累遷移到此 UI 架構上。無疑，在MAUI上就實作了這一點
這部分的内容，在目前是 2022.06 還沒有多少文檔，官方的文檔裡面都說 MAUI 還是預覽版，别聽官方說的，在5月就釋出了。釋出在 6.0.312 的 dotnet 版本上
在 MAUI 裡面接入 Microsoft.Maui.Graphics 進而實作自繪是有架構層的支援的，隻是實作的方式稍微有點繞
先安裝 VisualStudio 2022 預覽版用于建立 MAUI 項目。由于 MAUI 的釋出和 VisualStudio 的釋出日期對不上，現在隻能通過預覽版本了，不過後續會合入到正式版本
在建立的項目裡面，建立一個類型，讓這個類型繼承
Microsoft.Maui.Graphics.IDrawable
接口。于是此類型即可通過實作 Draw 方法，被架構層調用到，進而在 Draw 方法裡面執行繪圖。例如和官方的例子一樣，将此類型命名為 GraphicsDrawable 如以下代碼
public class GraphicsDrawable : IDrawable
{
public void Draw(ICanvas canvas, RectF dirtyRect)
{
}
} 複制
在 Draw 裡面通過 DrawLine 畫出一段線條。為了讓線條可見，再加上設定線條的顔色和粗細值的代碼
public void Draw(ICanvas canvas, RectF dirtyRect)
{
canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawLine(10, 10, 90, 100);
} 複制
完成了這一步之後，還需要将 GraphicsDrawable 接入到 MAUI 架構裡面
在 MAUI 架構裡提供了 GraphicsView 元素用來對接 Microsoft.Maui.Graphics 的繪圖功能。在 GraphicsView 的 Drawable 屬性裡面，就是用來傳入 IDrawable 的對象的
對接的第一步是将咱寫的
GraphicsDrawable
類型定義成資源，友善後續代碼都在 XAML 裡面實作。為了示範友善，以下代碼都寫在 MainPage.xaml 裡
<?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:HejawrawceaJurheakelerela"
x:Class="HejawrawceaJurheakelerela.MainPage">
<ContentPage.Resources>
<local:GraphicsDrawable x:Key="GraphicsDrawable"></local:GraphicsDrawable>
</ContentPage.Resources>
</ContentPage> 複制
還請将以上代碼的
local
的命名空間更換為你的項目對應的命名空間
接着在 GraphicsView 裡使用以上定義的資源，如以下代碼
<GraphicsView x:Name="GraphicsView" WidthRequest="100" HeightRequest="100" Drawable="{StaticResource GraphicsDrawable}"></GraphicsView> 複制
運作程式，即可看到界面畫出一條線
可以看到調用堆棧如下
也就是實際的實作是由 Win2D 提供的
以上是在 Windows 平台上運作的，那既然 MAUI 宣稱是跨平台的，那在其他的平台上又是如何
接下來在安卓平台上跑一下
同樣也看一下調用堆棧
可以看到調用堆棧和 Windows 平台上，符合預期的不同，也就是說 Microsoft.Maui.Graphics 根據不同的平台選用不同的繪制底層技術
這就是 MAUI 自繪的開始，如何繪制出漂亮的界面就靠大家發揮
試用了幾天的 MAUI 發現了比上次我用預覽版本有了很大的進步，比如 Windows 端的調試部署極大的提升。當然，這不是 MAUI 團隊的努力，而是 Windows App SDK 團隊的努力，将原本的 UWP 很多逗比邏輯和互動給優化的。自然，不足之處也是有的，那就是 MAUI 團隊還是太小了，好多東西還沒磨完，不過這會随着開發的投入逐漸完善。現在的 MAUI 已經達到了 Demo 級，小工具級可用的狀态。推薦大家要是有什麼小工具，選擇一下 MAUI 試試水也不錯
本文代碼放在github 和 gitee 歡迎通路
可以通過如下方式擷取本文的源代碼，先建立一個空檔案夾，接着使用指令行 cd 指令進入此空檔案夾，在指令行裡面輸入以下代碼，即可擷取到本文的代碼
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 2da0315302ae504f50c4c3baa47fe3f45d0cdc26 複制
以上使用的是 gitee 的源，如果 gitee 不能通路，請替換為 github 的源
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git 複制
擷取代碼之後，進入 HejawrawceaJurheakelerela 檔案夾
在 Microsoft.Maui.Graphics 基礎上建立的 Microsoft.Maui.Graphics.Controls 倉庫，此 Microsoft.Maui.Graphics.Controls 将采用 Microsoft.Maui.Graphics 進行完全的自繪，詳細請看 MAUI中使用Maui.Graphics.Controls繪制控件 - 痕迹g - 部落格園