1. Home
  2. Forum
  3. Xamarin.Forms
  4. How can I prevent scrolling when focus is on SFImageEditor?

How can I prevent scrolling when focus is on SFImageEditor?

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!

9 Replies
BK Bharathiraja K Syncfusion Team 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. 


WW white wabbit June 19, 2019 07:23 AM UTC

How did u do it?

RA Rachel A Syncfusion Team 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.  


MI Miike January 3, 2020 07:47 PM UTC

Hi, can you make this code example public?

BK Bharathiraja K Syncfusion Team 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. 


MG Madhu Ganesh 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

SS Sridevi Sivakumar Syncfusion Team September 11, 2020 07:48 AM UTC

  


MG Madhu Ganesh 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?

RS Ramya Soundar Rajan Syncfusion Team 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 


Loader.
Up arrow icon