簡介

眾所周知, .NET MAUI使用的是Handler處理程序, 而Xamarin使用的則是Render渲染器模式。盡管MAUI中使用了新的渲染模式, 但是仍然Xamarin中的支持Render渲染器, 這意味著如果你的項目是從Xamarin移植到MAUI當中, 大部分代碼能夠可以重用, 本篇文章介紹如何將Xamarin 渲染器(Render)移植到.NET MAUI項目當中。

先決條件

為了還原本次測試環境, 下面說明了本次測試的開發環境, 如下:

IDE: Visual Studio Community 2022 Preview (64 位) 17.0.0 Preview 7.0
操作系統: Windows 11家庭版 已安裝Andoroid子系統(調試使用)
IDE 模塊：安裝Xamarin移動端開發環境及MAUI預覽版環境

創建Xamarin渲染器

• 第一步: 首先創建一個Xamarin.Forms項目, 在Android項目中創建CustomRender文件夾, 并且創建自定義渲染器MyButtonRender, 如下所示:
  

說明: MyButtonRender類完整代碼如下所示:

using Android.Content; using App2.Droid.CustomRender; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; using App2;[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRender))] namespace App2.Droid.CustomRender {public class MyButtonRender : ButtonRenderer{public MyButtonRender(Context context) : base(context){}protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e){base.OnElementChanged(e);if(Control!= null){Control.SetBackgroundColor(global::Android.Graphics.Color.Red);}}} }

• 第二步:在類庫項目App2中添加MyButton類,繼承Button, 如下所示:

using Xamarin.Forms;namespace App2 {public class MyButton : Button{} }

• 第三步:在Xaml中使用MyButton, 如下所示:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="App2.Views.AboutPage"xmlns:my="clr-namespace:App2" ><Grid><!--此處略過許多代碼--><my:MyButton Text="About！" /></Grid> </ContentPage>

• 第四步:啟動Android項目,預覽效果,如下所示:
  

說明:通過上面幾步, 我們輕松的完成了在Xamarin當中自定義渲染器并且顯示在模擬器當中, 接下來, 主要的任務是將Xamarin現有的
自定義渲染器移植到MAUI項目中, 那么下面接著繼續表演。

渲染器移植至MAUI項目

• 第一步: 這里, 直接創建名為MAUIRender的新MAUI項目。
  

• 第二步: 然后, 我們把Xamarin中創建的MyButton與MyButtonRender直接復制到MAUI的項目中, 如下所示:
  

MyButtonRender類修改如下:

using App2; using Android.Content; using Microsoft.Maui.Controls.Platform; using Microsoft.Maui.Controls; using Microsoft.Maui.Controls.Compatibility.Platform.Android.FastRenderers;namespace MAUIRender {public class MyButtonRender : ButtonRenderer{public MyButtonRender(Context context) : base(context){}protected override void OnElementChanged(ElementChangedEventArgs<Button> e){base.OnElementChanged(e);if(Control!= null)Control.SetBackgroundColor(global::Android.Graphics.Color.Red);}} }

說明: 此處更新涉及更新命名空間引用

移除舊的Xamarin引用:
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;

添加新的MAUI引用:
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Compatibility.Platform.Android.AppCompat;

移除?[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRender))] (原因下面說)

MyButton類修改如下:

using Microsoft.Maui.Controls;namespace App2 {public class MyButton : Button{} }

說明: using Xamarin.Forms; 更新為: using Microsoft.Maui.Controls;

• 第三步: 依賴注入自定義的Render
  上面所講到移除 [assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRender))] 聲明,
  在Xamarin當中, 渲染器強制聲明在Android項目中, 耦合性很強。這一點,在MAUI項目當中, 則是通過Startup類中依賴注入的形式添加,通過擴展方法 ConfigureMauiHandlers 添加 AddCompatibilityRenderer,如下所示:

public static MauiApp CreateMauiApp(){var builder = MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");}).ConfigureMauiHandlers(handler =>{#if ANDROIDhandler.AddCompatibilityRenderer(typeof(MyButton), typeof(MyButtonRender));#endif});return builder.Build();}

說明: 之所以使用ANDROID 條件, 取決于我們并為定義IOS平臺的自定義渲染器, 當然我們可以這么做, 如果當該渲染器僅僅為Android提供, 我們即可單獨設置。

• 第四步: XAML頁面中添加MyButton命名空間, 聲明MyBuToon, 如下所示:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="MAUIRender.MainPage"xmlns:my="clr-namespace:MAUIRender"BackgroundColor="{DynamicResource SecondaryColor}"><Grid><my:MyButton Text="Hello,MyButton!!!"HeightRequest="80"WidthRequest="300"HorizontalOptions="Center"/></Grid> </ContentPage>

最終運行效果圖,如下所示:

總結

這篇文章主要給大家介紹了如何將Xamarin Render移植到 .NET MAUI項目當中, 當然在新的MAUI當中,
仍然建議大家使用新的Handler處理程序來實現, 并且它提供了更好的性能以及靈活性。
下一篇, 主要給大家介紹, 如何在MAUI當中使用新的Handler體系來實現自定義平臺控件。

總結

以上是生活随笔為你收集整理的MAUI 移植 Xamarin.Forms 自定义渲染器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。