Our newest update - v20.1 - ships with a number of new Xamarin Forms related features and
products.
If you are new to our Xamarin Forms product line and would like to review our What's New
webpage, please point your browser to: devexpress.com/new to learn more.
In this video, I'll describe our new Xamarin Forms Data Form component and our Data Editors
library and demonstrate how you can leverage the combined capabilities of these new Xamarin
controls to deliver intuitive user experiences for your mobile world.
Before I get started, let me jump to our What's New page and review some basics about our
Data Form and Data Editors library.
Once I have the What's New page loaded up, I'll click Xamarin to drill down into Xamarin-specific
features in our v20.1 update.
I'll scroll past new chart and grid related features - I'll cover those in a later video
- and stop here at the Data Form.
As you can see, our Data Form control allows you to generate Xamarin data edit forms for
any object.
I'll show you just how this works in a minute.
If I keep scrolling, you'll notice that this release includes a feature-complete Text Editor
- a multi-purpose data editor with built-in validation, mask, and error indication support.
We also ship a new Password Editor, a Multi-line Text Editor and a Combo Box with lots of customization
options including configurable border colors and drop down/up icons.
Ok - with that brief overview, let me go to Visual Studio and begin this tutorial.
The purpose of this overview will be to demonstrate how to generate and customize an edit form
for any data object via our new Data Form component for Xamarin Forms.
My app will be used to display employee information so I need to create an EmployeeInfo class
that defines the data I want to display and edit.
Pretty straightforward.
Once I've got my class, my next step is to add a DataFormView instance to the application
page and set the view's DataObject property to the EmployeeInfo object.
Again, straightforward.
Let me run this app and see what I've produced so far.
As you can see, the DevExpress DataFormView automatically generated the data editors used
within this app.
These data editors were auto-selected based on the property types of the associated object.
For instance, DataFormView used our Xamarin Text Editor for all string type properties
such as First Name.
Since Department includes a list of predefined values, the DataFormView automatically used
our Xamarin Combo Box for the Department field.
Finally, DataFormView used a data picker for the app's Hire Date field.
Very cool.
Oh - a quick note -Our Xamarin data editors were implemented using Material Design guidelines.
So my basic Xamarin data entry form was generated for me automatically.
It's time for me to customize the data entry form.
I'll switch back to Visual Studio to demonstrate.
To customize behavior, I will apply special attributes to the properties of my EmployeeInfo
class.
As you can see, each attribute includes properties to control data editor-specific settings.
For example, I can set editor placeholders and I can use a Masked Editor with the desired
input mask for Telephone.
I can also use a numeric keyboard for the Phone and Zipcode properties.
Finally, I can assign the Multiline Editor to the Notes property.
I also want to associate a photograph with each employee.
To display an employee photo, I'll use a custom editor - an Image inside of Frame.
In XAML markup, I'll add DataFormCustomItem to the DataFormView.Items collection, set
its FieldName to PhotoPath, and specify the editor view.
To improve readability, I'll now organize my data editors into individual groups.
To incorporate groups into my app, I'll add the DataFormDisplayOptions attribute before
each EmployeeInfo class property.
I'll then specify the GroupName parameter.
Ok, time to run the app and see where I am so far.
As you can see, I now have an Image editor at the top of my form and all my Xamarin Data
Editors are grouped by individual categories.
The Phone field includes an input mask and will display numeric keyboard when a user
begins input.
It's now time to customize my form's appearance.
I want to change appearance for editors, data group headers, and my app's row separators.
All customization related settings for the data form are split into two groups.
The first group affects editors and the other affects a group or data form itself.
The first group of settings is managed by resources - predefined values associated with
unique string keys and stored in the app resource dictionary.
To change the appearance of all editors that the form displays, I override these resources.
For example, to hide box borders, I set the DXTextEditBaseBorderThickness and DXTextEditBaseFocusedBorderThickness
resource values to 0.
Like our other Xamarin.Forms Ui controls Data Form ships with both Light and Dark themes.
The default values associated with resources are based on the currently applied theme.
Data forms properties control the second group of settings.
For example, I use the ContentPadding property to specify both editor and separator padding
within a group.
I use the RowSeparatorColor property to change separator color.
Before I wrap up, let me add a validation rule to verify email formatting during data
entry.
I've already added System.ComponentModel.Annotations NuGet package to my solution.
To apply the validation rule, I'll use the ReqularExpression attribute and then select
the appropriate validation mode when my editor loses focus.
Our DataFormView supports multiple commit modes.
I'm going to enable LostFocus mode and commit values when the editor loses focus - assuming
of course that the value first passes validation.
To actually populate this data form with data, I'll bind to an instance of EmployeeInfo.
Let me run the application one last time.
As you can see, all my editors are now customized.
If we try to enter an invalid email, the data form now displays an error icon.
If a value passes validation, it is automatically committed to the data object.
I hope you've enjoyed this brief tutorial on our new Xamarin.Forms Data Form component.
The DevExpress Xamarin.Forms component library ships as part of our Universal Subscription.
For more information on this and other DevExpress Xamarin.Forms controls, please visit devexpress.com/Xamarin.
Thank you for watching and thanks for considering DevExpress for your software development needs.