1. Home
  2. Forum
  3. Xamarin.Forms
  4. Some strange behaviours trying to use image within SfDataForm control

Some strange behaviours trying to use image within SfDataForm control

Dear Xamarin support team,

In one of my pages, of the Xamarin.Forms app I'm currently working on, I'm using a SfDataForm control. For most of the ViewModel fields, the control is mapped to, it works like charm, but today I'm struggling with the following:

1. Today a new field has been added to the VM, namely a picture field. I would like for the user to pick a custom image from the photo gallery and display the selected photo. Because I received the selected photo as a stream, my first thought would be to make use of the Xamarin ImageSource type. The stream can easily read and rendered as a photo. When I add a new bindable property of type ImageSource to the VM, an unhandled exception occurs, saying a duplicated key. Changing the type ImageSource to for example int, no exception been thrown.

2. I'm also seen some strange behaviour, when trying to create a new custom dataform editor. My first initial thought was to create a panel (stacklayout / grid) with a image and a button. After the user tapt the button, a new form will be shown, from where the user can select a photo from the gallery. But when I try to create a new DataFormEditor of type Stacklayout / grid, a NullReferenceException occurred. When I change the type to for example Slider, Image or Button no exception occurs. So it seems the custom DataFormEditor can't handle containers


With kind regards,
Patrick Roos

3 Replies
JN Jayaleshwari N Syncfusion Team August 29, 2018 12:06 PM UTC

Hi Patrik,  
  
Regarding Duplicated Key while ImageSource property type in data form object:  
  
As of now, SfDataForm does not have direct support for image editor for the property type Image/ImageSource from DataObject, So, duplicate key error occurred while Image/ImageSource data type complex properties are retrieved in SfDataForm.  
  
However, your requirement for Image editor using ImageSource can be achieved using custom editor (Image) by using DataFormEditor class which is used to add own custom editor in SfDataForm.  
   
  
Note:  
  
In order to update the DataObject values when using custom editor, you should update and validate the  DataForm Item editor value manually by using OnCommitValue and OnValidateValue override method of DataFormEditor class on TextChanged event which is used to commit and validate the customized value in DataObject based on your requirement.      
   
Please refer below online user guide documentation for creating new custom editor n SfDataForm.  
   
Custom Editor:  
Code snippet:  
  
dataForm.DataObject = new ContactInfo();  
dataForm.RegisterEditor("image", new CustomImageEditor(dataForm));  
dataForm.RegisterEditor("SampleImage", "image");  
  
public class ContactInfo  
{   
      [Display(Name = "Image")]  
      public string SampleImage { get; set; }  
}  
  
public class CustomImageEditor : DataFormEditor<Image>  
{  
        public CustomImageEditor(SfDataForm dataForm) : base(dataForm)  
        {  
        }  
        protected override Image OnCreateEditorView()  
        {  
            return new Image();  
        }  
  
        protected override void OnInitializeView(DataFormItem dataFormItem, Image view)  
        {  
  
            if (Device.RuntimePlatform == Device.UWP)  
            {  
                Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;  
                view.Source = ImageSource.FromResource("DataFormSampleForms.flower.png", assembly);  
            }  
            else  
                view.Source = ImageSource.FromResource("DataFormSampleForms.flower.png");  
        }  
}  
  
  
Sample:  DataFormSampleForms 
 
Regarding Changing DataObject at run time:  
  
Currently we have support only for Loading Visual elements which is directly derived from View in DataFormEditor of SfDataForm. We have considered to provide support for Loading Visual elements which is dervied from Layout<View> also in DataFormEditor of SfDataForm. We will implement this feature in any of our upcoming volume release. We will let you know once the implementation has done.  
 
 
Regards, 
Jayaleshwari N 


PA pau July 3, 2019 03:43 AM UTC

I need Image support too.

SP Subburaj Pandian Veluchamy Syncfusion Team July 3, 2019 12:16 PM UTC

Hi Pau,   
   
As we mentioned, DataForm does not have direct support for image editor and your requirement can be achieved using custom editor (Image) by using DataFormEditor class which is used to add own custom editor in SfDataForm.   
    
You can refer our User Guide documentation for creating new custom editor,   
    
Sample link:  DataFormSampleForms  
  
We hope this helps. Please let us know, if you would require any further assistance. 
 
Regards,
Subburaj Pandian 


Loader.
Up arrow icon