Getting Started

The SfComboBox control allows the user to select an item from a list of suggestions.

Overview of the control

Adding SfComboBox control

Create a Universal Windows Platform project in Visual Studio and refer to the following assemblies.

  • Syncfusion.SfInput.UWP

  • Syncfusion.SfShared.UWP

1.Include the namespace for Syncfusion.SfInput.UWP assembly in MainPage.xaml

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

2.Now add the SfComboBox control with a required optimal name using the included namespace

<input:SfComboBox x:Name="combobox">
SfComboBox combobox = new SfComboBox();
Dim combobox As New SfComboBox()

Populating Items

Items Source

SfComboBoxItems can be populated with the business object collection. The below example is illustrated to create a SfComboBox that display a list of employees.

The Employee model is displayed as follows.

public class ProductList

  {

        public string Name { get; set; } 

 }
Public Class ProductList

    Public Property Name() As String

End Class

Create the employee collection as follows.

private List<ProductList> products;



     public List<ProductList> Products

     {

         get { return products; }



         set { products = value; }

     }
Private products_Renamed As List(Of ProductList)

Public Property Products() As List(Of ProductList)


		 Get
			 Return products_Renamed
		 End Get



		 Set(ByVal value As List(Of ProductList))
			 products_Renamed = value
		 End Set

End Property

Populate the items.

Products = new List<ProductList>();

 Products.Add(new ProductList() { Name = "Tools" });
            
 Products.Add(new ProductList() {  Name = "Grid" });
            
 Products.Add(new ProductList(){ Name = "Chart" });
            
 Products.Add(new ProductList(){ Name = "Gauge" }); 
            
 Products.Add(new ProductList(){ Name = "Olap" });
            
 Products.Add(new ProductList(){ Name = "Pivot" });
            
 Products.Add(new ProductList(){ Name = "SpreadSheet" });
Products = New List(Of ProductList)()

 Products.Add(New ProductList() With {.Name = "Tools"})

 Products.Add(New ProductList() With {.Name = "Grid"})

 Products.Add(New ProductList() With {.Name = "Chart"})

 Products.Add(New ProductList() With {.Name = "Gauge"})

 Products.Add(New ProductList() With {.Name = "Olap"})

 Products.Add(New ProductList() With {.Name = "Pivot"})

 Products.Add(New ProductList() With {.Name = "SpreadSheet"})

Bind the Employees collection to the ItemsSource property of the SfComboBox.

  • xaml
  • <editors:SfComboBox ItemsSource="{Binding Products}" />

    The above steps populate the SfComboBox as illustrated in the following screenshot.

    Showing itemsource property of UWP sfcombobox

    DisplayMemberPath

    The DisplayMemberPath property of the SfComboBox is used to define the model’s property that is to be displayed inside the header of the tab items.

  • html
  • < editors:SfComboBox
    
    DisplayMemberPath="Name" ItemsSource="{Binding Products}" />

    This populates the SfComboBox as illustrated in the following screenshot.

    Showing product name of the UWP sfcombobox

    Item Template

    The ItemTemplate property of the SfComboBox can be used to customize the content part of the SfComboBoxItems.

  • html
  • < editors:SfComboBox
    
                ItemsSource="{Binding Products}" >          <editors:SfComboBox.ItemTemplate>
    
                    <DataTemplate>
    
                        <Grid>
    
                            <StackPanel>
    
                 <TextBlock Text="{Binding Name}" FontSize="17"/>
    
                 <TextBlock Text="{Binding Email}" FontSize="10" Opacity="0.5"/>
    
                            </StackPanel>
    
                        </Grid>
    
                    </DataTemplate>
    
                </editors:SfComboBox.ItemTemplate>
    
    </editors:SfComboBox>

    This populates the SfComboBox as illustrated in the following screenshot.

    Showing employee name of the UWP sfcombobox