.NET Maui Custom Handler pass parameters from xaml code to handler code?

Question

I have a .Net MAUI application. It has a page where I use some custom handlers (custom renderers sort of) as my controls. For example, I have a label that is overwritten with some code to create a border around it:

    Microsoft.Maui.Handlers.LabelHandler.LabelMapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
            {
                if (view is CustomHandlerLabelPriceTag)
                {
#if __ANDROID__
                    handler.NativeView.SetBackgroundColor(Colors.Red.ToNative());

                    var gradientDrawable = new GradientDrawable();
                    gradientDrawable.SetCornerRadius(70f);
                    gradientDrawable.SetStroke(5, global::Android.Graphics.Color.ParseColor(SharedAppMethods.GetColorByKey("ColorPriceTag")));
                    gradientDrawable.SetColor(global::Android.Graphics.Color.ParseColor(SharedAppMethods.GetColorByKey("ColorBackground")));
                    handler.NativeView.SetBackgroundDrawable(gradientDrawable);

                    handler.NativeView.SetPadding(handler.NativeView.PaddingLeft, handler.NativeView.PaddingTop, handler.NativeView.PaddingRight, handler.NativeView.PaddingBottom);
#elif __IOS__
                    handler.NativeView.BackgroundColor = Colors.Red.ToNative();
                    handler.NativeView.BorderStyle = UIKit.UITextBorderStyle.Line;

                    handler.NativeView.Layer.CornerRadius = 30;
                    handler.NativeView.Layer.BorderWidth = 3f;
                    handler.NativeView.Layer.BorderColor = Color.FromArgb(SharedAppMethods.GetColorByKey("ColorPriceTag")).ToCGColor();
                    handler.NativeView.Layer.BackgroundColor = Color.FromArgb(SharedAppMethods.GetColorByKey("ColorBackground")).ToCGColor();

                    handler.NativeView.LeftView = new UIKit.UIView(new CGRect(0, 0, 0, 0));
                    handler.NativeView.LeftViewMode = UIKit.UITextFieldViewMode.Always;
#endif
                }

It has this class, nothing much is needed here:

using Microsoft.Maui.Controls;

namespace SheeperMAUI.CustomHandlers
{
    internal class CustomHandlerLabelPriceTag : Label
    {
    }
}

This is how I use it in the XAML code on my page:

MY QUESTION: I want to able to pass a string in the XAML code above (by binding it to a string I already have ie. using {Binding ...}) to the custom handler where that string will be used to set the border color in the custom handler code. I only have to know how to pass that value, the rest I can solve myself ;) Is this possible?

Thanks!

user_199364 · Answer

Fundamentally, you need a custom BindableProperty on your custom control. Then handler can access that property.

This answer shows Xamarin Forms code. Should be easy to adapt to MAUI Handler.

In CustomHandlerLabelPriceTag.xaml.cs:

public class CustomHandlerLabelPriceTag : Label
{
    // The property that will contain this special string.
    public static readonly BindableProperty MyStringProperty =
        BindableProperty.Create(nameof(MyString), typeof(string), typeof(MainPage), "");

    public double MyString
    {
        get { return (double)GetValue(MyStringProperty); }
        set { SetValue(MyStringProperty, value); }
    }
}

To use this on a page, I'll call it MyPage.xaml.cs:

public string MySpecialString { get; set; }

In MyPage.xaml, bind your control's MyString to your BindingContext's corresponding public string property. Here, I assume that is MySpecialString, and that it is in code behind of MyPage, so the "Source" is "this":

In Custom renderer (hopefully similar in MAUI handler):

// In XF, `Element` is the XF view being rendered.
if (Element != null) {
    string specialString = Element.MyString;
    // OR cast if necessary:
    string specialString = ((CustomHandlerLabelPriceTag)Element).MyString;
}

UPDATE - For MAUI handler (based on comment below):

string PassedColorParameter = ((CustomHandlerLabelInfoCard)view).MyString;

.NET Maui Custom Handler pass parameters from xaml code to handler code?

1 Answers