- Home
- Forum
- Xamarin.Forms
- How to display images from datatable
How to display images from datatable
Hello friends.
Currently I have 1 image from datatable
eg: 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.
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
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
x:Class="ImageEditor_Sample.BanPhimChupHinhSoDo" BackgroundColor="Transparent">
<ScrollView
HorizontalOptions="Center">
<AbsoluteLayout>
<StackLayout BackgroundColor="Blue" WidthRequest="500">
<Grid RowSpacing="2" ColumnSpacing="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" WidthRequest="500">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<syncfusion:SfImageEditor x:Name="editor" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan ="2" WidthRequest="500" HeightRequest="1000"/>
</Grid>
</StackLayout>
</AbsoluteLayout>
</ScrollView>
</pages:PopupPage>
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
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<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.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_Sample2035531523
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.
Regards,
Sridevi S.
- 5 Replies
- 3 Participants
- Marked answer
-
HN Huy Nguyen Xuan
- Aug 12, 2021 03:08 PM UTC
- Aug 18, 2021 01:53 PM UTC
