Skip to main content

Add a Custom Editor

To create a custom editor on a data form, add the DataFormCustomItem item to the data form’s Items collection and set the EditorView property to a View class descendant that specifies a Xamarin.Forms view or layout.

The binding context of the data form’s custom editor is an object assigned to the DataFormView.DataObject property. You can bind a custom editor view’s property to any property of this object.

Note

DataFormCustomItem.EditorView is a content property. You can skip property tags in the markup.

In this example, the data form is associated with an EmployeeInfo object. The Image view is added to the form as a custom editor and bound to the EmployeeInfo.PhotoPath property to display an employee photo.

Data Form

DataFormCustomItem - Markup

 

<dxdf:DataFormView>
    <dxdf:DataFormCustomItem FieldName="PhotoPath">
        <StackLayout Padding="16">
            <Frame Padding="0"
                   HorizontalOptions="Center"
                   BorderColor="#dadada"
                   WidthRequest="100"
                   HeightRequest="100"
                   CornerRadius="50"
                   IsClippedToBounds="True">
                <Image Source="{Binding PhotoPath}"
                       BackgroundColor="Gray"
                       Aspect="AspectFill"/>
            </Frame>
        </StackLayout>
    </dxdf:DataFormCustomItem>
</dxdf:DataFormView>

View Example