快捷導(dǎo)航

Xamarin渲染器移植到.NET?MAUI項(xiàng)目中

更新時(shí)間：2022年02月15日 11:29:29 作者：痕跡g

這篇文章介紹了Xamarin渲染器移植到.NET?MAUI項(xiàng)目中的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡介

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

先決條件

為了還原本次測試環(huán)境, 下面分別列舉了本次測試代碼移植的開發(fā)測試環(huán)境, 如下所示:

IDE: Visual Studio Community 2022 Preview (64 位) 17.0.0 Preview 7.0

操作系統(tǒng): Windows 11家庭版已安裝Andoroid子系統(tǒng)(調(diào)試使用)

IDE：安裝Xamarin移動(dòng)端開發(fā)環(huán)境及MAUI預(yù)覽版環(huán)境

創(chuàng)建Xamarin渲染器

第一步: 首先創(chuàng)建一個(gè)Xamarin.Forms項(xiàng)目, 在Android項(xiàng)目中創(chuàng)建CustomRender文件夾, 并且創(chuàng)建自定義渲染器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);
            }
        }
    }
}

第二步:在類庫項(xiàng)目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>

第四步:啟動(dòng)Android項(xiàng)目,預(yù)覽效果,如下所示:

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

渲染器移植至MAUI項(xiàng)目

第一步: 這里, 直接創(chuàng)建名為MAUIRender的新MAUI項(xiàng)目。

第二步: 然后, 我們把Xamarin中創(chuàng)建的MyButton與MyButtonRender直接復(fù)制到MAUI的項(xiàng)目中, 如下所示:

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當(dāng)中, 渲染器強(qiáng)制聲明在Android項(xiàng)目中, 耦合性很強(qiáng)。這一點(diǎn),在MAUI項(xiàng)目當(dāng)中, 則是通過Startup類中依賴注入的形式添加,通過擴(kuò)展方法 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平臺(tái)的自定義渲染器, 當(dāng)然我們可以這么做, 如果當(dāng)該渲染器僅僅為Android提供, 我們即可單獨(dú)設(shè)置。

第四步: 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>

最終運(yùn)行效果圖,如下所示: