Show Built-In Forms to Display, Create, and Edit Items

• Sep 18, 2024
• 3 minutes to read

CollectionView supports built-in forms that allow users to create, view, and edit records. This article describes how you can invoke these forms.

CollectionView uses DataFormView to generate data editors for these built-in forms. If you need to associate specific editor types with item fields/properties, refer to the following help topic: Data Form - Editors.

Show Read-Only Forms (View Item Data)

Call the DXCollectionView.ShowDetailForm method or use the DXCollectionViewCommands.ShowDetailForm property to show a read-only form with item data:

The following code invokes the default View form for a tapped CollectionView item:

XAML

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<dxcv:DXCollectionView ItemsSource="{Binding Data}" SelectionMode="None" 
                       TapCommand="{Binding Source={RelativeSource Mode=Self}, Path=Commands.ShowDetailForm}">
                       <!--...-->
</dxcv:DXCollectionView>

Show implementation details

C#

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace CollectionViewExample {
   public class Contact {
       public string Name { get; set; }
       public Contact(string name, string phone) {
           Name = name;
           Phone = phone;
       }
       public Contact() {
           Name = "";
           Phone = "";
       }
       public string Phone { get; set; }
   }
   public class ViewModel : INotifyPropertyChanged {
       public ObservableCollection<Contact> Data { get; }
       public ViewModel() {
           Data = new ObservableCollection<Contact>() {
               new Contact("Nancy Davolio", "[phone]"),
               new Contact("Andrew Fuller", "[phone]"),
               new Contact("Janet Leverling", "[phone]"),
               new Contact("Margaret Peacock", "[phone]"),
               new Contact("Steven Buchanan", "(71) 555-4848"),
               new Contact("Michael Suyama", "(71) 555-7773"),
               new Contact("Robert King", "(71) 555-5598"),
               new Contact("Laura Callahan", "[phone]"),
               new Contact("Anne Dodsworth", "(71) 555-4444"),
           };
       }
       public event PropertyChangedEventHandler PropertyChanged;
       private void OnPropertyChanged([CallerMemberName] string propertyName = "") {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
       }
   }
}

Show Edit Forms

Call the DXCollectionView.ShowDetailEditForm method or use the DXCollectionViewCommands.ShowDetailEditForm command to invoke the Edit form.

The following example shows how to invoke the Edit form for the tapped item:

XAML

<dxcv:DXCollectionView ItemsSource="{Binding Data}" SelectionMode="None" 
                       TapCommand="{Binding Source={RelativeSource Mode=Self}, Path=Commands.ShowDetailEditForm}">
                       <!--...-->
</dxcv:DXCollectionView>

Show New Item Form

Call the DXCollectionView.ShowDetailNewItemForm method or use the DXCollectionViewCommands.ShowDetailNewItemForm command to invoke the Add new item form.

The following example shows how to invoke the default Add new item form dialog:

XAML

<Grid RowDefinitions="40,*">
    <Button Text="+" Grid.Row="0" Command="{Binding Source={Reference collectionView}, Path=Commands.ShowDetailNewItemForm}"/>
    <dxcv:DXCollectionView x:Name="collectionView" 
                           Grid.Row="1"
                           ItemsSource="{Binding Data}">
        <!--...-->
    </dxcv:DXCollectionView>
</Grid>

Delete Items

Users can tap the Delete button in an edit form to remove the CollectionView item:

Call the DeleteItem method to remove the CollectionView item with the given item handle programmatically.If you implement a custom CRUD form, use the DetailFormViewModelBase.DeleteAsync method or use the DetailFormViewModelBase.DeleteCommand to delete the associated item.

Built-in Form Requirements

CollectionView invokes built-in forms if the following conditions are met:

• You reference the DevExpress.Maui.Editors package.
• The CollectionView.ItemsSource is not empty or it contains a strongly typed collection.
• The data source object class has a parameterless constructor.

• For correct navigation, your app should be a Shell app. Alternatively, you can invoke edit forms from a Navigation Page.

  C#

  MainPage = new NavigationPage(new MainPage());
  

If the CollectionView does not manage to automatically create a View Model for a data source object, a System.Exception occurs. Handle the CreateDetailFormViewModel event as described in the following section: Customize Form View Model and Created Data Object.

Customize Form View Model and Created Data Object

CollectionView creates its own view model for displayed forms. You can customize this model in the CreateDetailFormViewModel event handler.

DetailFormViewModel or DetailEditFormViewModel object to the e.Result property in the event handler. Assign a source item to be edited to the ViewModel’s Item property:

XAML

<dxcv:DXCollectionView CreateDetailFormViewModel="collectionView_CreateDetailFormViewModel">

C#

private void collectionView_CreateDetailFormViewModel(object sender, CreateDetailFormViewModelEventArgs e) {
    if (e.DetailFormType == DetailFormType.New) {
        var editItem = new Contact("Jane Doe", "[phone]");
        e.Result = new DetailEditFormViewModel(editItem, isNew: true, context: null);
    }
}