New to Telerik UI for .NET MAUI? Start a free 30-day trial

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.

In this article