Home > database >  .net maui CarouselView is not quite compatible with Slider control: CarouselView swipe operation tak
.net maui CarouselView is not quite compatible with Slider control: CarouselView swipe operation tak

Time:11-24

.net maui app. Dragging value element along the slider bar does not work if the the slider put into CarouselView's template like this:

 <CarouselView ItemsSource="{Binding Items}">
      <CarouselView.ItemTemplate>
            <DataTemplate>
                        <Slider Minimum="0" Maximum="30" WidthRequest="200" />
            </DataTemplate>
      </CarouselView.ItemTemplate>
 </CarouselView>

CarouselView takes over the swipe event for scrolling through the items, and Slider does not get the event (DragStarted is not even called). You can actually click along the slider bar to change its value, so it's not completely frozen, but not how it's supposed to work. Drag & drop is main way user deal with slider control.

Could anyone advise any workaround? I want users to be able scroll through carousel view items also. It's just if they swipe inside the control, event should not handed over to its parent container, if it's possible to do so.

If I add it outside of the corouselview, combine both in Grid and use padding to align slider inside the corouselview, it works as expected, but I need to add lots of additional code, calculate the desirable location and redirect all bindings, which ends up to be an awkward workaround.

CodePudding user response:

At first, I don't suggest you use the slider in the CarouselView. Becasue you want the same behavior has two effects. There is a conflict between them.

But for the android, you can use the custom handler to deal with the swipe event.

Put the Handler class in the /Platform/Android:

    public class MySliderHander : SliderHandler
    {
        protected override void ConnectHandler(SeekBar platformView)
        {
            base.ConnectHandler(platformView);
            platformView.SetOnTouchListener(new SliderListener());
            // the listener will make the slider deal with the swip event not the CarouselView.
        }
    }

Put the SliderListener class in the /Platform/Android

    public class SliderListener : Java.Lang.Object, IOnTouchListener
    {
        public bool OnTouch(global::Android.Views.View v, MotionEvent e)
        {
            if (e.Action == MotionEventActions.Down || e.Action == MotionEventActions.Move)
            {
                v.Parent.RequestDisallowInterceptTouchEvent(true);
            }
            else
            {
                v.Parent.RequestDisallowInterceptTouchEvent(false);
            }
            return false;
        }
    }

And in the MauiProgram.cs:


builder
                  .UseMauiApp<App>()      
                  .ConfigureMauiHandlers(handlers => {
             #if ANDROID
                        handlers.AddHandler(typeof(Slider), typeof(YourProjectName.Platforms.Android.MySliderHander));
                  #endif
                  })

In addition, the Slider's height is same as the CarouselView. So you can use a frame to contain the Slider and swipe the CarouselView by swiping the frame.

  • Related