Xamarinを再利用する方法.カスタムレンダラ.ネットマウイ

最近では、AndroidやIOSからWindowsやMacOSに向けて、複数のプラットフォーム間で動作する多くのデバイスが見られます.すべてのこれらのプラットホームのために一つの目的のために複数のアプリケーションを開発することは、非常に時間がかかるです.このニーズに対処するために、マイクロソフトはXamarin.Forms それは最近呼ばれた新しい枠組みに進化した.NET MAUI . キマリンの進化としてフォーム.ネットマウイは前任者の多くの重要な利点を持っています.これらの利点のいくつかは、ブログで詳述されています.
ご存知の通り.NET MAUIは、Xamarinに対してハンドラアーキテクチャを使用します.フォームはレンダラアーキテクチャを使用します.しかし、心配しないでください.ネットマウイはレンダラと互換性があります.複雑なカスタムレンダラが実装されている大きなプロジェクトがある場合は、ハンドラーにそれらを移行するアイデアはありませんし、このブログのポストはあなたのためです.
ここでは、それはあなたの既存のxamarinを移行する方法を簡単に表示されます.カスタムレンダラ.NETマウイプロジェクト.

必要条件.ネットマウイ

Visual Studio 2022(プレビュー2またはそれ以降)を実行するのに必要なワークロードを確認します.NETマウイプロジェクト.詳細については.NET MAUI Installation documentation .

Xamarinを作成します。カスタムレンダラー

カスタムレンダラは、Xamarinコントロールをカスタマイズすることにより、プラットフォーム間のスタイル、背景色、テキスト形式のような要素の外観の一貫性を確保するために使用されます.
ステップ1 :まず、ザマリンを作成しましょう.簡単なカスタムレンダラでカスタマイズするボタンコンポーネント.
MyButtonという名前のカスタムボタンクラスを作成したコード例を次に示します.

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

Step 2 :次のコード例に示すように、作成したMyButtonクラスのカスタムレンダラーを作成します.

Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using CustomRenderer;
using CustomRenderer.Android;
using Android.Content;

[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
namespace CustomRenderer.Android
{
class MyButtonRenderer : ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}

protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);

if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightBlue);
}
}
}
}

Xamarinを移動します。フォームにカスタムレンダラ.ネットマウイプロジェクト

Xamarinを移行するためにこれらの手順に従ってください.フォームにカスタムレンダラ.NET MUIプロジェクト:
ステップ1:使用します.NETアップグレードアシスタント.ネットマウイの移行Xamarin.Forms projects to .NET MAUI . また、新規作成することができます.NETマウイプロジェクト.ここでは、我々は新しいを作成するつもりです.MauiProjectWithReaddererという名前のNet Muiプロジェクト.
レンダラによるマウイプロジェクト
Step 2 : Xamarinからレンダラコードをコピーしペーストするために必要なクラスファイルを作成します.フォームプロジェクト.必要なプラットフォーム固有のフォルダの下に作成します.
次のスクリーンショットを参照してください.
プラットフォーム固有のフォルダに追加されたレンダラファイル
Step 3 : Xamarinからカスタムレンダラのコードをコピーしてペーストする.新しく作成したファイルにプロジェクトを作成します.
ステップ4 :次に、すべてのxamarinを削除します.フォームの参照と関連付けを追加します.それらの場所のネットマウイ参照.例えば、
削除参照
追加参照
xamarinの使用フォーム.のりばアンドロイド
xamarinの使用フォーム
マイクロソフトを使うマウイ.コントロール
マイクロソフトを使うマウイ.コントロール.ホーム
マイクロソフトを使うマウイ.コントロール.互換性.のりばアンドロイド.appcompat ; `
これらの変更を実行した後のコードは次のようになります.csharp
using Android.Content;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Compatibility.Platform.Android.AppCompat;
namespace CustomRenderer.Android
{
class MyButtonRenderer : ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.LightBlue);
}
}
}
}


Step 5: Then, remove the ExportRenderer method. Since the assembly coupling and decoupling do not act like the traditional method, we have to register the renderer in the project’s StartUp file.

Exported renderer should be removed from the MyButtonRenderer class.	Register the renderer in the StartUp.cs file.
// [assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]	appBuilder.ConfigureMauiHandlers(handlers => { handlers.AddCompatibilityRenderer(typeof(MyButton), typeof(MyButtonRenderer)); });

Note: The previous steps are for the Android platform. You can follow a similar procedure for iOS and other platforms too.

Step 6: Now, we have successfully moved the customer renderer into the .NET MAUI project. Finally, create an instance for the control and then run it to check.

Refer to the following code example.

html
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MAUIProjectWithRenderer.MainPage"
xmlns:button="clr-namespace:CustomRenderer"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<Grid>
<button:MyButton Text="I AM A BUTTON CUSTOM RENDERER FROM MAUI"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="300"
HeightRequest="50"/>
</Grid>
</ContentPage>


After executing these steps, we will get the final output as shown in the following screenshot.

Githubリファレンス

For more details, refer to the MAUI Project With Renderer demo.

概要

I hope you are now ready to migrate your Xamarin.Forms custom renderers into a .NET MAUI project. Regardless, it is recommended to use handlers instead of renderers to achieve better performance. If you have a very big Xamarin project with complex renderers and you need to migrate to .NET MAUI, then you can follow the steps in this blog post, and later replace the renderers with handlers one by one over time. We may return with another blog on how to replace renderers with handlers, so stay tuned!

We are planning to deliver .NET MAUI controls to replace our existing Syncfusion Xamarin.Forms controls. So, you can use them once you migrate to .NET MAUI projects. You can expect our .NET MAUI controls soon- our first set of controls will be available with the .NET MAUI GA release.

If you have any feedback, special requirements, or controls you’d like to see in Syncfusion’s .NET MAUI support, please let us know in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!

関連ブログ