Header and Footer in .NET MAUI ComboBox

You can add Header and Footer to the drop-down list of the .NET MAUI ComboBox control through the following properties:

• HeaderTemplate(DataTemplate)—Defines the template of the header that will be visualized in the drop down list.
• FooterTemplate(DataTemplate)—Defines the template of the footer that will be visualized in the drop down list.

It's not recommended to add controls in the Header and Footer which steal the focus (like Entry, editor, etc.) from the ComboBox control, as unexpected behavior may occur.

Example

1. Define the ComboBox in XAML:

• XAML

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                     DisplayMemberPath="Name"
                     IsEditable="True"
                     SearchMode="Contains"
                     SearchTextPath="Name"
                     Placeholder="Select city to visit"
                     SelectionMode="Multiple"
                     DropDownMaxHeight="300"
                     x:Name="comboBox"
                     AutomationId="comboBox">
    <telerik:RadComboBox.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightBlue">
                <Label Text="To Visit List!" 
                       FontSize="20"
                       TextColor="Black"
                       BackgroundColor="LightBlue"
                       VerticalOptions="Center" 
                       HorizontalOptions="Center"/>
            </StackLayout>
        </DataTemplate>
    </telerik:RadComboBox.HeaderTemplate>
    <telerik:RadComboBox.FooterTemplate>
        <DataTemplate>
            <StackLayout>
                <Button Text="Add Items" 
                        Clicked="Button_Clicked" 
                        BackgroundColor="LightBlue"/>
            </StackLayout>
        </DataTemplate>
    </telerik:RadComboBox.FooterTemplate>
</telerik:RadComboBox>

2. Add a sample business model:

• C#

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

3. Add the ViewModel used:

• C#

public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

This is how the Header and Footer Templates look on WinUI:

For the ComboBox Header and Footer example, go to the SDKBrowser Demo Application and navigate to ComboBox > Templates category.