Header and Footer support in .NET MAUI ComboBox (SfComboBox)

24 Apr 20256 minutes to read

You can provide header and footer views in the dropdown in SfComboBox by enabling the ShowDropDownHeaderView and the ShowDropDownFooterView properties.

Header content

You can provide content for header at the top of the ComboBox’s dropdown. The DropDownHeaderView property is used to set the content of the header. The height of the header in the SfComboBox can be adjusted using the DropDownHeaderViewHeight property.

<StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30">
        <editors:SfComboBox x:Name="comboBox" IsEditable="true" DisplayMemberPath="Name" ItemsSource="{Binding SocialMedias}" IsFilteringEnabled="true" TextMemberPath="Name" ShowDropdownHeaderView="True" DropdownHeaderViewHeight = "50">
            <editors:SfComboBox.DropdownHeaderView>
                <StackLayout BackgroundColor="#f0f0f0" >
                    <Label  x:Name="label2" Text="Header View" FontSize="20" VerticalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#006bcd" />
                </StackLayout>
            </editors:SfComboBox.DropdownHeaderView>        
        </editors:SfComboBox>
    </StackLayout>
StackLayout layout = new StackLayout()
    {
        VerticalOptions = LayoutOptions.Start,
        HorizontalOptions = LayoutOptions.Start,
        Padding = new Thickness(30)
    };
    SfComboBox comboBox = new SfComboBox()
    {
        ShowDropdownHeaderView = true,
        ItemsSource = socialMediaViewModel.SocialMedias,
        IsEditable = true,
        DisplayMemberPath = "Name",
        TextMemberPath = "Name",
        IsFilteringEnabled = true,
        DropdownHeaderViewHeight = 50
    };

    StackLayout customHeaderView = new StackLayout();
    Label label2 = new Label()
    {
        FontSize = 20,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center,
        HorizontalOptions = LayoutOptions.Center,
        Text = "Header View",
        VerticalOptions = LayoutOptions.Center,
        TextColor = Colors.FromHex("#006bcd")
    };

    customHeaderView.Children.Add(label2);
    comboBox.DropdownHeaderView = customHeaderView;
    layout.Children.Add(comboBox);
    this.Content = layout;

Header Image

Footer content

You can provide content for footer at the bottom of the ComboBox’s dropdown. The DropDownFooterView property is used to set the content for footer. The height of the footer in the SfComboBox can be adjusted using the DropDownFooterViewHeight property.

The following code example shows how to set footer content in SfComboBox.

<StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30">
        <editors:SfComboBox ItemsSource="{Binding SocialMedias}" DisplayMemberPath="Name" x:Name="comboBox" IsEditable="true" IsFilteringEnabled="true"  DropdownFooterViewHeight = "50">
            <editors:SfComboBox.DropdownFooterView>
                <StackLayout BackgroundColor="#f0f0f0" >
                    <Label Text="Add New" BackgroundColor="#f0f0f0" TextColor="#006bcd" VerticalTextAlignment="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" FontSize="20"/>
                </StackLayout>
            </editors:SfComboBox.DropdownFooterView>
        </editors:SfComboBox>
    </StackLayout>
StackLayout layout = new StackLayout()
    {
        VerticalOptions = LayoutOptions.Start,
        HorizontalOptions = LayoutOptions.Start,
        Padding = new Thickness(30)
    };
    SfComboBox comboBox = new SfComboBox()
     {
        ShowDropdownFooterView = true,
        ItemsSource = socialMediaViewModel.SocialMedias,
        IsEditable = true,
        DisplayMemberPath = "Name",
        TextMemberPath = "Name",
        IsFilteringEnabled = true,
        DropdownFooterViewHeight = 50
    };

    StackLayout customFooterView = new StackLayout();
    Label label = new Label() 
    { 
        Text = "Footer View", 
        BackgroundColor = Colors.FromHex("#f0f0f0"), 
        TextColor = Colors.FromHex("#006bcd"), 
        VerticalOptions = LayoutOptions.Center, 
        VerticalTextAlignment = TextAlignment.Center, 
        HorizontalTextAlignment = TextAlignment.Center, 
        FontSize = 20 
    };
    customFooterView.Children.Add(label);
    comboBox.DropDownFooterView = customFooterView;
    layout.Children.Add(comboBox);
    Content = layout;

Footer Image