How to add custom text editor in Xamarin.Forms DataForm?
Xamarin DataForm allows you to add custom editor by overriding the DataFormEditor class which is used to add custom view.
This article explains adding custom text editor in DataForm.
Company.cs:
public class Company
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Name should not be empty")]
public string Name { get; set; }
public string Address { get; set; }
}
By passing custom view in DataFormEditor class, you can add the custom editor in data form. You can refer to the DataForm user guide documentation for creating new custom editor:
Here, Entry is loaded for custom entry editor.
public class CustomEntry : Entry
{
public CustomEntry()
{
}
}
The custom view (Entry) property settings, commit, and data validation can be handled by overriding required methods in the DataFormEditor class.
Manually commit the custom data form item editor value by using the OnCommitValue override method of the DataFormEditor class on the custom editor TextChanged event which is used to update custom editor value in the DataObject property of DataForm.
Manually validate the custom editor value by using the OnValidateValue override method of the DataFormEditor class on the custom editor Unfocused event which is used to validate custom editor value in DataForm.
public class CustomEntryEditor : DataFormEditor<CustomEntry>
{
public CustomEntryEditor(SfDataForm dataForm) : base(dataForm)
{
}
protected override CustomEntry OnCreateEditorView()
{
return new CustomEntry();
}
protected override void OnInitializeView(DataFormItem dataFormItem, CustomEntry view)
{
view.BackgroundColor = Color.Pink;
view.Placeholder = "Enter value";
view.PlaceholderColor = Color.DarkBlue;
view.Text = "Syncfusion";
}
protected override void OnWireEvents(CustomEntry view)
{
view.TextChanged += View_TextChanged;
view.Focused += View_Focused;
view.Unfocused += View_Unfocused;
}
private void View_Focused(object sender, FocusEventArgs e)
{
var view = (sender as CustomEntry);
view.TextColor = Color.Green;
}
protected override bool OnValidateValue(CustomEntry view)
{
return this.DataForm.Validate("Name");
}
private void View_Unfocused(object sender, FocusEventArgs e)
{
var view = (sender as CustomEntry);
view.TextColor = Color.Red;
OnValidateValue(sender as CustomEntry);
}
private void View_TextChanged(object sender, TextChangedEventArgs e)
{
OnCommitValue(sender as CustomEntry);
}
protected override void OnCommitValue(CustomEntry view)
{
var dataFormItemView = view.Parent as DataFormItemView;
var textValue = view.Text;
this.DataForm.ItemManager.SetValue(dataFormItemView.DataFormItem, view.Text);
}
protected override void OnUnWireEvents(CustomEntry view)
{
view.TextChanged -= View_TextChanged;
view.Focused -= View_Focused;
view.Unfocused -= View_Unfocused;
}
}
Refer to the following code example for binding the DataObject and adding custom editor as TextBoxEditor editor using the RegisterEditor method in DataForm.
dataForm.DataObject = new Company();
dataForm.ValidationMode = ValidationMode.LostFocus;
dataForm.RegisterEditor("TextBoxEditor", new CustomEntryEditor(dataForm));
dataForm.RegisterEditor("Name", "TextBoxEditor");
dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm);
You can also customize or change the default appearance of loaded custom editor view in custom renderer platform using the OnElementChanged override method of EntryRenderer.
This article explains pointer over customization for text editor by overriding the default style of TextBox and custom renderer in DataForm for Xamarin.Forms.UWP platform alone.
Here, TextBox is loaded as native control for custom entry editor in Xamarin.Forms.UWP platform. By overriding the default style of TextBox, the control can customize the pointer over text color and border color for text editor.
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace TextBoxCustomization.UWP
{
public class CustomEntryRenderer : EntryRenderer
{
internal TextBox NativeTextBox { get; set; }
internal string PlaceholderText { get; set; }
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
{
base.OnElementChanged(e);
if (Control != null && Element is CustomEntry)
{
PlaceholderText = Control.PlaceholderText;
Control.Foreground = new SolidColorBrush(Colors.White);
Control.TextWrapping = TextWrapping.Wrap;
Control.FontSize = 12;
Control.Style = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["CustomTextBoxStyle"];
Control.PointerEntered += Control_PointerEntered;
NativeTextBox = Control as TextBox;
this.Control.PointerExited += Control_PointerExited;
NativeTextBox.GotFocus += NativeTextBox_GotFocus;
NativeTextBox.LostFocus += NativeTextBox_LostFocus;
var color = Element.PlaceholderColor;
var windowsColor = Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
windowsColor = Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
NativeTextBox.BorderBrush = new SolidColorBrush(windowsColor);
if (!string.IsNullOrEmpty(NativeTextBox.Text))
NativeTextBox.Header = NativeTextBox.PlaceholderText;
}
}
}
}
By using the GotFocus, LostFocus, PointerEntered, and PointerExited events of the TextBox control, customized the PlaceholderText and border color on pointer over.
private void Control_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
this.Control.Foreground = new SolidColorBrush(Colors.White);
}
private void Control_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
this.Control.Foreground = new SolidColorBrush(Colors.Yellow);
}
private void NativeTextBox_LostFocus(object sender, RoutedEventArgs e)
{
NativeTextBox.PlaceholderText = PlaceholderText;
if (string.IsNullOrEmpty(NativeTextBox.Text))
NativeTextBox.Header = string.Empty;
}
private void NativeTextBox_GotFocus(object sender, RoutedEventArgs e)
{
var color = Element.PlaceholderColor;
var windowsColor = Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
NativeTextBox.Header = new TextBlock() { Text = Element.Placeholder, Foreground = new SolidColorBrush(windowsColor) };
NativeTextBox.PlaceholderText = string.Empty;
if (string.IsNullOrEmpty(NativeTextBox.Text))
NativeTextBox.Text = string.Empty;
}
To download the sample click DataFormCustomTextEditor.
Conclusion
I hope you enjoyed learning about how to add custom text editor in Xamarin.Forms DataForm and customize the default appearance in platform renderer.
You can refer to our Xamarin.Forms DataForm feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms DataForms documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
