視頻教程
簡介
眾所周知, .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 ANDROID
handler.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體系來實現自定義平台控件。