Articles in this section
Category / Section

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

5 mins read

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

 

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

 

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!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied