CODEWITHSUNDEEP
c#maui
MonoMatrix
MonoMatrix

Reputation: 123

.NET MAUI: How to decouple the date display from the DatePicker and render it in a separate CustomControl with Handlers (iOS)

enter image description here The .NET Maui DatePicker control in iOS consists of an Entry that, upon receiving focus, opens a date viewer which allows you to choose the day, month, and year that you decide, and by clicking the "Done" button, the entry retrieves the date you chose. What I want to do is create a custom control which I think would have to inherit from "View" and in this control render only the date viewer without the entry, that is to say that this control, when inserted in a XAML, would only draw the date viewer without any entry or the Done button, I am doing some tests but I am not very sure how to proceed in MAUI with Handlers in Xamarin with renderers it would occur to me to create a render of a custom control that inherits from DatePickerRenderer and access the native InputView of the DatePicker and try to render it in a custom control that inherits from View using the SetNativeControl, however with the MAUI Handlers I am not clear what is the equivalent of the SetNativeControl, any suggestions on how to proceed in this regard?

With renderers in Xamarin, it would occur to me to use the SetNativeControl to somehow try to render the date viewer in another CustomControl that inherits from View (although I don't know exactly how to access that date viewer and decouple it from the DatePicker to dump it into my own customControl):

Pseudo code Xamarin:

public class CustomDatePickerRenderer : DatePickerRenderer {
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

Control... //Here I would need some property that gives me access only to the date viewer of the DatePicker in iOS? Could it be InputView or InputAccessoryView?

        //How could I access the date viewer and render it to another custom control that inherits from View?
        SetNativeControl();
    } }

In .NET Maui there is no SetNativeControl, so I don't know how to approach this development. I know how to access the native control with the Handlers, but I can't think of how to access that date viewer in the first place and how I could render it in a other CustomControl that inherits from View:

Pseudo code .NET Maui:

    Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping("DateViewerCustomization", (handler, view) =>
        {
            if (view is DateViewer)
            {
#if IOS
                handler.PlatformView... //Here I would need some property that gives me access only to the date viewer of the DatePicker in iOS? Could it be InputView or InputAccessoryView?
#endif
            }
        });

Pseudo code XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:Test.Controls"
    x:Class="Test"
    Title="Test">

    <ContentPage.Content>
        <VerticalStackLayout>            
            <controls:DateViewer />
        </VerticalStackLayout>
    </ContentPage.Content>
</ContentPage>

My idea is that this custom DateViewer control was a container that would only be used to render that date viewer, which I don't know is how it would be done in .NET Maui, in Xamarin the SetNativeControl would be used. Any suggestions on how to proceed?

Pseudo code Custom Control DateViewer :

public partial class DateViewer  : View
{
    public DateViewer()
    {
        InitializeComponent();
    }
}

Upvotes: 0

Views: 1754

Answers (1)

Zack
Zack

Reputation: 1639

To create platform controls in Maui, you can create and return a native view that implements cross-platform controls by overriding the CreatePlatformView method. For more details, you can refer to: Create the platform controls.

You can also continue to use Renderer in Maui, you can refer to: Using Custom Renderers in .NET MAUI. It should be noted that using AddCompatibilityRenderer in the document may cause a crash, you can modify it to AddHandler, like this:

#if IOS
           handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.iOS.Renderers.PressableViewRenderer));
#endif

Upvotes: 0

Related Questions