Merge pull request #1 from SyncfusionExamples/Resolved-Sample-Issue

Added the Missed Model Class into this Sample.

Author: naveenkumar-sanjeevirayan

CustomEditor/CustomDataEditor.cs

@@ -29,7 +29,7 @@ public View CreateEditorView(DataFormItem dataFormItem)
                 var view = new Image()
                 {
                     Source=(dataFormItem.BindingContext as DataFormViewModel).ContactFormModel.ProfileImage,
-                    HorizontalOptions=LayoutOptions.Start,
+                    HorizontalOptions=LayoutOptions.Center,
                     HeightRequest=80,
                     WidthRequest=80
                 };

CustomEditor/Model/ContactFormModel.cs

@@ -0,0 +1,69 @@
+#region Copyright Syncfusion Inc. 2001-2023.
+// Copyright Syncfusion Inc. 2001-2023. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+namespace CustomEditor
+{
+    using Syncfusion.Maui.DataForm;
+    using System.ComponentModel.DataAnnotations;
+
+    /// <summary>
+    /// Represents the model class for contact form.
+    /// </summary>
+    public class ContactFormModel
+    {
+        public ContactFormModel()
+        {
+            this.ProfileImage = "people_circle16.png";
+            this.Name = string.Empty;
+            this.LastName = string.Empty;
+            this.Address = string.Empty;
+            this.City = string.Empty;
+            this.State = string.Empty;
+            this.Email = string.Empty;
+            this.Mobile = string.Empty;
+            this.Landline = string.Empty;
+            this.ZipCode = string.Empty;
+        }
+
+        [DataFormDisplayOptions(ColumnSpan = 2, ShowLabel = false)]
+        public string ProfileImage { get; set; }
+
+        [Display(ShortName = "First name", GroupName ="Name")]
+        [Required(ErrorMessage = "Name should not be empty")]
+        public string Name { get; set; }
+
+        [Display(ShortName = "Last name", GroupName ="Name")]
+        public string LastName { get; set; }
+
+        [Display(GroupName ="Mobile")]
+        [DataType(DataType.PhoneNumber)]
+        [Required]
+        [RegularExpression(@"^\(\d{3}\) \d{3}-\d{4}$", ErrorMessage = "Invalid phone number")]
+        public string Mobile { get; set; }
+
+        [Display(GroupName = "Mobile")]
+        [DataType(DataType.PhoneNumber)]
+        public string Landline { get; set; }
+
+        [Display(GroupName = "Address")]
+        [DataFormDisplayOptions(ColumnSpan = 2)]
+        public string Address { get; set; }
+
+        [Display(GroupName = "Address")]
+        [DataFormDisplayOptions(ColumnSpan = 2)]
+        public string City { get; set; }
+
+        [Display(GroupName = "Address")]
+        public string State { get; set; }
+
+        [Display(ShortName = "Zip code", GroupName = "Address")]
+        public string ZipCode { get; set; }
+
+        public string Email { get; set; }
+
+    }
+}

README.md

@@ -1,2 +1,12 @@
-# How-to-add-an-image-to-the-.NET-MAUI-DataForm-Editors
-The sample demonstrates how to add an image and create custom editors in the .NET MAUI DataForm editors.
+# How-to-add-Custom-Editor-to-the-.NET-MAUI-DataForm-Control
+A quick-start project that guides you in integrating a DataForm control with a Custom Editor in a .NET MAUI application by adding the Syncfusion MAUI DataForm package from NuGet. This project includes code on how to add an image and register a custom editor for the field name.
+
+Refer to the following documentation for the Syncfusion .NET MAUI DataForm control: https://help.syncfusion.com/maui/dataform/editors#custom-editor
+
+Check out this GitHub example for the Syncfusion .NET MAUI DataForm control: https://github.com/syncfusion/maui-demos/blob/master/MAUI/DataForm
+
+# Project prerequisites
+Make sure that you have the compatible versions of Visual Studio 2022 with the Dot NET MAUI workload and .NET Core SDK 7.0 or later version in your machine before starting to work on this project.
+
+# How to run this application
+To run this application, you need to first clone the  repository How-to-add-an-image-to-the-.NET-MAUI-DataForm-Editors and then open it in Visual Studio 2022. Now, simply build and run your project to view the output.