Unveiling the Cutting-Edge .NET MAUI Chips Control
Detailed Blog page Skeleton loader
Unveiling the Cutting-Edge .NET MAUI Chips Control

In Syncfusion’s Essential Studio 2023 Volume 2 release, we introduced a new button control called Chips in the .NET MAUI platform. This control is designed specifically for .NET MAUI applications, making it a perfect fit for developers building cross-platform mobile apps with .NET.

The .NET MAUI Chips control offers an intuitive and visually appealing way to present selectable items or tags. It enables you to arrange multiple chips in a layout and group them for seamless selection and interaction.

In this article, we will see the key features of the new .NET MAUI Chips control and the steps to getting started with it.

Key features

The .NET MAUI Chips control supports many user-friendly features. You can:

  • Choose from various layout options, such as stack and flex, to arrange the chips.
  • Convert text into compact chips, displaying information in a concise way.
  • Customize the appearance of the chips by adding a background image.
  • Easily modify the text color, background color, border color, border thickness, and selection color of the chips, ensuring a cohesive and visually appealing design.

This flexibility enables the creation of visually consistent and aesthetically pleasing chips.

Chip types

There are four types of chips available in the SfChipGroup: input, filter, choice, and action.

Input

Enter a piece of information in a compact form to convert text into chips. The input type of .NET MAUI Chips can be removed from a layout with the close icon. It also has an optional input view (an entry) to provide chip text when creating a new chip at runtime.

Input type chip
Input type chip

Filter

The filter type of .NET MAUI Chips provides a way to make multiple selections in a chip group. A selection indicator will appear when a chip is selected.

Filter type chip
Filter type chip

Choice

The choice type of .NET MAUI Chips provides a way to select a single option from several options.

Choice type chip
Choice type chip

Action

The action type of .NET MAUI Chips executes a command on tapping a chip. It returns the tapped chip or its data context as a command parameter.

Action type chip
Action type chip

Customization

The .NET MAUI Chips control lets you customize its background image, corner radius, border thickness, and color.

Background image                

You can easily customize the appearance of your chip with a background image to illustrate the chip text.

Customizing the background image in .NET MAUI Chips
Customizing the background image in .NET MAUI Chips

Corner radius

The .NET MAUI Chips control’s corner radii can easily be customized to create rounded edges.

Customizing the corner radius in .NET MAUI Chips
Customizing the corner radius in .NET MAUI Chips

Border color

You can apply a desired color as the border color of the .NET MAUI Chips control.

Customizing the border color of .NET MAUI Chips
Customizing the border color of .NET MAUI Chips

Border thickness

The border thickness of the chips can easily be customized to the desired value. You can also remove the border if it is not required.

Customizing the border thickness of .NET MAUI Chips
Customizing the border thickness of .NET MAUI Chips

Note: For more details, refer to the .NET MAUI Chips documentation.

Getting started with the .NET MAUI Chips control

We have seen the key features of the .NET MAUI Chips control. Let’s next learn how to integrate it into your .NET MAUI app and utilize its features.

Step 1: First, create a .NET MAUI application.

Step 2: The Syncfusion .NET MAUI controls are available on NuGet Gallery. To add the .NET MAUI Chips control to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Core and then install it.

Step 3: Register the handler for the Syncfusion core in the MauiProgram.cs file.

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace ChipSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
		.UseMauiApp<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
	           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});
		return builder. Build();
	 }
  }
}

Step 4: Add the Syncfusion.Maui.Core namespace in your XAML page.

xmlns:chip="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

Step 5: Initialize the Syncfusion .NET MAUI Chips control like in the following code example.

<chip:SfChip WidthRequest="100" Text="Chip" x:Name="chips" />

We’ll get the .NET MAUI Chips control like in the following image.

Integrating the Chips control into a .NET MAUI application
Integrating the Chips control into a .NET MAUI application

Step 6: Let’s initialize the ChipGroup to show multiple chips in a group view. Refer to the following code example.

xmlns:local="clr-namespace:ChipSample"
xmlns:chip="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"


<ContentPage.BindingContext>
 <local:ViewModel> </local:ViewModel>
</ContentPage.BindingContext>
<chip:SfChipGroup Margin="0,20,0,0" 
		  ItemsSource="{Binding Employees}" 
		  ChipPadding="8,8,0,0"  
	          DisplayMemberPath="Name"
                  ItemHeight="33"
		  ChipBackground="white"
		  ChipTextColor="Black"
		  HorizontalOptions="CenterAndExpand" 
		  VerticalOptions="Center">
</chip:SfChipGroup>

Step 7: To display the employees’ names in the chips group, add the ViewModel class and Person Model class for the ChipGroup.
ViewModel

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Person> employees;
    public ObservableCollection<Person> Employees
    {
        get { return employees; }
        set { Employees = value; OnPropertyChanged("Employees"); }
    }

    public ViewModel()
    {
        employees = new ObservableCollection<Person>();
        employees.Add(new Person() { Name = "John" });
        employees.Add(new Person() { Name = "James" });
        employees.Add(new Person() { Name = "Linda" });
        employees.Add(new Person() { Name = "Rose" });
        employees.Add(new Person() { Name = "Mark" });
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Model

public class Person
{
    public string Name
    {
        get;
        set;
    }
}

After executing these code examples, we’ll get output like in the following image.

Displaying multiple chips in a group using the .NET MAUI Chips control
Displaying multiple chips in a group using the .NET MAUI Chips control

GitHub reference

For more details, refer to the .NET MAUI Chips control GitHub demo.

Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion .NET MAUI Chips control rolled out in the 2023 Volume 2 release. With this control, enable users to select options with a visually appealing user interface and better user experience.

Our Release Notes and What’s New pages provide information about our other new controls and features from this release. Try them out and leave your feedback in the comments section below!

If you are not a Syncfusion customer, download a free trial of Essential Studio for .NET MAUI to start evaluating the suite immediately.

For questions, you can contact us through our support forumsupport portal, or feedback portal. We are always happy to help you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Be the first to get updates

Paul Anderson

Meet the Author

Paul Anderson

Paul Anderson is the Product Line Owner for .NET MAUI at Syncfusion. With over 11 years of experience as a .NET developer, Paul has deep expertise in Xamarin.Forms and the WinForms platform. Currently, he is leading the development of custom components for the .NET MAUI platform, focusing on enhancing cross-platform mobile and desktop app experiences. His work is pivotal in advancing .NET MAUI’s capabilities, driving innovation in UI controls and layout solutions.