We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I prevent scrolling when focus is on SFImageEditor?

Thread ID:

Created:

Updated:

Platform:

Replies:

144683 May 17,2019 10:30 AM UTC Sep 14,2020 12:39 PM UTC Xamarin.Forms 9
loading
Tags: SfImageEditor
Gumnut Developers
Asked On May 17, 2019 10:30 AM UTC

I have a problem with SfImagEditor when it is inside a scrollview with other controls on it. Everytime I try to draw something on the imageEditor, page keeps scrolling. Is there a way to prevent it from scrolling? 

Below is my xaml code:

    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="600"></RowDefinition>
                <RowDefinition Height="300"></RowDefinition>
                <RowDefinition Height="800"></RowDefinition>
            </Grid.RowDefinitions>

            <StackLayout Grid.Row="0" BackgroundColor="Red"></StackLayout>
            <StackLayout Grid.Row="1" BackgroundColor="White">
                <imageeditor:SfImageEditor Source="body.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
            </StackLayout>
            <StackLayout Grid.Row="2" BackgroundColor="Blue"></StackLayout>
        </Grid>
    </ScrollView>

Thanks!

Bharathiraja K [Syncfusion]
Replied On May 20, 2019 12:52 PM UTC

Hi Gumnut, 
 
We have provided response for the same query in the Direct Track incident which was created under your account. Please take follow-up the direct track incident. 
 
Regards, 
Bharathi. 


white wabbit
Replied On June 19, 2019 07:23 AM UTC

How did u do it?

Rachel A [Syncfusion]
Replied On June 20, 2019 07:15 AM UTC

Hi White,  
 
You can prevent the scrolling by disabling the scroll in a custom renderer for each platform. Please find the sample from the following location.  
  
  
 In the above sample, we have added the custom (“Scroll”) toolbar item in the ImageEditor control to enable or disable the scrolling by tapping (“Scroll” item) of ImageEditor. Currently. there is no direct way to disable the scrolling when editing the image. 
  
Thanks,  
Rachel.  


Miike
Replied On January 3, 2020 07:47 PM UTC

Hi, can you make this code example public?

Bharathiraja K [Syncfusion]
Replied On January 6, 2020 07:14 PM UTC

Hi Michal, 
 
Query: can you make this code example public? 
 
Can you please confirm whether you would like documentation or code snippet? As it is a workaround, we can’t make documentation for this. However, we have added code snippet and described that what we have done in the attached sample for all platforms (Forms.Android, Forms.iOS and Forms.UWP).  
 
 In Forms, created new class ScrollViewExt that is extended from ScrollView control and created an interface IScrollViewDependencyService to disable the scrolling option in UWP and iOS native object. For Android, we can stop scrolling in CustomRenderer OnInterceptTouchEvent method itself.  
 
Forms MainPage.xaml.cs 
[C#]: 
public interface IScrollViewDependencyService 
    { 
        void Scrolling(bool isScrolling,object nativeObject); 
    } 
 
    public class ScrollViewExt : ScrollView 
    { 
        //Gets or sets the native scroll object 
        public object NativeObject { get; set; } 
 
        //Used to specify to enable/disable the scrolling 
        public bool IsScrolling { get; set; } = true; 
    } 
 
Then added “Scroll” toolbar item on ImageEditor to enable disable the scrolling using ToolbarItemSelected event. 
 
Forms MainPage.xaml.cs [C#]: 
public MainPage() 
        { 
            InitializeComponent(); 
            editor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() 
            { 
                Text = "Scroll" 
            }); 
            editor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected; 
        } 
 
        private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e) 
        { 
            if (e.ToolbarItem.Text == "Scroll") 
            { 
                scrollView.IsScrolling = !scrollView.IsScrolling; 
                //Call the native method and pass the arguments  
DependencyService.Get<IScrollViewDependencyService>().Scrolling(scrollView.IsScrolling, scrollView.NativeObject); 
            } 
        } 
 
Forms.Android CustomRenderer.CS 
    public class CustomRenderer: ScrollViewRenderer 
    { 
        ScrollViewExt scrollViewExt; 
        protected override void OnElementChanged(VisualElementChangedEventArgs e) 
        { 
            base.OnElementChanged(e); 
            scrollViewExt = e.NewElement as ScrollViewExt; 
        } 
        public override bool OnInterceptTouchEvent(MotionEvent ev) 
        { 
            //Cancelled scrolling b yreturn false 
            if (!scrollViewExt.IsScrolling) 
                return false; 
     
            return base.OnInterceptTouchEvent(ev); 
        } 
    } 
 
    public class CustomDependencyService : IScrollViewDependencyService 
    { 
 
        public void Scrolling(bool isScrolling, object nativeObject) 
        { 
            //No implementation needed for Android 
        } 
    } 
 
 
Forms.iOS AppDelegate.CS 
    public class CustomRenderer : ScrollViewRenderer 
    { 
        ScrollViewExt scrollViewExt; 
        protected override void OnElementChanged(VisualElementChangedEventArgs e) 
        { 
            base.OnElementChanged(e); 
            scrollViewExt = e.NewElement as ScrollViewExt; 
            //Set native object  
            scrollViewExt.NativeObject = NativeView as UIScrollView; 
        } 
    } 
    public class CustomDependencyService : IScrollViewDependencyService 
    { 
        public void Scrolling(bool isScrolling, object nativeObject) 
        { 
            var native = nativeObject as UIScrollView; 
            //Disable the scrolling in native object 
            (nativeObject as UIScrollView).ScrollEnabled = isScrolling; 
        } 
    } 
 
 
Forms.UWP CustomRenderer.CS 
public class CustomRenderer : ScrollViewRenderer 
    { 
        ScrollViewExt scrollViewExt; 
        protected override void OnElementChanged(ElementChangedEventArgs<ScrollView> e) 
        { 
            base.OnElementChanged(e); 
            scrollViewExt = e.NewElement as ScrollViewExt; 
           //Set native object in the extended class variable 
            scrollViewExt.NativeObject = Control; 
        } 
    } 
    public class CustomDependencyService : IScrollViewDependencyService 
    { 
        public void Scrolling(bool isScrolling, object nativeObject) 
        { 
            var native = nativeObject as ScrollViewer; 
             
            //Enable/disable the scrolling option 
            if (isScrolling) 
            { 
                native.HorizontalScrollMode = Windows.UI.Xaml.Controls.ScrollMode.Enabled; 
                native.VerticalScrollMode = Windows.UI.Xaml.Controls.ScrollMode.Enabled; 
            } 
            else 
            { 
                native.HorizontalScrollMode = Windows.UI.Xaml.Controls.ScrollMode.Disabled; 
                native.VerticalScrollMode = Windows.UI.Xaml.Controls.ScrollMode.Disabled; 
            } 
        } 
    } 
The same code used in the below sample and it can be download in the following link. 
Let us know whether the given information is helpful or not.  
  
Regards, 
Bharathiraja. 


Madhu Ganesh
Replied On September 10, 2020 01:27 PM UTC

I would like to have access to the project code (the complete project) as I am facing the same problem. When I click on the provided link, it says the download is not associated with my account so I do not have permission to download the project.

Thank you,
Madhu

Sridevi Sivakumar [Syncfusion]
Replied On September 11, 2020 07:48 AM UTC

  


Madhu Ganesh
Replied On September 11, 2020 09:27 PM UTC

Thank you for the sample project. Is the following still true?

Currently. there is no direct way to disable the scrolling when editing the image. 

As I am facing the same problem when I try to rearrange text boxes on an image on SfImageEditor, is there a way to disable the scrolling when editing the image?

Ramya Soundar Rajan [Syncfusion]
Replied On September 14, 2020 12:39 PM UTC

Hi Madhu Ganesh,  
  
Query: Is the following still true? - Currently. there is no direct way to disable the scrolling when editing the image.  
  
Yes. Still, we are using the already provided workaround (Handling the scroll mode) to achieve this requirement.   
  
We would like to let you know that parent ScrollView gets scrolled when editing the child element (drawing the path and dragging the text on image) and that is the default behaviour of ScrollView.  
  
Even validated with the framework element, subsequent touch events from being eaten by the ScrollView. There is a framework level limitation. So, please follow-up the provided workaround.  
  
Regards, 
Ramya S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon