MAUI 自定義繪圖入門

在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 文件夾

博客園博客只做備份，博客發佈就不再更新，如果想看最新博客，請到 https://blog.lindexi.com/