How to Display Only ShowMoreTemplate and Hide TokenTemplate in ComboBox for .NET MAUI

Version	Product	Author
6.7.0	Telerik UI for .NET MAUI ComboBox	Dobrinka Yordanova

Description

I want to customize the ComboBox control in .NET MAUI to display only the ShowMoreTemplate and hide the TokenTemplate.

Solution

To achieve the desired scenario of hiding the tokens and only displaying the ShowMoreTemplate in the ComboBox control, you can follow these steps:

1. Create a custom control.

2. Add a label to display the selected items count.

3. Update the label's text inside the SelectionChanged event.

public class MyComboBox : RadComboBox
{
    private ContentView selectionToken;
    private RadWrapLayout layout;
    public MyComboBox()
    {
        this.layout = this.Content as RadWrapLayout;
        this.SelectionChanged += MyComboBox_SelectionChanged;
    }

    private void MyComboBox_SelectionChanged(object? sender, ComboBoxSelectionChangedEventArgs e)
    {
        if (this.SelectedItems.Count > 0)
        {
            if (this.layout.Contains(this.selectionToken))
            {
                return;
            }

            if (this.selectionToken == null)
            {
                this.selectionToken = new ContentView();
                var label = new Label(); //create a new label for every newly added token
                label.SetBinding(Label.TextProperty, new Binding()
                {
                    Source = this.SelectedItems,
                    Path = "Count"
                });
                this.selectionToken.Content = label; //set label text to selected items' count
            }

            this.layout.Insert(0, this.selectionToken);
        }
        else
        {
            if (layout.Contains(this.selectionToken))
            {
                layout.Remove(this.selectionToken);
            }
        }
    }
}

4. Override the default TokenTemplate to hide the tokens.

 <local:MyComboBox 
    x:Name="comboBox"
    ItemsSource="{Binding Items}"
    SelectionMode="Multiple"
    IsEditable="True"
    DisplayMemberPath="Name"
    SelectedItems="{Binding SelectedItems}"
    AutomationId="comboSelectedItemMultiple"
    WidthRequest="200">
                <local:MyComboBox.TokenTemplate>
        <DataTemplate>
            <!-- hide the token view -->
            <ContentView IsVisible="False">
            </ContentView>
        </DataTemplate>
    </local:MyComboBox.TokenTemplate>
</local:MyComboBox>

You can use this custom control in your .NET MAUI application to achieve the desired behavior.