Class SfComboBox

Represents a SfComboBox control that is used to type a value or select an item from a list of predefined options. It offers many additional features, such as multiple selection with checkboxes, filtering, selection box customization and drop-down item customization.

Inheritance

System.Object

DropDownListBase

SfComboBox

Inherited Members

DropDownListBase.TextProperty

DropDownListBase.TextMemberPathProperty

DropDownListBase.TextBoxStyleProperty

DropDownListBase.PlaceholderTextProperty

DropDownListBase.PlaceholderForegroundProperty

DropDownListBase.HeaderProperty

DropDownListBase.HeaderTemplateProperty

DropDownListBase.DescriptionProperty

DropDownListBase.ItemsSourceProperty

DropDownListBase.ItemTemplateProperty

DropDownListBase.ItemTemplateSelectorProperty

DropDownListBase.DisplayMemberPathProperty

DropDownListBase.SelectedItemProperty

DropDownListBase.IsDropDownOpenProperty

DropDownListBase.MaxDropDownHeightProperty

DropDownListBase.TokenItemTemplateProperty

DropDownListBase.TokenItemTemplateSelectorProperty

DropDownListBase.TokenItemStyleProperty

DropDownListBase.TokenItemStyleSelectorProperty

DropDownListBase.SelectedValuePathProperty

DropDownListBase.SelectedValueProperty

DropDownListBase.LeadingViewProperty

DropDownListBase.TrailingViewProperty

DropDownListBase.HighlightedTextForegroundProperty

DropDownListBase.HighlightedTextFontWeightProperty

DropDownListBase.HighlightedTextFontStyleProperty

DropDownListBase.HighlightedTextFontSizeProperty

DropDownListBase.OnKeyUp(KeyRoutedEventArgs)

DropDownListBase.Text

DropDownListBase.TextMemberPath

DropDownListBase.TextBoxStyle

DropDownListBase.PlaceholderText

DropDownListBase.PlaceholderForeground

DropDownListBase.Header

DropDownListBase.HeaderTemplate

DropDownListBase.Description

DropDownListBase.ItemsSource

DropDownListBase.ItemTemplate

DropDownListBase.ItemTemplateSelector

DropDownListBase.DisplayMemberPath

DropDownListBase.SelectedItem

DropDownListBase.SelectedItems

DropDownListBase.GroupStyle

DropDownListBase.IsDropDownOpen

DropDownListBase.MaxDropDownHeight

DropDownListBase.TokenItemTemplate

DropDownListBase.TokenItemTemplateSelector

DropDownListBase.TokenItemStyle

DropDownListBase.TokenItemStyleSelector

DropDownListBase.SelectedValuePath

DropDownListBase.SelectedValue

DropDownListBase.LeadingView

DropDownListBase.TrailingView

DropDownListBase.HighlightedTextForeground

DropDownListBase.HighlightedTextFontWeight

DropDownListBase.HighlightedTextFontStyle

DropDownListBase.HighlightedTextFontSize

DropDownListBase.singleSelectionSuggestionTextBlock

DropDownListBase.multiSelectionSuggestionTextBlock

Namespace: Syncfusion.UI.Xaml.Editors

Assembly: Syncfusion.Editors.WinUI.dll

Syntax

public class SfComboBox : DropDownListBase

Remarks

Use an ComboBox control to select single or multiple items from the drop-down list. It has many features, such as multiple selection with checkboxes, editing, searching, filtering, UI customization, and custom templates.

Selection mode

The ComboBox control allows you to select single or multiple items from the drop-down list. The selection mode can be set by using the SelectionMode property. The available selection modes are,

Single: Select a single item from the drop-down list.

Multiple: Select more than one item from a drop-down list.The selected items can be displayed as tokens or simply divide them with a delimiter text in selection area.

For more info, regarding selection mode see Selection documentation

Filtering

The ComboBox control comes with a predefined set of filtering modes that filter suggestions based on the characters typed in the text box. The available filtering modes are:

Start with: Filters the suggestions when the beginning of the string has matches in the list.

Contains: Filters all the suggestion words that contain the character typed in the text box.

You can also apply your own custom filter logic to have items suggested based on your filter criteria using FilterBehavior property.

For more info, design guidance, and code examples, see Custom filtering documentation

Note: Filtering is not supported in editable mode of SfComboBox control when ItemsSource is CollectionViewSource.

Searching

The ComboBox control highlights the first item that fits the user input in the suggestion list. It also provides support to apply your own custom search logic to highlight item in the suggestion list based on your search criteria using SearchBehavior property.

For more info, design guidance, and code examples, see Custom searching documentation

InputSubmitted

The InputSubmitted event is triggered, when entered text is submitted that does not correspond to an item in the drop-down list. By using the Item property of ComboBoxInputSubmittedEventArgs user can add the item to the selected item(s) or set to the selected item that is assigned. If no item is assigned, then in single selection, entered text gets assigned to the selected item. In multiple selection, no text will be added to the selected items.

<editors:SfComboBox IsEditable="true"
                    ItemsSource="{Binding Sports}"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name"
                    InputSubmitted="OnInputSubmitted">
</editors:SfComboBox>

private void OnInputSubmitted(object sender, ComboBoxInputSubmittedEventArgs e)
{
   e.Item = new Sport() { Name = e.Text};
}

UI Customization

Selection box UI: Customize the appearance of the selection box in ComboBox control.

Drop down height: Adjust the drop-down height based on the number of items to enhance readability without scrolling.

Conditional Styling: Customize the appearance of drop-down list items conditionally based on the data.

Drop down item customization: Drop down list items can be customized with an image or custom control.

Token item customization: Token items can be customized with an image or custom control.

For more info, design guidance, and code examples, see UI Customization

Examples

For more info, design guidance, and code examples, see ComboBox documentation

Get the demos and source code from below link.

Syncfusion Controls Gallery app

View source code of demos in GitHub

The following example demonstrates, how to initialize the SfComboBox control and populate items using SfComboBoxItem.

XAML
C#

<editors:SfComboBox>
    <editors:SfComboBoxItem Content="Cricket"/>
    <editors:SfComboBoxItem Content="Football" />
    <editors:SfComboBoxItem Content="Golf" />
    <editors:SfComboBoxItem Content="Hockey" />
</editors:SfComboBox>

SfComboBox sfComboBox = new SfComboBox();
SfComboBoxItem item1 = new SfComboBoxItem() { Content = "Cricket" };
SfComboBoxItem item2 = new SfComboBoxItem() { Content = "Football" };
SfComboBoxItem item3 = new SfComboBoxItem() { Content = "Golf" };
SfComboBoxItem item4 = new SfComboBoxItem() { Content = "Hockey" };
sfComboBox.Items.Add(item1);
sfComboBox.Items.Add(item2);
sfComboBox.Items.Add(item3);
sfComboBox.Items.Add(item4);
this.Content = sfComboBox;

The following example demonstrates, populating items using ItemsSource.

XAML
C#

<Grid>
    <Grid.DataContext>
        <local:ComboBoxViewModel/>
    </Grid.DataContext>
    <editors:SfComboBox
        ItemsSource="{Binding Sports}"
        TextMemberPath="Name"
        DisplayMemberPath="Name"/>
</Grid>

public class Sport
{
    public string Name { get; set; }
    public int ID { get; set; }
}

public class ComboBoxViewModel
{
    public ObservableCollection<Sport> Sports { get; set; }
    public ComboBoxViewModel()
    {
        Sports = new ObservableCollection<Sport>();
        Sports.Add(new Sport() { Name = "Cricket", ID = 0 });
        Sports.Add(new Sport() { Name = "Football", ID = 1 });
        Sports.Add(new Sport() { Name = "Golf", ID = 2 });
        Sports.Add(new Sport() { Name = "Hockey", ID = 3 });
    }
}

Constructors

SfComboBox()

Initializes a new instance of the SfComboBox class.

Declaration

public SfComboBox()

Fields

AutoAppendTypeProperty

Identifies AutoAppendType dependency property.

Declaration

public static readonly DependencyProperty AutoAppendTypeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the AutoAppendType dependency property.

DelimiterTextProperty

Identifies DelimiterText dependency property.

Declaration

public static readonly DependencyProperty DelimiterTextProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the DelimiterText dependency property.

FilterBehaviorProperty

Identifies FilterBehavior dependency property.

Declaration

public static readonly DependencyProperty FilterBehaviorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the FilterBehavior dependency property.

IsEditableProperty

Identifies IsEditable dependency property.

Declaration

public static readonly DependencyProperty IsEditableProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the IsEditable dependency property.

IsFilteringEnabledProperty

Identifies IsFilteringEnabled dependency property.

Declaration

public static readonly DependencyProperty IsFilteringEnabledProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the IsFilteringEnabled dependency property.

IsMultiSelectCheckBoxEnabledProperty

Identifies IsMultiSelectCheckBoxEnabled dependency property.

Declaration

public static readonly DependencyProperty IsMultiSelectCheckBoxEnabledProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the IsMultiSelectCheckBoxEnabled dependency property.

IsTextSearchEnabledProperty

Identifies IsTextSearchEnabled dependency property.

Declaration

public static readonly DependencyProperty IsTextSearchEnabledProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the IsTextSearchEnabled dependency property.

ItemContainerStyleProperty

Identifies ItemContainerStyle dependency property.

Declaration

public static readonly DependencyProperty ItemContainerStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ItemContainerStyle dependency property.

ItemContainerStyleSelectorProperty

Identifies ItemContainerStyleSelector dependency property.

Declaration

public static readonly DependencyProperty ItemContainerStyleSelectorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ItemContainerStyleSelector dependency property.

MultiSelectionDisplayModeProperty

Identifies MultiSelectionDisplayMode dependency property.

Declaration

public static readonly DependencyProperty MultiSelectionDisplayModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MultiSelectionDisplayMode dependency property.

SearchBehaviorProperty

Identifies SearchBehavior dependency property.

Declaration

public static readonly DependencyProperty SearchBehaviorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SearchBehavior dependency property.

SelectedIndexProperty

Identifies SelectedIndex dependency property.

Declaration

public static readonly DependencyProperty SelectedIndexProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectedIndex dependency property.

SelectionBoxItemTemplateProperty

Identifies SelectionBoxItemTemplate dependency property.

Declaration

public static readonly DependencyProperty SelectionBoxItemTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

SelectionChangeTriggerProperty

Identifies SelectionChangeTrigger dependency property.

Declaration

public static readonly DependencyProperty SelectionChangeTriggerProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectionChangeTrigger dependency property.

SelectionModeProperty

Identifies SelectionMode dependency property.

Declaration

public static readonly DependencyProperty SelectionModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectionMode dependency property.

TextHighlightModeProperty

Identifies TextHighlightMode dependency property.

Declaration

public static readonly DependencyProperty TextHighlightModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TextHighlightMode dependency property.

TextSearchModeProperty

Identifies TextSearchMode dependency property.

Declaration

public static readonly DependencyProperty TextSearchModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TextSearchMode dependency property.

Properties

AutoAppendType

Gets or sets a auto append type.

Declaration

public ComboBoxAutoAppendType AutoAppendType { get; set; }

Property Value

Type	Description
ComboBoxAutoAppendType	The default value is `ComboBoxAutoAppendType.TextWithSelection`.

DelimiterText

Gets or sets a string as delimiter which is displayed between the selected items in multiple selection mode.

Declaration

public string DelimiterText { get; set; }

Property Value

Type	Description
System.String	The optimal value for Delimiter is any single character. The default value is `,`.

Remarks

This will be effective only for multiple selection mode. The DelimiterText will appear between two selected items to separate them.

FilterBehavior

Gets or sets the filter behavior for ComboBox control by defining the suggestions to be shown in drop down.

Declaration

public IComboBoxFilterBehavior FilterBehavior { get; set; }

Property Value

Type	Description
IComboBoxFilterBehavior	The default value is `null`.

Remarks

This property has effect only in editable mode and IsFiltering property is true.

Examples

This example demonstrates how to display the cities in drop-down based on the country name entered in the ComboBox control.

XAML
C#

<editors:SfComboBox TextMemberPath="CityName"
                    DisplayMemberPath="CityName"
                    IsEditable="True"
                    IsFilteringEnabled="True"
                    ItemsSource="{Binding Cities}">
       <editors:SfComboBox.DataContext>
          <local:CityViewModel/>
       </editors:SfComboBox.DataContext>
       <editors:SfComboBox.FilterBehavior>
          <local:CityFilteringBehavior/>
       </editors:SfComboBox.FilterBehavior>
</editors:SfComboBox>

//Model.cs
public class CityInfo
{
    public string CityName { get; set; }
    public string CountryName { get; set; }
}

//ViewModel.cs
public class CityViewModel
{
    public ObservableCollection<CityInfo> Cities { get; set; }
    public CityViewModel()
    {
        this.Cities = new ObservableCollection<CityInfo>();
        this.Cities.Add(new CityInfo() { CityName= "Chicago", CountryName= "USA" });
        this.Cities.Add(new CityInfo() { CityName = "Los Angeles", CountryName = "USA" });
        this.Cities.Add(new CityInfo() { CityName = "Houston", CountryName = "USA" });
        this.Cities.Add(new CityInfo() { CityName = "New York", CountryName = "USA" });
        this.Cities.Add(new CityInfo() { CityName = "Washington", CountryName = "USA" });
        this.Cities.Add(new CityInfo() { CityName = "Chennai", CountryName = "India" });
        this.Cities.Add(new CityInfo() { CityName = "Delhi", CountryName = "India" });
        this.Cities.Add(new CityInfo() { CityName = "Kolkata", CountryName = "India" });
        this.Cities.Add(new CityInfo() { CityName = "Mumbai", CountryName = "India" });
        this.Cities.Add(new CityInfo() { CityName = "Berlin", CountryName = "Germany" });
        this.Cities.Add(new CityInfo() { CityName = "Cologne", CountryName = "Germany" });
        this.Cities.Add(new CityInfo() { CityName = "Hamburg", CountryName = "Germany" });
        this.Cities.Add(new CityInfo() { CityName = "Munich", CountryName = "Germany" });
        this.Cities.Add(new CityInfo() { CityName = "Quebec City", CountryName = "Canada" });
        this.Cities.Add(new CityInfo() { CityName = "Ottawa", CountryName = "Canada" });
        this.Cities.Add(new CityInfo() { CityName = "Toronto", CountryName = "Canada" });
        this.Cities.Add(new CityInfo() { CityName = "Vancouver", CountryName = "Canada" });
        this.Cities.Add(new CityInfo() { CityName = "Victoria", CountryName = "Canada" });
    }
}

/// <summary>
/// Represents a custom filtering behavior for ComboBox control.
/// </summary>
public class CityFilteringBehavior : IComboBoxFilterBehavior
{
   /// <summary>
   /// Returned suggestion list based on the city or country name entered in the ComboBox control.
   /// </summary>
   public List<int> GetMatchingIndexes(SfComboBox source, ComboBoxFilterInfo filterInfo)
   {
       List<int> filteredlist = new List<int>();
       List<CityInfo> cityItems = source.Items.OfType<CityInfo>().ToList();
       filteredlist.AddRange(from CityInfo item in cityItems
                             where item.CountryName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase) ||
                                   item.CityName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase)
                             select cityItems.IndexOf(item));
       return filteredlist;
   }
}

IsEditable

Gets or sets a value that indicates whether the user can edit text in the text box portion of the SfComboBox.

Declaration

public bool IsEditable { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `false`.

Remarks

This property does not have effect when ComboBoxSelectionMode is Multiple. true if the user can edit text in the SfComboBox, otherwise false.

IsFilteringEnabled

Gets or sets a value indicating whether to show only filtered items based on TextSearchMode property.

Declaration

public bool IsFilteringEnabled { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `false`.

Remarks

This property has effect only in editable mode. Filtering is not supported when ItemsSource is CollectionViewSource.

IsMultiSelectCheckBoxEnabled

Gets or sets a value indicating whether to show or hide the check box in multi-selection mode.

Declaration

public bool IsMultiSelectCheckBoxEnabled { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `true`.

Remarks

This will be effective only for multiple selection mode.

IsTextSearchEnabled

Gets or sets a value indicating whether a user can jump to a value by typing.

Declaration

public bool IsTextSearchEnabled { get; set; }

Property Value

Type	Description
System.Boolean	The default value is `true`.

ItemContainerStyle

Gets or sets the Microsoft.UI.Xaml.Style that is applied to the generated item in drop down.

Declaration

public Style ItemContainerStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	The default value is `null`.

Examples

The following example shows how to define a ItemContainerStyle for the control's items.

<editors:SfComboBox
    ItemsSource="{Binding Countries}"
    DisplayMemberPath="Name"
    TextMemberPath="Name">
    <editors:SfComboBox.ItemContainerStyle>
        <Style TargetType="editors:SfComboBoxItem">
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </editors:SfComboBox.ItemContainerStyle>
</editors:SfComboBox>

ItemContainerStyleSelector

Gets or sets a reference to a custom Microsoft.UI.Xaml.Controls.StyleSelector logic class. The StyleSelector returns different Style values to use for the item container based on characteristics of the object being displayed.

Declaration

public StyleSelector ItemContainerStyleSelector { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Controls.StyleSelector	A custom `StyleSelector`logic class.

Examples

The following example shows how to define a ItemContainerStyleSelector for the SfComboBox control.

XAML
C#

<Application.Resources>
    <Style x:Key="CountryStyle1" TargetType="editors:SfComboBoxItem">
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Background" Value="Green"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
    <Style x:Key="CountryStyle2" TargetType="editors:SfComboBoxItem">
        <Setter Property="Foreground" Value="Green"/>
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
</Application.Resources>

<Grid>
    <Grid.Resources>
        <local:CountryStyleSelector x:Key="countryStyleSelector" />
    </Grid.Resources>

    <editors:SfComboBox
        DisplayMemberPath="Name"
        ItemsSource="{Binding Countries}"
        ItemContainerStyleSelector="{StaticResource countryStyleSelector}"/> />
</Grid>

public class CountryStyleSelector : StyleSelector
{
    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        if (item != null && item is Country)
        {
            Country country = item as Country;
            if (country.ID is int)
            {
                if (country.ID % 2 == 0)
                    return Application.Current.Resources["CountryStyle1"] as Style;
                else
                    return Application.Current.Resources["CountryStyle2"] as Style;
            }
        }

        return base.SelectStyleCore(item, container);
    }
}

Items

Gets the collection used to generate the content of the control.

Declaration

public IList<object> Items { get; }

Property Value

Type	Description
System.Collections.Generic.IList<System.Object>	The default is an empty collection.

Examples

The following example shows how to define a Items in SfComboBox.

<editors:SfComboBox>
    <editors:SfComboBoxItem Content="Cricket"/>
    <editors:SfComboBoxItem Content="Football" />
    <editors:SfComboBoxItem Content="Golf" />
    <editors:SfComboBoxItem Content="Hockey" />
</editors:SfComboBox>

MultiSelectionDisplayMode

Gets or sets the multi selection mode for the SfComboBox control.

Declaration

public ComboBoxMultiSelectionDisplayMode MultiSelectionDisplayMode { get; set; }

Property Value

Type

Description

ComboBoxMultiSelectionDisplayMode

A value that indicates to perform multiple selection using Text or Tokens in SfComboBox control. The default value is Delimiter. Fields:

Enumeration	Description
Delimiter	Represent selected items with text separated using delimiter.
Token	Represent selected items using Token.

SearchBehavior

Gets or sets the search behavior for ComboBox control which defines the highlighted index based on filterted items.

Declaration

public IComboBoxSearchBehavior SearchBehavior { get; set; }

Property Value

Type	Description
IComboBoxSearchBehavior	The default value is `null`.

Remarks

This property has effect only when IsTextSearchEnabled property is true.

Examples

The following example demonstrates how to highlight the first item that fully matches the typed length entered in the ComboBox control.

XAML
C#

<editors:SfComboBox ItemsSource="{Binding Countries}"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name"
                    IsEditable="True"
                    IsFilteringEnabled="True">
       <editors:SfComboBox.SearchBehavior>
          <local:StringLengthSearchingBehavior/>
       </editors:SfComboBox.SearchBehavior>
</editors:SfComboBox>

/// <summary>
/// Represents a custom searching behavior for `ComboBox` control.
/// </summary>
public class StringLengthSearchingBehavior : IComboBoxSearchBehavior
{
   private int charLength;

   /// <summary>
   /// Return the highlight index that fully matches the typed length entered in the ComboBox control.
   /// </summary>
   public int GetHighlightIndex(SfComboBox source, ComboBoxSearchInfo searchInfo)
   {
       if (int.TryParse(searchInfo.Text, out this.charLength))
       {
           var fullMatch = searchInfo.FilteredItems.OfType<SocialMedia>().FirstOrDefault(i => i.Name.Length == charLength);
           if (fullMatch != null)
           {
               return searchInfo.FilteredItems.IndexOf(fullMatch);
           }
       }

       return -1;
   }
}

SelectedIndex

Gets or sets the index of the selected item.

Declaration

public int SelectedIndex { get; set; }

Property Value

Type	Description
System.Int32	The index of the selected item. The default value is `-1`, which indicates that no item is selected.

Remarks

This property does not have effect in multiple selection mode.

SelectionBoxItemTemplate

Gets or sets the DataTemplate that is used to display the content of SfComboBox.

Declaration

public DataTemplate SelectionBoxItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value of `SelectionBoxItemTemplate` is `null`.

Remarks

This property does not have effect when editable mode is enabled.

Examples

The following example shows how to define a SelectionBoxItemTemplate for the SfComboBox control.

XAML
C#

<Grid>
    <Grid.DataContext>
        <local:ComboBoxViewModel/>
    </Grid.DataContext>
    <editors:SfComboBox
        x:Name="comboBox"
        ItemsSource="{Binding Countries}"
        TextMemberPath="Name"
        DisplayMemberPath="Name">
        <editors:SfComboBox.SelectionBoxItemTemplate>
           <DataTemplate>
              <TextBlock
                  DataContext="{Binding ElementName=comboBox, Path=SelectedItem}"
                  Margin="12,5,0,6"
                  Text="{Binding Name}"
                  Foreground="Red"
                  FontWeight="Bold"/>
           </DataTemplate>
        </editors:SfComboBox.SelectionBoxItemTemplate>
    </editors:SfComboBox>
</Grid>

public class Country
{
    public string Name { get; set; }
    public string Continent { get; set; }
    public int ID { get; set; }
}

public class ComboBoxViewModel
{
    public ObservableCollection<Country> Countries { get; set; }
    public ComboBoxViewModel()
    {
        Countries = new ObservableCollection<Country>();
        Countries.Add(new Country() { Name = "United States", ID = 0, Continent = "America" });
        Countries.Add(new Country() { Name = "Afghanistan", ID = 1, Continent = "Asia" });
        Countries.Add(new Country() { Name = "Albania", ID = 2, Continent = "Europe" });
    }
}

SelectionChangeTrigger

Gets or sets a value that indicates what action causes a SelectionChanged event to occur.

Declaration

public ComboBoxSelectionChangeTrigger SelectionChangeTrigger { get; set; }

Property Value

Type

Description

ComboBoxSelectionChangeTrigger

A value that indicates what action causes a SelectionChanged event to occur in ComboBox control. The default value is Committed. Fields:

Enumeration	Description
Committed	Selected item gets update when the user commits a selection in the ComboBox.
Always	Selected item gets update to each time the user navigates to a new selection in the ComboBox.

Remarks

This property has effect only in single selection mode.

SelectionMode

Gets or sets the selection behavior for the SfComboBox control.

Declaration

public ComboBoxSelectionMode SelectionMode { get; set; }

Property Value

Type

Description

ComboBoxSelectionMode

A value that indicates the selection behavior for a ComboBox control. The default value is Single. Fields:

Enumeration	Description
Single	Allows to select a single item from a list.
Multiple	Allows to select one or more items from a list.

Remarks

Allows to select either a single item or multiple items.

TextHighlightMode

Gets or sets a text highlighting mode.

Declaration

public ComboBoxTextHighlightMode TextHighlightMode { get; set; }

Property Value

Type	Description
ComboBoxTextHighlightMode	The default value is `ComboBoxTextHighlightMode.None`.

TextSearchMode

Gets or sets the TextSearchMode to search the item which matches the search text with the beginning of the texts or contains the search text in the list.

Declaration

public ComboBoxTextSearchMode TextSearchMode { get; set; }

Property Value

Type

Description

ComboBoxTextSearchMode

A value that indicates the text search behavior for a ComboBox control. The default value is StartsWith. Fields:

Enumeration	Description
StartsWith	Search the item which matches the search text with the beginning of the texts in the list.
Contains	Search the item which contains the search text in the list.

Methods

Dispose()

Dispose the Control from the memory.

Declaration

public override void Dispose()

Overrides

DropDownListBase.Dispose()

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

Overrides

DropDownListBase.OnApplyTemplate()

OnCreateAutomationPeer()

Declaration

protected override AutomationPeer OnCreateAutomationPeer()

Returns

Type	Description
Microsoft.UI.Xaml.Automation.Peers.AutomationPeer

OnGotFocus(RoutedEventArgs)

Declaration

protected override void OnGotFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

Overrides

DropDownListBase.OnGotFocus(RoutedEventArgs)

OnLostFocus(RoutedEventArgs)

Declaration

protected override void OnLostFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

Overrides

DropDownListBase.OnLostFocus(RoutedEventArgs)

OnPointerEntered(PointerRoutedEventArgs)

Declaration

protected override void OnPointerEntered(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

DropDownListBase.OnPointerEntered(PointerRoutedEventArgs)

OnPointerExited(PointerRoutedEventArgs)

Declaration

protected override void OnPointerExited(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

DropDownListBase.OnPointerExited(PointerRoutedEventArgs)

OnPointerPressed(PointerRoutedEventArgs)

Declaration

protected override void OnPointerPressed(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerReleased(PointerRoutedEventArgs)

Declaration

protected override void OnPointerReleased(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerWheelChanged(PointerRoutedEventArgs)

Declaration

protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPreviewKeyDown(KeyRoutedEventArgs)

Declaration

protected override void OnPreviewKeyDown(KeyRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.KeyRoutedEventArgs	e

Events

InputSubmitted

Occurs when the user submits some text that does not correspond to an item in the ComboBox dropdown list.

Declaration

public event EventHandler<ComboBoxInputSubmittedEventArgs> InputSubmitted

Event Type

Type	Description
System.EventHandler<ComboBoxInputSubmittedEventArgs>

Examples

This example demonstrates how to invoke InputSubmitted event.

XAML
C#

    <editors:SfComboBox
        x:Name="comboBox"
        IsEditable="true"
        ItemsSource="{Binding Countries}"
        TextMemberPath="Name"
        DisplayMemberPath="Name"
        InputSubmitted="OnEditingComboBoxInputSubmitted" />

private async void OnEditingComboBoxInputSubmitted(object sender, ComboBoxInputSubmittedEventArgs e)
{
   var cd = new ContentDialog
   {
     Content = "Enter a country from the list.",
     CloseButtonText = "Close"
   };

   cd.XamlRoot = this.Content.XamlRoot;
   var result = await cd.ShowAsync();
}

SelectionChanged

Occurs when the SelectedItem or SelectedItems is changed.

Declaration

public event EventHandler<ComboBoxSelectionChangedEventArgs> SelectionChanged

Event Type

Type	Description
System.EventHandler<ComboBoxSelectionChangedEventArgs>

Examples

This example demonstrates how to invoke SelectionChanged event.

XAML
C#

    <editors:SfComboBox
        x:Name="comboBox"
        ItemsSource="{Binding Countries}"
        TextMemberPath="Name"
        DisplayMemberPath="Name"
        SelectionChanged="OnSfComboBoxSelectionChanged" />

private async void OnSfComboBoxSelectionChanged(object sender, ComboBoxSelectionChangedEventArgs e)
{
   var cd = new ContentDialog
   {
     Content = "Selected item was changed.",
     CloseButtonText = "Close"
   };

   cd.XamlRoot = this.Content.XamlRoot;
   var result = await cd.ShowAsync();
}