Control scrollbar instead of panGesture using touchscreen

9 posts, 1 answers
  1. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 03 Jan Link to this post

    Hello,

    At this moment, when using a touchscreen, a pangesture on the scrollbar, that's on the bottom of the Panorama results in a pangesture event.

    Is it possible that this pangesture ON THE SCROLLBAR controls the scrollbar?

    (see video : http://www.soundware.nl/Data/20190103_161853.mp4)

    The pangesture on the rest of the Panorama-control needs to be intact.

    Best regards

    Patrick Vossen

  2. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 07 Jan Link to this post

    Hello Patrick,

    Thank you for writing.

    I tested a sample project on a touch device and executing the PanGesture on the scrollbar affects the scrollbar which later scrolls the entire control. I am attaching my test project, as well as a short video showing the result on my end. I also tried to download the video referred to in your post but without success. Can you please check how the project will run on your end? In case you will be needing further assistance please let me know how I can reproduce the behavior you are experiencing.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 07 Jan Link to this post

    Hi Hristo,

    Thanks for the sample project. I am going to evaluate it.

    About the link to the video, in the real link the colon has fallen off.

    Here is a good link : http://www.soundware.nl/Data/20190103_161853.mp4

     

    Best regards

    Patrick Vossen

  4. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 07 Jan in reply to Patrick Link to this post

    Hmmm.

    For some reason the colon gets thrown away when create a hyperlink. Now a version without hyperlink, only text:

    http://www.soundware.nl/Data/20190103_161853.mp4

     

  5. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 07 Jan Link to this post

    Hi Hristo,

    Thanks for your sample project and sample video.

    On the video it's rather hard to see what the movement of the touch event/finger is but with the sample project I get the same behavior I already have.

    My preferred behavior is that when I do a panning motion to the right ON THE MAIN CONTROL, that the scrollbar moves to the left but when I do a panning motion to the right ON THE SCROLLBAR, that the scrollbar moves to the RIGHT.

    Best regards

    Patrick Vossen

  6. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 08 Jan Link to this post

    Hello Patrick,

    The desired behavior can be achieved with a custom RadPanoramaElement where the OnPanGesture method can be overridden with custom logic. Please check my code snippet below: 
    public class CustomRadPanorama : RadPanorama
    {
        public override string ThemeClassName
        {
            get
            {
                return typeof(RadPanorama).FullName;
            }
        }
     
        protected override RadPanoramaElement CreatePanoramaElement()
        {
            return new CustomRadPanoramaElement();
        }
    }
     
    public class CustomRadPanoramaElement : RadPanoramaElement
    {
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(RadPanoramaElement);
            }
        }
     
        protected override void OnPanGesture(Telerik.WinControls.PanGestureEventArgs args)
        {
            Rectangle rect = this.ScrollBar.ControlBoundingRectangle;
            RadElement scrollbar = this.ElementTree.GetElementAtPoint(args.Location);
             
            //if (args.Location.Y < rect.Y + 50 && !args.IsBegin)
            if ((scrollbar is ScrollBarThumb || scrollbar is RadScrollBarElement) && !args.IsBegin)
            {
                this.ScrollView(-args.Offset.Width, true);
     
                return;
            }
     
            base.OnPanGesture(args);
        }
    }

    Basically, it will be necessary to scroll the view whenever the gesture is executed on the scrollbar element and not to call the base implementation. Please also note ti might be confusing if the finger is actually on top of the panorama element close to the scrollbar, the end user might think that they will move the scrollbar, but in this case, the panorama element will be scrolled. You can also test uncommenting the if expression above which will update the scrollbar even if the gesture is executed not exactly on it but in an area of 50 px under it.

    I have also updated the sample project which you can find attached. I hope this will help.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 08 Jan in reply to Hristo Link to this post

    Hi Hristo,

    Thanks for the quick response.

    I am going to test the solution!

    Best regards

    Patrick Vossen

  8. Patrick
    Patrick avatar
    32 posts
    Member since:
    Aug 2018

    Posted 08 Jan in reply to Hristo Link to this post

    Hi Hristo,

    Thanks for the solution.

    It works perfectly.

    Grtz Patrick

  9. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 09 Jan Link to this post

    Hello Patrick,

    Thank you for the update. I am glad that I managed to help. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top