I can not use SfChartRenderer in donet MAUI.

[jair pinedo]

Hi, I was using the SFChart with a custom renderer, the SfChartRenderer, in Xamarin.Forms, but in MAUI, I cannot use the SfChartRenderer.

 

I developed this behavior in Xamarin.Forms. How can I implement it in MAUI?

[Nitheeshkumar Thangaraj]

Hi Jair,

We would like to inform you that in .NET MAUI, the concept of platform-specific renderers, as used in Xamarin.Forms, has been replaced by a unified codebase that works across all platforms. This means that there aren't individual platform renderers like there were in Xamarin.Forms.

Could you please provide more details about your specific requirements with the renderer? This will help us better understand your needs and offer a more precise solution in .NET MAUI.

Regards,

Nitheeshkumar.

[jair pinedo]

I want to call a ICommand when the trackball is dimiss

[Arul Jenith Berkmans]

Hi Jair,

 

Thank you for providing the details of your requirements, and currently we are validating the possibilities for achieving your requirements. We will update you with further details within two business days (Aug 19, 2024).

 

In the meantime, if possible, could you please provide a sample code or more detailed information on how to execute your requirements for calling the command while dismissing the trackball in Xamarin? This will help us offer a more accurate solution.

 

Thank you for your patience.

 

Regards,

Arul Jenith B.

[Dhanaraj Rajendran]

Hi Jair,

We have prepared a sample to demonstrate how to execute a command when the trackball is hidden under basic conditions. In our implementation, the trackball is hidden when the touch point is outside the series bounds or when the touch interaction ends. Below is a code snippet illustrating this approach:

public class CustomTrackballBehavior : ChartTrackballBehavior

{

    private Command YourCommand { get; set; }

 

    public CustomTrackballBehavior()

    {

        YourCommand = new Command(OnCommandExecuted);

    }

 

    private void OnCommandExecuted()

    {

        // Your command execution logic here

        Debug.WriteLine("Touch point is outside the bounds.");

    }

 

    protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)

    {

        base.OnTouchMove(chart, pointX, pointY);

 

         // when move out of the chart series area, we hide the trackball. So Executed the command here.

        if (!chart.SeriesBounds.Contains(pointX, pointY))

        {

            YourCommand?.Execute(null);

        }

    }

 

    protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)

    {

        // Hide the trackball when the touch interaction ends.

        base.OnTouchUp(chart, pointX, pointY);

        YourCommand?.Execute(null);

    }

}

We have attached a sample project for your reference. Please explore it and see how it can be applied to your application.

If this solution does not fully meet your requirements, could you please provide a sample code or more detailed information on how you need to execute the command while dismissing the trackball in Xamarin? This will help us offer a more accurate and tailored solution.

Thank you for your patience.

Regards,

Dhanaraj Rajendran.

Attachment: SF_F193536_520f7580.zip

[jair pinedo]

Thank you for your response. I tested the code you mentioned, and the command works! However, I discovered an issue with the ScrollView. When I place my SfCartesianChart inside a ScrollView and disable the scroll (scrollView.IsEnabled = false), the trackball freezes. We use this logic to disable scrolling on the page when the user is using the trackball. Here is the code I used, incorporating your example to make it easier to understand.

public class CustomTrackballBehavior : ChartTrackballBehavior
{
    private Command YourCommand { get; set; }

    public CustomTrackballBehavior()
    {
        YourCommand = new Command<ChartBase>(OnCommandExecuted);
    }

    private void OnCommandExecuted(ChartBase chart)
    {
        // Your command execution logic here
        if(chart.Parent.Parent is ScrollView scrollView)
        {
            scrollView.IsEnabled = false;
            Debug.WriteLine("Command executed");
        }
    }

    protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)
    {
        base.OnTouchMove(chart, pointX, pointY);
        YourCommand?.Execute(chart);
    }

    protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)
    {
        base.OnTouchUp(chart, pointX, pointY);
        
        if(chart.Parent.Parent is ScrollView scrollView)
        {
            scrollView.IsEnabled = true;
        }
        YourCommand?.Execute(chart);
    }
}

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
    xmlns:local="clr-namespace:CallCommandWhenTrackballHide"
    x:Class="CallCommandWhenTrackballHide.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>
    <ScrollView>
        <VerticalStackLayout>
            <chart:SfCartesianChart >
                <chart:SfCartesianChart.XAxes>
                    <chart:NumericalAxis />
                </chart:SfCartesianChart.XAxes>

                <chart:SfCartesianChart.YAxes>
                    <chart:NumericalAxis />
                </chart:SfCartesianChart.YAxes>

                <chart:SfCartesianChart.TrackballBehavior>
                    <local:CustomTrackballBehavior />
                </chart:SfCartesianChart.TrackballBehavior>

                <chart:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" />
            </chart:SfCartesianChart>
            
            <VerticalStackLayout BackgroundColor="Red" HeightRequest="800"/>

        </VerticalStackLayout>
    </ScrollView>


</ContentPage>

could you help us pls.

Thank you

[Dhanaraj Rajendran]

Hi Jair,

We have investigated your query and would like to clarify that when you disable a ScrollView or any other visual element, it stops receiving any input events, it includes touch interactions. This is standard behavior inherited from the framework. To allow touch interactions again, you must re-enable the ScrollView.

For your reference, we have updated the modified sample with a framework Slider control to disable the ScrollView and a Button to re-enable it. Once the ScrollView is re-enabled, you will be able to interact with the child of the scrollview as expected.

If you need any further assistance, please don't hesitate to reach out. We're here to help.

Regards,

Dhanaraj Rajendran.

Attachment: CallCommandWhenTrackballHide_9ea676f2.zip

[jair pinedo]

Thanks for the quick reply, the behavior you describe is not what we are looking for.

 

The requirement we have on our side is: When the user interacts with the graph, by tapping on it and starting to move the trackball left or right, our requirement asks us to disable the main scroll of the page and only leave the interaction/movement on the graph, once the focus on the graph is lost, re-enable the scroll of the graph to see the other elements on it, is this possible in your graph in .Net Maui or is this something that will not work in Maui?

 

As an additional note: in Xamarin.Forms this works fine as I described above in this comment.

[Dhanaraj Rajendran]

Hi Jair,

 

We’ve reviewed your requirement. To clarify, when you disable the ScrollView, it will not receive any input events, as this is its default behavior. When interacting with a child element, like the chart within the ScrollView, the interaction is limited to the child. Only after the interaction with the chart is complete does the ScrollView regain focus and become interactive again.

 

However, we’ve investigated this behavior across all platforms and found that there is an issue at the framework level, particularly affecting the Android platform. This occurs due to the parent ScrollView intercepting the scroll rather than dispatch it to the child.

 

It happens when any views and layouts are placed inside a ScrollView and perform actions like scrolling or dragging for the child, but the action performs only for the parent ScrollView. For your reference, we've added the links to the logged issues regarding this matter.

Issue 1:  https://github.com/dotnet/maui/issues/9827

Issue 2:  https://github.com/dotnet/maui/issues/7814

Currently, we can provide you a workaround to display the trackball inside the ScrollView while dragging vertically.

It involves adding a handler for Android that overrides the OnInterceptTouchEvent method, thus disabling scrolling while interacting inside the chart control based on our requirement. Below is a code snippet for your reference:

public class ScrollViewEnableHandler : ScrollViewHandler

{

    protected override MauiScrollView CreatePlatformView()

    {

        . . .

    }

}

 

public class MauiScrollViewEnable : MauiScrollView

{

    private bool _disableScrolling;

    . . . 

    public override bool OnInterceptTouchEvent(MotionEvent? ev)

    {

        return false;

    }

}

Adding this Handler to our MAUI application:

public static class MauiProgram

{

    public static MauiApp CreateMauiApp()

    {

        var builder = MauiApp.CreateBuilder();

        builder

            .UseMauiApp<App>()

            .ConfigureSyncfusionCore()

            .ConfigureMauiHandlers(handlers =>

            {

#if ANDROID

                handlers.AddHandler<ScrollView, ScrollViewEnableHandler>();

#endif

            });

. . .

    }

}

For a clear understanding of creating the Scrollview handler and adding it to the application. You can refer the link provided below.

Link: Disabling Scrolling on Android

Here we have attached a modified sample for your convenience. You can refer to it.

If you have any further inquiries or require assistance, please don't hesitate to reach out. We're here to assist you.

 

Regards,

Dhanaraj Rajendran.

Attachment: SF_193536_2_7f3ab364.zip