Getting Started with UWP ComboBox (SfComboBox)

25 May 20216 minutes to read

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

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

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

XAML

<input:SfComboBox x:Name="combobox">

C#

SfComboBox combobox = new SfComboBox();

VB.NET

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.

C#

public class ProductList

  {

        public string Name { get; set; } 

 }

VB.NET

Public Class ProductList

    Public Property Name() As String

End Class

Create the employee collection as follows.

C#

private List<ProductList> products;



     public List<ProductList> Products

     {

         get { return products; }



         set { products = value; }

     }

VB.NET

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.

C#

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" });

VB.NET

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.

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.

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.