How to Customize ComboBoxItem in WinUI ComboBox?
This article explains how to Customize ComboBoxItem in WinUI ComboBox.
The ItemTemplate property helps you to decorate drop-down items using the custom templates. The default value of ItemTemplate is null. The following example shows how to add image or custom control in drop-down items using templates.
C#
//Model.cs
public class Employee
{
public string Name { get; set; }
public BitmapImage ProfilePicture { get; set; }
public string Designation { get; set; }
}
//ViewModel.cs
public class EmployeeViewModel
{
public ObservableCollection<Employee> Employees { get; set; }
public EmployeeViewModel()
{
this.Employees = new ObservableCollection<Employee>();
this.Employees.Add(new Employee {
Name = "Anne Dodsworth",
ProfilePicture = new BitmapImage(new Uri(@"ms-appx:///Assets/Employees/AnneDodsworth.png",
UriKind.RelativeOrAbsolute)),
Designation = "Developer"
});
this.Employees.Add(new Employee {
Name = "Andrew Fuller",
ProfilePicture = new BitmapImage(new Uri(@"ms-appx:///Assets/Employees/AndrewFuller.png",
UriKind.RelativeOrAbsolute)),
Designation = "Team Lead"
});
this.Employees.Add(new Employee {
Name = "Emilia Alvaro",
ProfilePicture = new BitmapImage(new Uri(@"ms-appx:///Assets/Employees/EmiliaAlvaro.png",
UriKind.RelativeOrAbsolute)),
Designation = "Product Manager"
});
this.Employees.Add(new Employee {
Name = "Janet Leverling",
ProfilePicture = new BitmapImage(new Uri(@"ms-appx:///Assets/Employees/JanetLeverling.png",
UriKind.RelativeOrAbsolute)),
Designation = "HR"
});
this.Employees.Add(new Employee {
Name = "Laura Callahan",
ProfilePicture = new BitmapImage(new Uri(@"ms-appx:///Assets/ComboBox/Employees/LauraCallahan.png",
UriKind.RelativeOrAbsolute)),
Designation = "Product Manager"
});
}
}
XAML
<editors:SfComboBox x:Name="comboBox"
Width="250"
TextMemberPath="Name"
IsEditable="True"
ItemsSource="{Binding Employees}">
<editors:SfComboBox.DataContext>
<local:EmployeeViewModel/>
</editors:SfComboBox.DataContext>
<editors:SfComboBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding ProfilePicture}"
Stretch="Uniform"/>
<StackPanel Grid.Column="1"
Margin="15,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<TextBlock Opacity="0.87"
FontSize="14"
Text="{Binding Name}"/>
<TextBlock Opacity="0.54"
FontSize="12"
Text="{Binding Designation}"/>
</StackPanel>
</Grid>
</DataTemplate>
</editors:SfComboBox.ItemTemplate>
</editors:SfComboBox>
Customize ComboBoxItems based on condition
The ItemTemplateSelector property helps you to decorate drop-down items conditionally based on its content using the custom templates. The default value of ItemTemplateSelector is null.
C#
public class EmployeeTemplateSelector : DataTemplateSelector
{
public DataTemplate EmployeeTemplate1 { get; set; }
public DataTemplate EmployeeTemplate2 { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var employeeName = (item as Employee).Name;
if (employeeName.ToString() == "Anne Dodsworth" || employeeName.ToString() == "Emilia Alvaro" ||
employeeName.ToString() == "Laura Callahan")
{
return EmployeeTemplate1;
}
else
{
return EmployeeTemplate2;
}
}
}
XAML
<Grid>
<Grid.Resources>
<DataTemplate x:Key="employeeTemplate1">
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfilePicture}"
Stretch="Uniform"/>
<StackPanel
Grid.Column="1"
Margin="15,0,0,0">
<TextBlock
Foreground="Blue"
Opacity="0.87"
FontSize="14"
Text="{Binding Name}"/>
<TextBlock
Foreground="Coral"
Opacity="0.54"
FontSize="12"
Text="{Binding Designation}"/>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="employeeTemplate2">
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfilePicture}"
Stretch="Uniform"/>
<StackPanel
Grid.Column="1"
Margin="15,0,0,0">
<TextBlock
Foreground="Red"
Opacity="0.87"
FontSize="14"
Text="{Binding Name}"/>
<TextBlock
Foreground="Green"
Opacity="0.54"
FontSize="12"
Text="{Binding Designation}"/>
</StackPanel>
</Grid>
</DataTemplate>
<local:EmployeeTemplateSelector x:Key="employeeTemplateSelector"
EmployeeTemplate1="{StaticResource employeeTemplate1}"
EmployeeTemplate2="{StaticResource employeeTemplate2}"/>
</Grid.Resources>
<editors:SfComboBox x:Name="comboBox"
Width="250"
TextMemberPath="Name"
ItemsSource="{Binding Employees}"
PlaceholderText="Select an employee"
IsEditable="True"
ItemTemplateSelector="{StaticResource employeeTemplateSelector}">
<editors:SfComboBox.DataContext>
<local:EmployeeViewModel/>
</editors:SfComboBox.DataContext>
</editors:SfComboBox>
</Grid>
Conclusion
I hope you enjoyed learning how to Customize ComboBoxItem in WinUI ComboBox.
.
You can refer to our WinUI ComboBox feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the Licence and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forum, Support portal, or feedback portal. We are always happy to assist you!
