MVVM Support in DevExpress Group Chips for .NET MAUI

• Nov 19, 2023
• 2 minutes to read

This topic lists different APIs that allow you to implement the MVVM (Model-View-ViewModel) design pattern in your app with chips (Chip) and chip groups (InputChipGroup, ChoiceChipGroup, and FilterChipGroup).

Bind to a Collection Chip Group Items

You can generate a set of chips from a collection of objects from your View Model. To do this, assign the ViewModel object to the BindingContext. Bind a chip group’s ItemsSource property to the ViewModel property that contains a collection of chip values.

The following example uses chips to show clothing sizes:

View Example

XAML

<dxe:ChoiceChipGroup ItemsSource="{Binding Sizes}" 
                     SelectedItem="{Binding SelectedSize}".../>

C#

public SuperHeroTShirtView() {
    InitializeComponent();
    BindingContext = VM = new SuperHeroTShirtViewModel();
}
public class SuperHeroTShirtViewModel : NotificationObject {
    public IList<string> Sizes { get; }
    public string SelectedSize { get => this.selectedSize; set => SetProperty(ref this.selectedSize, value); }

    public SuperHeroTShirtViewModel() {
        Sizes = new List<string>() { "S","M","L","XL","XXL","XXXL" };
        SelectedSize = Sizes[2];
        //...
    }
}

If the ItemsSource contains complex objects, use DisplayMember and IconMember properties to specify which properties contain display text and icons for chips.

Specify Selected Chips

You can specify an item or items that appear selected in the group. To do so, use the following properties:

• ChoiceChipGroup.SelectedItem

• FilterChipGroup.SelectedItems

Commands

Commands allow you to define actions in a View Model and then bind to them from a View. The following commands available for chips:

Chip.TapCommand | ChipGroup.ChipTapCommand

This command is executed when a user taps a chip. Alternatively, you can handle the Chip.Tap or ChipGroup.ChipTap event.

Chip.DoubleTapCommand | ChipGroup.ChipDoubleTapCommand

This command is executed when a user double-taps a chip. Alternatively, you can handle the Chip.DoubleTap or ChipGroup.ChipDoubleTap event.

Chip.LongPressCommand | ChipGroup.ChipLongPressCommand

This command is executed when a user taps and holds a chip. Alternatively, you can handle the Chip.LongPress or ChipGroup.ChipLongPress event.

Chip.RemoveIconClickedCommand | ChipGroup.ChipRemoveIconClickedCommand

This command is executed when a user clicks the remove icon in a chip. Alternatively, you can handle the Chip.RemoveIconClicked or ChipGroup.ChipRemoveIconClicked event.

If you generate chips based on data objects in the ItemsSource collection, the default parameter passed to a command is the corresponding data object. If you create chips, the default parameter is the chip’s BindingContext property value.

For more information about usage of commands in .NET MAUI apps, refer to the following page: Commanding.