WPF 使用 MAUI 的自繪制邏輯

這是一個目前還沒開發完成的功能，準确來說連預覽版也算不上的功能。我原本以為 MAUI 是無法在 WPF 上面跑的，然而在看完了 MAUI 整個大的設計，才了解到，原來 MAUI 是一個非常龐大的開發項目。在 MAUI 裡面，雖然現在是正式釋出的，但正式釋出的版本裡面隻有采用原生控件進行繪制的方案。這和官方開始的宣傳不符合，在閱讀了 MAUI 相關文檔才發現，實際上 MAUI 還有一個很大的部分，那就是自繪部分，還沒完成，代碼也分了倉庫，這就是一開始沒找到的原因。本文将告訴大家 MAUI 還沒釋出的這部分大殺器

本文所涉及的全部都是繪制的渲染層，而衆所周知，一個 UI 架構最重要的兩個部分就是互動和渲染。本文僅僅隻會涉及到渲染的一部分

制作一個跨平台的 UI 架構有很多個方式，例如使用各個平台提供的原生控件，也就是說在 Windows 平台上，采用 WinUI 的按鈕，在 iOS 平台上使用蘋果提供的按鈕，具體的按鈕樣式等等就需要取平台最小集以及開放定制性，最重要的代表就是原先的 Xamarin 的方式。采用各個平台的提供的原生控件的一個優勢在于可以擷取平台提供的功能，更加貼合具體平台的視覺和互動，缺點是不同的平台的視覺效果有所差異。另一個方式是做中間較底層的自繪，基本上各個平台都會提供自繪的能力，如 WPF 下的 DrawingContext 和 Win2D 等等，基于此方式做自繪，可以更加友善接入原有的平台，降低原有的應用接入的成本，而這就是本文的重點。最後一個方式是做底層的自繪，使用平台最底層的繪制邏輯，或者其他渲染架構的封裝進行二次封裝，如 Skia 或 GTK 等，對此進行渲染。使用底層的自繪邏輯可以做到更多的可控性，但缺點也在于可控性導緻開發起來十分麻煩，與現有的應用接入也相對來說無法實作最好的性能

很多的 UI 架構都會采用其中的一個方式。然而别忘了 MAUI 是某軟主力做的，按照某軟的想法，那就是都要。在 MAUI 裡面，既可以使用平台提供的原生控件進行拼接制作界面，也可以使用基于的各個平台的獨立 UI 架構提供的自繪能力繪制界面，也可以調用到底層的渲染邏輯進行渲染

但，這也不是免費的。如此大的一個項目，自然投入的成本，無論是人力還是開發周期，都是非常龐大的。盡管現在 MAUI 正式釋出了，可惜還有很大部分的工作還沒完成，甚至還沒開始

在吸取了很多次失敗的教訓之後，某軟決定拆分倉庫，以解決如此大的一個項目的某些元件或部分的失敗帶來整體的失敗。這是 dotnet runtime 組的成功的例子帶來的組織形式的經驗，在 dotnet runtime 裡面，将不穩定的實驗的功能放在 .NET Runtime Lab 倉庫裡面。不穩定的功能，如果能成，那自然能大大提升 dotnet 的競争力，如果不成也不應該影響到整個 dotnet 的釋出

目前的 MAUI 也是這個管理方式，在 MAUI 裡面，将渲染層拆出一個 Microsoft.Maui.Graphics 倉庫，如 MAUI 自定義繪圖入門所提到的。其實 Microsoft.Maui.Graphics 是由原本的 System.Graphics 改名而來。這個 System.Graphics 項目初步完成時間比 MAUI 早很多，定位是做全平台的繪制封裝層，提供了各個平台的繪制渲染的上層統一。包括了兩個實作方式，一個是對各個平台提供的 UI 架構的自繪邏輯進行封裝，進而對上層統一。另一個方式對各個底層繪制渲染邏輯包括 Skia 和 GTK 甚至是 DirectX 進行封裝，進而提供給上層統一的邏輯，隻需要簡單的代碼即可切換

接下來是在有 Microsoft.Maui.Graphics 的基礎上，也就是在能提供各個平台上層統一的繪制能力之後，進行實作各個基礎控件。這就是 Microsoft.Maui.Graphics.Controls 倉庫，這個倉庫的需求就是制作自繪的控件。如此即可實作各個平台上像素級的統一，或者是更加友善接入原有的應用的 UI 架構

本文是在 2022.06 寫的，以上的很多功能都隻是能吹不能用。但是隻是寫一篇水文，那可不是我的風格。自然就是開始實際的寫代碼階段

認識我的夥伴們都知道，我對渲染是比較熟悉的。我接下來将告訴大家，如何使用 Maui 提供的架構層，配合 WPF 提供具體的自繪邏輯，兩個放在一起，進而實作 WPF 使用 MAUI 的自繪邏輯

核心的實作方法是 WPF 提供畫布功能，讓 MAUI 可以在 WPF 上面畫元素。在 MAUI 裡面提供架構，以及具體的繪制指導，和上層 API 調用

本文以下部分将用到還沒有釋出，但是也差不多快完成的

Microsoft.Maui.Graphics.Xaml.WPF

提供的功能。這個庫的代碼放在 Microsoft.Maui.Graphics 倉庫，這個庫屬于做中間較底層的自繪，利用 WPF 提供的豐富的繪圖能力進而介入 MAUI 定義的抽象接口。由于此庫還沒完成，為了完成接入，我沒有使用 DLL 引用，而是拷貝了這個庫的代碼到我的測試代碼裡面，然後再進行稍微的魔改，解決建構不通過

大概的對接方式如下，先在 WPF 裡面放一個 Canvas 控件，這個控件将被作為 MAUI 的畫布。如此也能解答一些夥伴的疑惑，那就是 MAUI 接入 WPF 的話，能作為控件的形式接入，而不作為類似 WindowsFormsHost 的方式接入。如本文下面的代碼，隻是提供一個 Canvas 控件，讓 MAUI 将内容繪制在這個 Canvas 上。如此可見 MAUI 的大的方面的設計還是很好

<Canvas x:Name="Canvas" />

在背景代碼裡面，将建立 XamlCanvas 類型的

_canvas

字段，同時将上面代碼的 Canvas 傳入

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        _canvas.Canvas = Canvas;

        SizeChanged += (source, args) => Draw();
    }

    public IDrawable Drawable
    {
        get => _drawable;
        set
        {
            _drawable = value;
            Draw();
        }
    }

    private void Draw()
    {
        if (_drawable != null)
        {
            using (_canvas.CreateSession())
            {
                _drawable.Draw(_canvas, new RectF(0, 0, (float) Canvas.Width, (float) Canvas.Height));
            }
        }
    }

    private readonly XamlCanvas _canvas = new XamlCanvas();
    private IDrawable _drawable;
}

以上代碼的 XamlCanvas 繼承了 ICanvas 接口。在 MAUI 的自繪裡面，最重要的就是 ICanvas 接口，這是一個表示畫布的接口，在這個接口裡面實作了具體的繪制的抽象 API 定義。換句話說，如果你想要接入自己想要的其他平台，那很重要的一點就是去實作 ICanvas 的功能

以上的 XamlCanvas 是屬于庫提供的功能，将通過傳入的 Canvas 實作對接 MAUI 和 WPF 的邏輯

有了畫布之後，想要在界面繪制内容，那還需要告訴架構層想要畫出什麼内容。這就是屬于業務層的内容了，在業務層裡面，将需要繼承 IDrawable 接口，實作 Draw 方法。在 Draw 方法進行業務層的渲染

例如一個畫線的業務功能，可以使用如下實作方式

class DrawLines : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            canvas.DrawLine(50, 20.5f, 200, 20.5f);

            canvas.DrawLine(50, 30.5f, 200, 30.5f);
        }
    }

将 DrawLines 的對象設定給 Drawable 屬性，即可看到界面畫出線

以上的 DrawLines 就是屬于

通用 MAUI 渲染層

的邏輯，将這段代碼拿出來，可以跑在使用其他底層渲染技術但是接入 Microsoft.Maui.Graphics 的渲染技術，例如底層換成是 Win2D 等。如此即可通過造上層的通用 MAUI 渲染層的邏輯，進而搭建起界面效果的生态。更多自定義的繪圖，請看 MAUI 自定義繪圖入門 - lindexi - 部落格園

我十分推薦大家跑一下我的 demo 進而了解到目前的 MAUI 的實作進度

本文測試代碼放在github 和 gitee 歡迎通路

可以通過如下方式擷取本文的源代碼，先建立一個空檔案夾，接着使用指令行 cd 指令進入此空檔案夾，在指令行裡面輸入以下代碼，即可擷取到本文的代碼

git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 8d4c37dbbde83e03a6daa4e3454a5d007c64dffe

以上使用的是 gitee 的源，如果 gitee 不能通路，請替換為 github 的源

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git

擷取代碼之後，進入 RijoqicainejoHifolurqall 檔案夾

部落格園部落格隻做備份，部落格釋出就不再更新，如果想看最新部落格，請到 https://blog.lindexi.com/

本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協定進行許可。歡迎轉載、使用、重新釋出，但務必保留文章署名[林德熙](http://blog.csdn.net/lindexi_gd)(包含連結:http://blog.csdn.net/lindexi_gd )，不得用于商業目的，基于本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我[聯系](mailto:[email protected])。