How to display images from datatable

Question

Hello friends.Currently I have 1 image from datatableeg: datatable.Rows[0][0]I see this sample code, but I don't know how to apply in my case.Assembly assembly = typeof(ImageModel).GetTypeInfo().Assembly;Image = ImageSource.FromResource("ImageEditor_Sample.Image.png", assembly);--------------------------------------------------- ------The code I tried, it shows the image to the SfImageEditor but it doesn't work properly when drawing and moving the text.ImageSource txt_image;

txt_image  = byteArrayToImage((byte[])  datatable.Rows[0][0]);SfImageEditor.Source =

txt_image

;---------------------------------------- public ImageSource byteArrayToImage(byte[] byteArrayIn)        {            MemoryStream ms = new MemoryStream(byteArrayIn);            ImageSource returnImage = ImageSource.FromStream(() => new MemoryStream(byteArrayIn));            return returnImage;        }==>

The code I tried, it shows the image to the SfImageEditor but it doesn't work properly when drawing and moving the text.

Hope to receive your help.Thank you very much.

Sridevi Sivakumar · Accepted Answer

Hi Huy Nguyen Xuan,We have checked the reported problem and it can be reproduced our side. This problem is due to the touch actions in image editor is restricted by the scroll viewer. You can prevent the scrolling by disabling the scroll in a custom renderer for each platform.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().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 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. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_Sample2035531523In 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.Regards,Sridevi S.

Eswaran Thirugnanasambandam · Answer

Hi Huy Nguyen Xuan, 
 
Thanks for contacting Syncfusion support. 
 
We tested the SfImageEditor control by loading an image from the byte[] array, but we were unable to reproduce the issue "SfImageEditor but it doesn't work properly while drawing and dragging the text" on our end. 
 
We have prepared a sample based on your requirements, in which we have loaded an image from a byte[] array. We have also included a video to demonstrate that drawing and moving text in SfImageEditor works fine when loading a image from byte[] array. Please download the sample and video from the link below. 
 
Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IE_Demo1877619774  
 
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GSIESample-280602370  
 
Please check the sample and contact us if you have any questions. If you continue to have issues, please contact us by altering the provided example to fit your situation and share the issue reproducing video, this will allow us to assist you with a better solution as soon as possible. 
 
Regards, 
Eswaran

Huy Nguyen Xuan · Answer

Thank you for the great support.I rely on your donation project.I found out that the main reason is because I use it"using Rg.Plugins.Popup.Services;"==> If I open the form this way, there will be problems. private async void Button_Clicked(object sender, EventArgs e) { var page = new Froms_image(); await PopupNavigation.Instance.PushAsync(page); }Thank you.Control SfImageEditor it's awesome.My problem has been solved.-------------------------------------------------------------------This XAML will result in an error

Eswaran Thirugnanasambandam · Answer

Hi Huy Nguyen Xuan, 
 
Thanks for your update. 
 
Query 1: How to display images from datatable 
 
We are glad to hear that given suggestion works at your end. 
 
Query 2: XAML will result in an error 
 
By creating a simple sample, we checked the XAML code snippet, and the image editor loads correctly without any issues. Please get the sample from the below link. 
 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PopupDemo-1662604549  
 
Please check the sample and let us know if you have any concerns. If you still face any problem, can you revert us by modifying the attached sample based on your scenario, this will help us to provide you a better solution at the earliest. 
 
Regards,  
Eswaran

Huy Nguyen Xuan · Answer

Thank you.I tried your project. (visual studio 2019)It still doesn't draw, it just dot.Attached video.Currently I no longer need to use Rg.Plugins.Popup. I switched to opening the normal Form.So it's okay if you don't need to support this theme anymore.Attachment: demo_34f14409.rar