7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

Bấm để xem thêm

Miles Wei & Hu Yixuan on Mango TV

Mango TV

Custom ComboBox - Icon, Back,

Text & Border Color - WinForm C #
by RJ Code Advance

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 1/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

Hello, in this tutorial we will create a custom ComboBox with a very elegant, flat, modern
look and keeping all the basic and important functionality of a traditional ComboBox.

For example, a ComboBox with the DropDownList style allows the drop-down list to be
opened by clicking anywhere in the control, and the list can be filtered according to the
alphanumeric key that is pressed.

On the other hand, a ComboBox with the DropDown style only allows opening the drop-down
list from the icon, and being able to write freely on the control, as if it were a text box. This
is very useful for an advanced filter, autocomplete and suggesting some element of the list
according to the written word.

Regarding the appearance, you can change the color of the background, border, icon, text
and the drop-down list, change the border size and the size of the control at will.

Well, doing so will be a bit more complicated than previous custom controls, not because it is
difficult, but because it takes a little more time to re-implement all the essential
functionalities of a traditional ComboBox. So let's start with the tutorial:

1.- Create class and inherit the UserControl class

[ DefaultEvent ( "OnSelectedIndexChanged" )]
class RJComboBox: UserControl
{

2.- Define the appearance fields, components and events.

// Fields
private Color backColor = Color. WhiteSmoke ;
private Color iconColor = Color. MediumSlateBlue ;
private Color listBackColor = Color. FromArgb ( 230 , 228 , 245 ) ;
private Color listTextColor = Color. DimGray ;
private Color borderColor = Color. MediumSlateBlue ;
private int borderSize = 1 ;

// Items
private ComboBox cmbList;
private Label lblText;
private Button btnIcon;

// Events
public event EventHandler OnSelectedIndexChanged ; // Default event

3.- Constructor (Initialize the components)

//Builder
https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 2/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

public RJComboBox ()
{
cmbList = new ComboBox () ;
lblText = new Label () ;
btnIcon = new Button () ;
this . SuspendLayout () ;

// ComboBox: Dropdown list

cmbList. BackColor = listBackColor;
cmbList. Font = new Font ( this . Font . Name , 10F ) ;
cmbList. ForeColor = listTextColor;
cmbList. SelectedIndexChanged + = new EventHandler ( ComboBox_Selecte
cmbList. TextChanged + = new EventHandler ( ComboBox_TextChanged ) ;

// Button: Icon
btnIcon. Dock = DockStyle. Right ;
btnIcon. FlatStyle = FlatStyle. Flat ;
btnIcon. FlatAppearance . BorderSize = 0 ;
btnIcon. BackColor = backColor;
btnIcon. Size = new Size ( 30 , 30 ) ;
btnIcon. Cursor = Cursors. Hand ;
btnIcon. Click + = new EventHandler ( Icon_Click ) ; // Open dropdown
btnIcon. Paint + = new PaintEventHandler ( Icon_Paint ) ; // Draw ico

// Label: Text
lblText. Dock = DockStyle. Fill ;
lblText. AutoSize = false ;
lblText. BackColor = backColor;
lblText. TextAlign = ContentAlignment. MiddleLeft ;
lblText. Padding = new Padding ( 8 , 0 , 0 , 0 ) ;
lblText. Font = new Font ( this . Font . Name , 10F ) ;
// -> Attach label events to user control event
lblText. Click + = new EventHandler ( Surface_Click ) ; // Select com
lblText. MouseEnter + = new EventHandler ( Surface_MouseEnter ) ;
lblText. MouseLeave + = new EventHandler ( Surface_MouseLeave ) ;

// User Control
this . Controls . Add ( lblText ) ; // 2
this . Controls . Add ( btnIcon ) ; // 1
this . Controls . Add ( cmbList ) ; // 0
this . MinimumSize = new Size ( 200 , 30 ) ;
this . Size = new Size ( 200 , 30 ) ;
this . ForeColor = Color. DimGray ;
this . Padding = new Padding ( borderSize ) ; // Border Size
this . Font = new Font ( this . Font . Name , 10F ) ;
base . BackColor = borderColor; // Border Color
this . ResumeLayout () ;
AdjustComboBoxDimensions () ;

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 3/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

4.- Create method to position ComboBox

// Private methods
private void AdjustComboBoxDimensions ()
{
cmbList. Width = lblText. Width ;
cmbList. Location = new Point ()
{
X = this . Width - this . Padding . Right - cmbList. Width ,
Y = lblText. Bottom - cmbList. Height
} ;
}

5.- Implement the event methods

// Event methods

// -> Default event

private void ComboBox_SelectedIndexChanged ( object sender, EventArgs e )
{
if ( OnSelectedIndexChanged! = null )
OnSelectedIndexChanged. Invoke ( sender, e ) ;
// Refresh text
lblText. Text = cmbList. Text ;
}
// -> Items actions
private void Icon_Click ( object sender, EventArgs e )
{
// Open dropdown list
cmbList. Select () ;
cmbList. DroppedDown = true ;
}
private void Surface_Click ( object sender, EventArgs e )
{
// Attach label click to user control click
this . OnClick ( e ) ;
// Select combo box
cmbList. Select () ;
if ( cmbList. DropDownStyle == ComboBoxStyle. DropDownList )
cmbList. DroppedDown = true ; // Open dropdown list
}
private void ComboBox_TextChanged ( object sender, EventArgs e )
{
// Refresh text
lblText. Text = cmbList. Text ;
}
https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 4/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

6.- Draw the icon (Down arrow)

// -> Draw icon
private void Icon_Paint ( object sender, PaintEventArgs e )
{
// Fields
int iconWidht = 14 ;
int iconHeight = 6 ;
var rectIcon = new Rectangle (( btnIcon. Width - iconWidht ) / 2 , (
Graphics graph = e. Graphics ;

// Draw arrow down icon

using ( GraphicsPath path = new GraphicsPath ())
using ( Pen pen = new Pen ( iconColor, 2 ))
{
graph. SmoothingMode = SmoothingMode. AntiAlias ;
path. AddLine ( rectIcon. X , rectIcon. Y , rectIcon. X + ( iconW
path. AddLine ( rectIcon. X + ( iconWidht / 2 ) , rectIcon. Botto
graph. DrawPath ( pen, path ) ;
}
}

7.- Create appearance properties

// Properties
// -> Appearance
[ Category ( "RJ Code - Appearance" )]
public new Color BackColor
{
get { return backColor; }
set
{
backColor = value ;
lblText. BackColor = backColor;
btnIcon. BackColor = backColor;
}
}

[ Category ( "RJ Code - Appearance" )]

public Color IconColor
{
get { return iconColor; }
set
{
iconColor = value ;
btnIcon. Invalidate () ; // Redraw icon

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 5/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

}
}

[ Category ( "RJ Code - Appearance" )]

public Color ListBackColor
{
get { return listBackColor; }
set
{
listBackColor = value ;
cmbList. BackColor = listBackColor;
}
}

[ Category ( "RJ Code - Appearance" )]

public Color ListTextColor
{
get { return listTextColor; }
set
{
listTextColor = value ;
cmbList. ForeColor = listTextColor;
}
}

[ Category ( "RJ Code - Appearance" )]

public Color BorderColor
{
get { return borderColor; }
set
{
borderColor = value ;
base . BackColor = borderColor; // Border Color
}
}

[ Category ( "RJ Code - Appearance" )]

public int BorderSize
{
get { return borderSize; }
set
{
borderSize = value ;
this . Padding = new Padding ( borderSize ) ; // Border Size
AdjustComboBoxDimensions () ;
}
}

[ Category ( "RJ Code - Appearance" )]

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 6/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

public override Color ForeColor

{
get { return base . ForeColor ; }
set
{
base . ForeColor = value ;
lblText. ForeColor = value ;
}
}

[ Category ( "RJ Code - Appearance" )]

public override Font Font
{
get { return base . Font ; }
set
{
base . Font = value ;
lblText. Font = value ;
cmbList. Font = value ; // Optional
}
}

[ Category ( "RJ Code - Appearance" )]

public string Texts
{
get { return lblText. Text ; }
set { lblText. Text = value ; }
}

[ Category ( "RJ Code - Appearance" )]

public ComboBoxStyle DropDownStyle
{
get { return cmbList. DropDownStyle ; }
set
{
if ( cmbList. DropDownStyle ! = ComboBoxStyle. Simple )
cmbList. DropDownStyle = value ;
}
}

8.- Create the data properties or functionalities

// Properties
// -> Data
[ Category ( "RJ Code - Data" )]
[ DesignerSerializationVisibility ( DesignerSerializationVisibility. Cont
[ Editor ( "System.Windows.Forms.Design.ListControlStringCollectionEditor
[ Localizable ( true )]
[ MergableProperty ( false )]
https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 7/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

public ComboBox. ObjectCollection Items

{
get { return cmbList. Items ; }
}

[ Category ( "RJ Code - Data" )]

[ AttributeProvider ( typeof ( IListSource ))]
[ DefaultValue ( null )]
public object DataSource
{
get { return cmbList. DataSource ; }
set { cmbList. DataSource = value ; }
}

[ Category ( "RJ Code - Data" )]

[ Browsable ( true )]
[ DesignerSerializationVisibility ( DesignerSerializationVisibility. Cont
[ Editor ( "System.Windows.Forms.Design.ListControlStringCollectionEditor
[ EditorBrowsable ( EditorBrowsableState. Always )]
[ Localizable ( true )]
public AutoCompleteStringCollection AutoCompleteCustomSource
{
get { return cmbList. AutoCompleteCustomSource ; }
set { cmbList. AutoCompleteCustomSource = value ; }
}

[ Category ( "RJ Code - Data" )]

[ Browsable ( true )]
[ DefaultValue ( AutoCompleteSource. None )]
[ EditorBrowsable ( EditorBrowsableState. Always )]
public AutoCompleteSource AutoCompleteSource
{
get { return cmbList. AutoCompleteSource ; }
set { cmbList. AutoCompleteSource = value ; }
}

[ Category ( "RJ Code - Data" )]

[ Browsable ( true )]
[ DefaultValue ( AutoCompleteMode. None )]
[ EditorBrowsable ( EditorBrowsableState. Always )]
public AutoCompleteMode AutoCompleteMode
{
get { return cmbList. AutoCompleteMode ; }
set { cmbList. AutoCompleteMode = value ; }
}

[ Category ( "RJ Code - Data" )]

[ Bindable ( true )]

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 8/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

[ Browsable ( false )]
[ DesignerSerializationVisibility ( DesignerSerializationVisibility. Hidd
public object SelectedItem
{
get { return cmbList. SelectedItem ; }
set { cmbList. SelectedItem = value ; }
}

[ Category ( "RJ Code - Data" )]

[ Browsable ( false )]
[ DesignerSerializationVisibility ( DesignerSerializationVisibility. Hidd
public int SelectedIndex
{
get { return cmbList. SelectedIndex ; }
set { cmbList. SelectedIndex = value ; }
}

[ Category ( "RJ Code - Data" )]

[ DefaultValue ( "" )]
[ Editor ( "System.Windows.Forms.Design.DataMemberFieldEditor, System.Des
[ TypeConverter ( "System.Windows.Forms.Design.DataMemberFieldConverter,
public string DisplayMember
{
get { return cmbList. DisplayMember ; }
set { cmbList. DisplayMember = value ; }
}

[ Category ( "RJ Code - Data" )]

[ DefaultValue ( "" )]
[ Editor ( "System.Windows.Forms.Design.DataMemberFieldEditor, System.Des
public string ValueMember
{
get { return cmbList. ValueMember ; }
set { cmbList. ValueMember = value ; }
}

9.- Attach events

// -> Attach label events to user control event
private void Surface_MouseLeave ( object sender, EventArgs e )
{
this . OnMouseLeave ( e ) ;
}

private void Surface_MouseEnter ( object sender, EventArgs e )

{
this . OnMouseEnter ( e ) ;
}
https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 9/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

// :::: +

10.- Cancel methods

// Overridden methods
protected override void OnResize ( EventArgs e )
{
base . OnResize ( e ) ;
AdjustComboBoxDimensions () ;
}

downloads
SEE FULL CODE (GITHUB)

See video tutorial

Custom ComboBox - Icon, Back, Text & Border Color …

Leave a reply
Your email address will not be published. Required fields are marked with *

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 10/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

Commentary

Name *

E-mail *

Web

Post the comment

Welcome to blog

Look for …

Follow me






https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 11/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

Category:
.NET
ASP .NET
C#
Mistakes
F#
Visual basic
Windows Forms

Layered Architecture

Database
MySQL
SQL Server
Custom controls
courses
.NET (Course)
Create .Net Installer
Full Login C #, VB, SQL Server
Software Patterns (Course)
OOP (Course)
Desk
GUI
Software Patterns
OOP
Uncategorized
Web

Recent logins
Circular Picture Box - Border Gradient color + Styles - C # & WinForms
Custom ProgressBar - WinForms & C #
Custom TextBox Full - Rounded & Placeholder - WinForm, C #
Custom ComboBox - Icon, Back, Text & Border Color - WinForm C #
https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 12/13
7/22/2021 Custom ComboBox - Icon, Back, Text & Border Color - WinForm C # - RJ Code Advance

Custom Text Box - Custom controls WinForm C #

Recent comments
gustavo on Custom Button - Custom controls WinForm C #
_Nooker in Modern Form + Font Awesome Icons, WinForm, C # - VB.NET

Impekly in Full Login + CRUD - C #, SQL Server- Advanced Level

Willgt27 in Login Cap 2- Start Session, Close Session and Show user data with C #, VB.Net,
Sql Server, WinForm- POO, Layered Architecture- Intermediate Level
Juan Vega in Chapter 4 / Create Installation Package - Application with Local Network
Database (LAN-MAN) - SQL Server, Visual Studio, WinForm, Layers

Terms and Conditions Privacy Policy Cookies policy






© 2021 RJ Code Advance - All Rights Reserved

https://rjcodeadvance.com/custom-combobox-icon-back-text-border-color-winform-c/ 13/13