How to add custom picker editor in Xamarin.Forms DataForm?
DataForm allows you to add custom picker editor. This article explains how to add custom picker editor using SfPicker in DataForm.
Refer to the following code for DataForm model.
public class ContactInfo
{
public string BrandName { get; set; }
public String Color { get; set; }
}
You can create and add custom editor in DataForm by overriding the DataFormEditor class, where custom editor (CustomPickerEditor) is inherited through DataFormEditor<Button>. Refer to our online user guide documentation for creating new custom editor in DataForm.
public class CustomPickerEditor : DataFormEditor<Button>
{
public CustomPickerEditor(SfDataForm dataForm) : base(dataForm)
{
}
protected override Button OnCreateEditorView(DataFormItem dataFormItem)
{
return new Button();
}
protected override void OnInitializeView(DataFormItem dataFormItem, Button view)
{
view.Text = ((App.Current.MainPage as MainPage).Picker.ItemsSource).Cast<object>().FirstOrDefault().ToString();
view.BackgroundColor = Color.LightGray;
}
protected override void OnCommitValue(Button view)
{
view.Text = (App.Current.MainPage as MainPage).Picker.SelectedItem.ToString();
var dataFormItemView = view.Parent as DataFormItemView;
this.DataForm.ItemManager.SetValue(dataFormItemView.DataFormItem, view.Text);
}
protected override void OnWireEvents(Button view)
{
base.OnWireEvents(view);
view.Clicked += OnButtonClicked;
}
void OnButtonClicked(object sender, EventArgs e)
{
(App.Current.MainPage as MainPage).Picker.IsOpen = true;
}
protected override void OnUnWireEvents(Button view)
{
view.Clicked -= OnButtonClicked;
}
}
You need to manually commit and validate the custom DataFormItem editor value using the OnCommitValue and OnValidateValue override methods of DataFormEditor class on custom editor value or the focus changed event, which is used to update the custom editor value in respective property in DataObject based on DataForm commit mode set.
Refer to the following code example for binding DataObject and register the editor using RegisterEditor as CustomPickerEditor to make data form item as custom editor in DataForm.
dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("PickerEditor", new CustomPickerEditor(dataForm));
dataForm.RegisterEditor("Color", "PickerEditor");
You can add picker dialog using SfPicker in the Main page. The SfPicker control allows you bind a collection of data by setting the SfPicker.ItemsSource property. You can change the picker mode of SfPicker using the PickerMode property. Refer to this documentation to know more about creating and configuring the SfPicker control.
<picker:SfPicker x:Name="picker"
BackgroundColor="Silver"
ShowHeader="false"
ShowFooter="true"
PickerMode="Dialog"
PickerWidth="250"
PickerHeight="300"
ItemsSource="{Binding Colors}" >
<picker:SfPicker.FooterView>
<Button x:Name="footerView" Text="Close"/>
</picker:SfPicker.FooterView>
</picker:SfPicker>
Note: This sample supports only for Xamarin Forms Android and iOS platform.
Sample Demo: CustomPickerEditor
Conclusion
I hope you enjoyed learning about how to add a custom picker editor in Xamarin.Forms DataForm.
You can refer to our Xamarin.Forms DataForm feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
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!
