How to custom draw ControlItem and use it in the ToolStripDropDownButton?
Customize the appearance of controlitem
You can customize the appearance of the WinForms Ribbon by following the steps.
1. Create the custom ControlItem class that is inherited from the ControlItem.
2. Customize according to the requirement.
3. Add it as child of the ToolStripDropDown button dropdown.
C#
//Hides the image margin. ( ( ToolStripDropDownMenu )toolStripDropDownButton1.DropDown ).ShowImageMargin = false; //Hides the check mark. ( ( ToolStripDropDownMenu )toolStripDropDownButton1.DropDown ).ShowCheckMargin = false; this.toolStripDropDownButton1.DropDownItems.Add(new ToolStripControlHost( new ControlItemEx() { BackColor = Color.LightCyan, ForeColor = Color.Blue, HeaderFontColor = Color.Red, HeaderText = "Syncfuison", SubText = "A description for the ControlItem", ItemImage = Properties.Resources.Wikipedia_16 } ) ); this.toolStripDropDownButton1.DropDownItems.Add(new ToolStripControlHost( new ControlItemEx() { BackColor = Color.Pink, ForeColor = Color.Red, HeaderFontColor = Color.Blue, HeaderText = "Syncfusion", SubText = "A description for ControlItem", ItemImage = Properties.Resources.Wikipedia_24 } ) ); this.toolStripDropDownButton1.DropDownItems.Add(new ToolStripControlHost( new ControlItemEx() { BackColor = Color.Gray, ForeColor = Color.Blue, HeaderFontColor = Color.Red, HeaderText = "Syncfusion", SubText = "A description for ControlItem", ItemImage = Properties.Resources.Wikipedia_32 } ) ); this.toolStripDropDownButton1.DropDownItems.Add(new ToolStripControlHost( new ControlItemEx() { BackColor = Color.LightBlue, Height = 70, ForeColor = Color.Red, HeaderFontColor = Color.Blue, HeaderText = "Syncfusion", SubText = "A very very very very very very very very very long description for ControlItem", ItemImage = Properties.Resources.Wikipedia_48 } ) ); public class ControlItemEx : ControlItem { #region Constructor public ControlItemEx() { //Initializes. } #endregion #region Variables //Initializes the itemImage. private Image itemImage = null; //Initializes the Header font color. private Color m_headerfontcolor = Color.Gray; int SubTextYBound = 20; Double hFontSize = 8.10; Double sFontSize = 8.10; #endregion #region Property /// <summary> ///Gets or Sets the color of the HeaderText. /// </summary> public Color HeaderFontColor { get { return m_headerfontcolor; } set { m_headerfontcolor = value; } } /// <summary> /// Gets or Sets the value for the itemImage. /// </summary> public new Image ItemImage { get { return itemImage; } set { itemImage = value; } } #endregion #region Overrides protected override void OnPaint(PaintEventArgs e) { //Initializes the String format. StringFormat format = new StringFormat(); format.Alignment = StringAlignment.Near; format.LineAlignment = StringAlignment.Near; e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; Rectangle HeaderRectangle = new Rectangle(55, 18, this.Width - 55, this.Height - 20); //Draws the item image. if (this.itemImage != null) e.Graphics.DrawImage(itemImage, new Rectangle(10, 10, 40, this.Height - 18)); hFontSize = this.Font.Size; sFontSize = this.SubTextFont.Size; if (e.Graphics.DpiX > 96) { hFontSize = this.SubTextFont.Size / (e.Graphics.DpiX / 96); sFontSize = this.SubTextFont.Size / (float)(e.Graphics.DpiX / 96); } Font hFont = new Font(this.HeaderTextFont.OriginalFontName, (float)hFontSize, this.HeaderTextFont.Style); Font sFont = new Font(this.SubTextFont.OriginalFontName, (float)sFontSize, this.SubTextFont.Style); SubTextYBound = TextRenderer.MeasureText(HeaderText, hFont).Height + 10; Rectangle rect = new Rectangle(55, SubTextYBound + 10, this.Width - 55, this.Height - (SubTextYBound)); //Draws the HeaderText. if (HeaderText != string.Empty) e.Graphics.DrawString(HeaderText, hFont, new SolidBrush(HeaderFontColor), HeaderRectangle, format); //Draws the SubText. if (SubText != String.Empty) e.Graphics.DrawString(SubText, sFont, new SolidBrush(ForeColor), rect, format); } #endregion }
VB
'Hides the image margin. CType(toolStripDropDownButton1.DropDown, ToolStripDropDownMenu).ShowImageMargin = False 'Hides the check mark. CType(toolStripDropDownButton1.DropDown, ToolStripDropDownMenu).ShowCheckMargin = False Me.toolStripDropDownButton1.DropDownItems.Add(New ToolStripControlHost(New ControlItemEx() With {.BackColor = Color.LightCyan, .ForeColor = Color.Blue, .HeaderFontColor = Color.Red, .HeaderText = "Syncfuison", .SubText = "A description for the ControlItem", .ItemImage = My.Resources.Wikipedia_16})) Me.toolStripDropDownButton1.DropDownItems.Add(New ToolStripControlHost(New ControlItemEx() With {.BackColor = Color.Pink, .ForeColor = Color.Red, .HeaderFontColor = Color.Blue, .HeaderText = "Syncfusion", .SubText = "A description for ControlItem", .ItemImage = My.Resources.Wikipedia_24})) Me.toolStripDropDownButton1.DropDownItems.Add(New ToolStripControlHost(New ControlItemEx() With {.BackColor = Color.Gray, .ForeColor = Color.Blue, .HeaderFontColor = Color.Red, .HeaderText = "Syncfusion", .SubText = "A description for ControlItem", .ItemImage = My.Resources.Wikipedia_32})) Me.toolStripDropDownButton1.DropDownItems.Add(New ToolStripControlHost(New ControlItemEx() With {.BackColor = Color.LightBlue, .Height = 70, .ForeColor = Color.Red, .HeaderFontColor = Color.Blue, .HeaderText = "Syncfusion", .SubText = "A very very very very very very very very very long description for ControlItem", .ItemImage = My.Resources.Wikipedia_48})) Public Class ControlItemEx Inherits ControlItem #Region "Constructor" Public Sub New() 'Initializes. End Sub #End Region #Region "Variables" 'Initializes the itemImage. Private itemImage_Renamed As Image = Nothing 'Initializes the Header font color. Private m_headerfontcolor As Color = Color.Gray Private SubTextYBound As Integer = 20 Private hFontSize As Double = 8.10 Private sFontSize As Double = 8.10 #End Region #Region "Property" ''' <summary>. ''' Gets or Sets the color of the HeaderText. ''' </summary>. Public Property HeaderFontColor() As Color Get Return m_headerfontcolor End Get Set(ByVal value As Color) m_headerfontcolor = value End Set End Property ''' <summary>. ''' Gets or Sets the value for the itemImage. ''' </summary>. Public Shadows Property ItemImage() As Image Get Return itemImage_Renamed End Get Set(ByVal value As Image) itemImage_Renamed = value End Set End Property #End Region #Region "Overrides" Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) 'Initializes the String format. Dim format As New StringFormat() format.Alignment = StringAlignment.Near format.LineAlignment = StringAlignment.Near e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias Dim HeaderRectangle As New Rectangle(55, 18, Me.Width - 55, Me.Height - 20) 'Draws the item image. If Me.itemImage_Renamed IsNot Nothing Then e.Graphics.DrawImage(itemImage_Renamed, New Rectangle(10, 10, 40, Me.Height - 18)) End If hFontSize = Me.Font.Size sFontSize = Me.SubTextFont.Size If e.Graphics.DpiX > 96 Then hFontSize = Me.SubTextFont.Size / (e.Graphics.DpiX / 96) sFontSize = Me.SubTextFont.Size / CSng(e.Graphics.DpiX / 96) End If Dim hFont As New Font(Me.HeaderTextFont.OriginalFontName, CSng(hFontSize), Me.HeaderTextFont.Style) Dim sFont As New Font(Me.SubTextFont.OriginalFontName, CSng(sFontSize), Me.SubTextFont.Style) SubTextYBound = TextRenderer.MeasureText(HeaderText, hFont).Height + 10 Dim rect As New Rectangle(55, SubTextYBound + 10, Me.Width - 55, Me.Height - (SubTextYBound)) 'Draws the HeaderText. If HeaderText <> String.Empty Then e.Graphics.DrawString(HeaderText, hFont, New SolidBrush(HeaderFontColor), HeaderRectangle, format) End If 'Draws the SubText. If SubText <> String.Empty Then e.Graphics.DrawString(SubText, sFont, New SolidBrush(ForeColor), rect, format) End If End Sub #End Region End Class
In the ToolStripDropDownbutton, the ToolStripMenuItem is added to its item, by default.
Figure 1: ToolStripDropDown item customized by using the ControlItem
Samples:
C#: RibbonGallary_ControlItem_C#
VB: RibbonGallary_ControlItem_VB
Reference link: https://help.syncfusion.com/windowsforms/ribbon/getting-started#add-button-controls
Conclusion
I hope you enjoyed learning about how to custom draw ControlItem and use it in the ToolStripDropDownButton.
You can refer to our WinForms Ribbon’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinForms Ribbon documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinForms Ribbon and other WinForms components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!