Appearance in Windows Forms ComboBox (SfComboBox)

3 Sep 2020 / 10 minutes to read

Customizing editor appearance

Appearance of the editor portion can be customized by using the Style.EditorStyle property that contains all the needed properties for appearance customization.

sfComboBox1.Style.EditorStyle.BackColor = Color.Aqua;
sfComboBox1.Style.EditorStyle.BorderColor = Color.Red;
sfComboBox1.Style.EditorStyle.ForeColor = Color.Blue;
sfComboBox1.Style.EditorStyle.Font = new Font("Arial", 10F, FontStyle.Bold);
sfComboBox1.Style.EditorStyle.BackColor = Color.Aqua
sfComboBox1.Style.EditorStyle.BorderColor = Color.Red
sfComboBox1.Style.EditorStyle.ForeColor = Color.Blue
sfComboBox1.Style.EditorStyle.Font = New Font("Arial", 10F, FontStyle.Bold)

Customizing using EditorStyle

Customizing non-editing mode appearance

Appearance of the editor portion can be customized by setting the ReadOnlyEditorStyle property when the editor portion is non-editable.

sfComboBox1.Style.ReadOnlyEditorStyle.BackColor = Color.Aqua;
sfComboBox1.Style.ReadOnlyEditorStyle.BorderColor = Color.Red;
sfComboBox1.Style.ReadOnlyEditorStyle.ForeColor = Color.Blue;
sfComboBox1.Style.ReadOnlyEditorStyle.Font = new Font("Arial", 10F, FontStyle.Bold);
sfComboBox1.Style.ReadOnlyEditorStyle.BackColor = Color.Aqua
sfComboBox1.Style.ReadOnlyEditorStyle.BorderColor = Color.Red
sfComboBox1.Style.ReadOnlyEditorStyle.ForeColor = Color.Blue
sfComboBox1.Style.ReadOnlyEditorStyle.Font = New Font("Arial", 10F, FontStyle.Bold)

Customizing using ReadOnlyEditorStyle

Customizing drop-down button appearance

Appearance of the drop-down button can be customized by setting the DropDownButtonStyle property.

sfComboBox1.Style.DropDownButtonStyle.BackColor = Color.Blue;
sfComboBox1.Style.DropDownButtonStyle.HoverBackColor = Color.Red;
sfComboBox1.Style.DropDownButtonStyle.PressedBackColor = Color.Aqua;
sfComboBox1.Style.DropDownButtonStyle.FocusedBackColor = Color.Pink;
sfComboBox1.Style.DropDownButtonStyle.BackColor = Color.Blue
sfComboBox1.Style.DropDownButtonStyle.HoverBackColor = Color.Red
sfComboBox1.Style.DropDownButtonStyle.PressedBackColor = Color.Aqua
sfComboBox1.Style.DropDownButtonStyle.FocusedBackColor = Color.Pink

customization the DropDownButtonStyle

Customizing drop-down appearance

Appearance of the drop-down control can be customized by setting the DropDownStyle property.

sfComboBox1.Style.DropDownStyle.GripperBackColor = Color.Aqua;
sfComboBox1.Style.DropDownStyle.GripperForeColor = Color.Blue;
sfComboBox1.Style.DropDownStyle.GripperBackColor = Color.Aqua
sfComboBox1.Style.DropDownStyle.GripperForeColor = Color.Blue

customization the DropDownStyle

Setting image in drop-down list item

Images can be added to the drop-down list items by using the DrawItem event.

sfComboBox1.DropDownListView.DrawItem += new EventHandler<Syncfusion.WinForms.ListView.Events.DrawItemEventArgs>(DropDownListView_DrawItem);
private void DropDownListView_DrawItem(object sender, Syncfusion.WinForms.ListView.Events.DrawItemEventArgs e)
{
   if (e.Text == "Spain")
     e.Image = Image.FromFile(@"..\..\Flags\Spain.png");
   else if (e.Text == "Germany")
     e.Image = Image.FromFile(@"..\..\Flags\Germany.png");
   else if (e.Text == "Japan")
     e.Image = Image.FromFile(@"..\..\Flags\Japan.png");
   else if (e.Text == "Brazil")
     e.Image = Image.FromFile(@"..\..\Flags\Brazil.png");
   else if (e.Text == "Argentina")
     e.Image = Image.FromFile(@"..\..\Flags\Argentina.png");
   else if (e.Text == "Canada")
     e.Image = Image.FromFile(@"..\..\Flags\Canada.png");
   else if (e.Text == "India")
     e.Image = Image.FromFile(@"..\..\Flags\India.png");
   e.ImageAlignment = ContentAlignment.BottomLeft;
}
AddHandler sfComboBox1.DropDownListView.DrawItem, AddressOf DropDownListView_DrawItem
Private Sub DropDownListView_DrawItem(ByVal sender As Object, ByVal e As Syncfusion.WinForms.ListView.Events.DrawItemEventArgs)
   If e.Text = "Spain" Then
	 e.Image = Image.FromFile("..\..\Flags\Spain.png")
   ElseIf e.Text = "Germany" Then
	 e.Image = Image.FromFile("..\..\Flags\Germany.png")
   ElseIf e.Text = "Japan" Then
	 e.Image = Image.FromFile("..\..\Flags\Japan.png")
   ElseIf e.Text = "Brazil" Then
	 e.Image = Image.FromFile("..\..\Flags\Brazil.png")
   ElseIf e.Text = "Argentina" Then
	 e.Image = Image.FromFile("..\..\Flags\Argentina.png")
   ElseIf e.Text = "Canada" Then
	 e.Image = Image.FromFile("..\..\Flags\Canada.png")
   ElseIf e.Text = "India" Then
	 e.Image = Image.FromFile("..\..\Flags\India.png")
   End If
   e.ImageAlignment = ContentAlignment.BottomLeft
End Sub

DropDown item with image

Conditional styling

Appearance of the drop-down list view items can be customized before opening the drop-down by using the DrawItem event.

sfComboBox1.DropDownListView.DrawItem += new EventHandler<Syncfusion.WinForms.ListView.Events.DrawItemEventArgs>(DropDownListView_DrawItem);
private void DropDownListView_DrawItem(object sender, Syncfusion.WinForms.ListView.Events.DrawItemEventArgs e)
{
  if((e.ItemData as CountryInfo).Continent == "Asia") 
    {
       e.Style.BackColor = Color.Coral;
       e.Style.ForeColor = Color.White; 
    }
}
AddHandler sfComboBox1.DropDownListView.DrawItem, AddressOf DropDownListView_DrawItem
Private Sub DropDownListView_DrawItem(ByVal sender As Object, ByVal e As Syncfusion.WinForms.ListView.Events.DrawItemEventArgs)
  If (TryCast(e.ItemData, CountryInfo)).Continent = "Asia" Then
	   e.Style.BackColor = Color.Coral
	   e.Style.ForeColor = Color.White
  End If
End Sub

customization based on conditions

Themes

Four built-in themes for professional representation of SfComboBox are as follows:

  • Office2016Colorful
  • Office2016White
  • Office2016DarkGray
  • Office2016Black

Themes can be applied to the SfComboBox by using the following steps:

  1. Loading theme assembly
  2. Apply theme

Loading theme assembly

The Syncfusion.Office2016Theme.WinForms assembly should be added as a reference to set theme for the SfComboBox in any application.

Before applying theme to the SfComboBox, required theme assembly should be loaded.

using Syncfusion.WinForms.Controls;
namespace WindowsFormsApplication1
{
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>

        static void Main()
        {
            SfSkinManager.LoadAssembly(typeof(Office2016Theme).Assembly);
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
}
Imports Syncfusion.WinForms.Controls
Namespace WindowsFormsApplication1
	Friend NotInheritable Class Program
		''' <summary>
		''' The main entry point for the application.
		''' </summary>

		Private Sub New()
		End Sub
		Shared Sub Main()
			SfSkinManager.LoadAssembly(GetType(Office2016Theme).Assembly)
			Application.EnableVisualStyles()
			Application.SetCompatibleTextRenderingDefault(False)
			Application.Run(New Form1())
		End Sub
	End Class
End Namespace

Apply theme

Appearance of the SfComboBox can be changed by using the ThemeName property.

Office2016Colorful

Sets the Office2016Colorful theme.

sfComboBox1.ThemeName = "Office2016Colorful";
sfComboBox1.ThemeName = "Office2016Colorful"

Customization with ThemeName

Office2016White

Sets the Office2016White theme.

sfComboBox1.ThemeName = "Office2016White";
sfComboBox1.ThemeName = "Office2016White"

Office2016White theme appearance

Office2016DarkGray

Sets the Office2016DarkGray theme.

sfComboBox1.ThemeName = "Office2016White";
sfComboBox1.ThemeName = "Office2016White"

Office2016DarkGray theme appearance

Office2016Black

Sets the Office2016Black theme.

sfComboBox1.ThemeName = "Office2016Black";
sfComboBox1.ThemeName = "Office2016Black"

Office2016Black theme appearance