|
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 |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
