)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to custom draw ControlItem and use it in the ToolStripDropDownButton?

Platform: WinForms |
Control: RibbonControlAdv |
Published Date: September 29, 2015 |
Last Revised Date: February 4, 2020

Customize the appearance of controlitem

You can customize the appearance of the ControlItem 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

 

Note:

In the ToolStripDropDownbutton, the ToolStripMenuItem is added to its item, by default.

 

Toolstripdropdown item customized by using the controlitem

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

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon