How to: Implement a Custom ToolStripRenderer

You can customize the appearance of a ToolStrip control by implementing a class that derives from ToolStripRenderer. This gives you the flexibility to create an appearance that differs from the appearance provided the ToolStripProfessionalRenderer and ToolStripSystemRenderer classes.


The following code example demonstrates how to implement a custom ToolStripRenderer class. In this example, the GridStrip control implements a sliding-tile puzzle, which allows the user to move tiles in a table layout to form an image. A custom ToolStrip control arranges its ToolStripButton controls in a grid layout. The layout contains one empty cell, into which the user can slide an adjacent tile by using a drag-and-drop operation. Tiles that the user can move are highlighted.

The GridStripRenderer class customizes three aspects of the GridStrip control's appearance:

  • GridStrip border

  • ToolStripButton border

  • ToolStripButton image

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Text;
using System.Windows.Forms;
using System.Windows.Forms.Layout;

namespace GridStripLib
    // The following class implements a sliding-tile puzzle.
    // The GridStrip control is a custom ToolStrip that arranges
    // its ToolStripButton controls in a grid layout. There is 
    // one empty cell, into which the user can slide an adjacent
    // tile with a drag-and-drop operation. Tiles that are eligible 
    // for moving are highlighted.
    public class GridStrip : ToolStrip
        // The button that is the drag source.
        private ToolStripButton dragButton = null;

        // Settings for the ToolStrip control's TableLayoutPanel.
        // This provides access to the cell position of each
        // ToolStripButton.
        private TableLayoutSettings tableSettings = null;

        // The empty cell. ToolStripButton controls that are
        // adjacent to this button can be moved to this button's
        // cell position.
        private ToolStripButton emptyCellButton = null;

        // The dimensions of each tile. A tile is represented
        // by a ToolStripButton controls.
        private Size tileSize = new Size(128, 128);

        // The number of rows in the GridStrip control.
        private readonly int rows = 5;

        // The number of columns in the GridStrip control.
        private readonly int columns = 5;

        // The one-time initialzation behavior is enforced
        // with this field. For more information, see the 
        // OnPaint method.
        private bool firstTime = false;

        // This is a required by the Windows Forms designer.
        private System.ComponentModel.IContainer components;
        // The default constructor.  
        public GridStrip()


        // This property exposes the empty cell to the 
        // GridStripRenderer class.
        internal ToolStripButton EmptyCell
                return this.emptyCellButton;

        // This utility method initializes the TableLayoutPanel 
        // which contains the ToolStripButton controls.
        private void InitializeTableLayoutSettings()
            // Specify the numbers of rows and columns in the GridStrip control.
            this.tableSettings = base.LayoutSettings as TableLayoutSettings;
            this.tableSettings.ColumnCount = this.rows;
            this.tableSettings.RowCount = this.columns;

            // Create a dummy bitmap with the dimensions of each tile.
            // The GridStrip control sizes itself based on these dimensions.
            Bitmap b = new Bitmap(tileSize.Width, tileSize.Height);

            // Populate the GridStrip control with ToolStripButton controls.
            for (int i = 0; i < this.tableSettings.ColumnCount; i++)
                for (int j = 0; j < this.tableSettings.RowCount; j++)
                    // Create a new ToolStripButton control.
                    ToolStripButton btn = new ToolStripButton();
                    btn.DisplayStyle = ToolStripItemDisplayStyle.Image;
                    btn.Image = b;
                    btn.ImageAlign = ContentAlignment.MiddleCenter;
                    btn.ImageScaling = ToolStripItemImageScaling.None;
                    btn.Margin = Padding.Empty;
                    btn.Padding = Padding.Empty;

                    // Add the new ToolStripButton control to the GridStrip.

                    // Set the cell position of the ToolStripButton control.
                    TableLayoutPanelCellPosition cellPos = new TableLayoutPanelCellPosition(i, j);
                    this.tableSettings.SetCellPosition(btn, cellPos);

                    // If this is the ToolStripButton control at cell (0,0),
                    // assign it as the empty cell button.
                    if( i == 0 && j == 0 )
                        btn.Text = "Empty Cell";
                        btn.Image = b;
                        this.emptyCellButton = btn;

        // This method defines the Paint event behavior.
        // The GridStripRenderer requires that the GridStrip
        // be fully layed out when it is renders, so this
        // initialization code cannot be placed in the
        // GridStrip constructor. By the time the Paint
        // event is raised, the control layout has been 
        // completed, so the GridStripRenderer can paint
        // correctly. This one-time initialization is
        // implemented with the firstTime field.
        protected override void OnPaint(PaintEventArgs e)

            if (!this.firstTime)
                this.Renderer = new GridStripRenderer();

                // Comment this line to see the unscrambled image.
                this.firstTime = true;

        // This utility method changes the ToolStripButton control 
        // positions in the TableLayoutPanel. This scrambles the 
        // buttons to initialize the puzzle.
        private void ScrambleButtons()
            int i = 0;
            int lastElement = this.Items.Count - 1;

            while ( (i != lastElement ) &&
                    (lastElement - i > 1) )
                TableLayoutPanelCellPosition pos1 = 

                TableLayoutPanelCellPosition pos2 = 



        // This method defines the MouseDown event behavior. 
        // If the user has clicked on a valid drag source, 
        // the drag operation starts.
        protected override void OnMouseDown(MouseEventArgs mea)

            ToolStripButton btn = this.GetItemAt(mea.Location) as ToolStripButton;

            if (btn != null)
                if (this.IsValidDragSource(btn))
                    this.dragButton = btn;

        // This method defines the MouseMove event behavior. 
        protected override void OnMouseMove(MouseEventArgs mea)

            // Is a drag operation pending?
            if (this.dragButton != null)
                // A drag operation is pending. Call DoDragDrop to 
                // determine the disposition of the operation.
                DragDropEffects dropEffect = this.DoDragDrop(
                    new DataObject(this.dragButton), 

        // This method defines the DragOver event behavior. 
        protected override void OnDragOver(DragEventArgs dea)

            // Get the ToolStripButton control 
            // at the given mouse position.
            Point p = new Point(dea.X, dea.Y);
            ToolStripButton item = this.GetItemAt(
                this.PointToClient(p)) as ToolStripButton;

            // If the ToolStripButton control is the empty cell,
            // indicate that the move operation is valid.
            if( item == this.emptyCellButton )
                // Set the drag operation to indicate a valid move.
                dea.Effect = DragDropEffects.Move;

        // This method defines the DragDrop event behavior. 
        protected override void OnDragDrop(DragEventArgs dea)

            // Did a valid move operation occur?
            if (dea.Effect == DragDropEffects.Move)
                // The move operation is valid. Adjust the state
                // of the GridStrip control's TableLayoutPanel,
                // by swapping the positions of the source button
                // and the empty cell button.

                // Get the cell of the control to move.
                TableLayoutPanelCellPosition sourcePos = 

                // Get the cell of the emptyCellButton.
                TableLayoutPanelCellPosition dropPos = 

                // Move the control to the empty cell.
                tableSettings.SetCellPosition(this.dragButton, dropPos);

                // Set the position of the empty cell to 
                // that of the previously occupied cell.
                tableSettings.SetCellPosition(this.emptyCellButton, sourcePos);

                // Reset the drag operation.
                this.dragButton = null;

        // This method defines the DragLeave event behavior. 
        // If the mouse leaves the client area of the GridStrip
        // control, the drag operation is canceled.
        protected override void OnDragLeave(EventArgs e)

            // Reset the drag operation.
            this.dragButton = null;

        // This method defines the ueryContinueDrag event behavior. 
        // If the mouse leaves the client area of the GridStrip
        // control, the drag operation is canceled.
        protected override void OnQueryContinueDrag(QueryContinueDragEventArgs qcdevent)

            // Get the current mouse position, in screen coordinates.
            Point mousePos = this.PointToClient(Control.MousePosition);

            // If the mouse position is outside the GridStrip control's
            // client area, cancel the drag operation. Be sure to
            // transform the mouse's screen coordinates to client coordinates. 
            if (!this.ClientRectangle.Contains(mousePos))
                qcdevent.Action = DragAction.Cancel;

        // This utility method determines if a button
        // is positioned relative to the empty cell 
        // such that it can be dragged into the empty cell.
        private bool IsValidDragSource(ToolStripButton b)
            TableLayoutPanelCellPosition sourcePos = 

            TableLayoutPanelCellPosition emptyPos = 

            return (IsValidDragSource(sourcePos, emptyPos));

        // This utility method determines if a cell position
        // is adjacent to the empty cell.
        internal static bool IsValidDragSource(
            TableLayoutPanelCellPosition sourcePos, 
            TableLayoutPanelCellPosition emptyPos)
            bool returnValue = false;

            // A cell is considered to be a valid drag source if it
            // is adjacent to the empty cell. Cells that are positioned
            // on a diagonal are not valid.
            if (((sourcePos.Column == emptyPos.Column - 1) && (sourcePos.Row == emptyPos.Row)) ||
                ((sourcePos.Column == emptyPos.Column + 1) && (sourcePos.Row == emptyPos.Row)) ||
                ((sourcePos.Column == emptyPos.Column) && (sourcePos.Row == emptyPos.Row - 1)) ||
                ((sourcePos.Column == emptyPos.Column) && (sourcePos.Row == emptyPos.Row + 1)))
                returnValue = true;

            return returnValue;

        // This class implements a custom ToolStripRenderer for the 
        // GridStrip control. It customizes three aspects of the 
        // GridStrip control's appearance: GridStrip border, 
        // ToolStripButton border, and ToolStripButton image.
        internal class GridStripRenderer : ToolStripRenderer
            // The style of the empty cell's text.
            private static StringFormat style = new StringFormat();

            // The thickness (width or height) of a 
            // ToolStripButton control's border.
            static int borderThickness = 2;

            // The main bitmap that is the source for the 
            // subimagesthat are assigned to individual 
            // ToolStripButton controls.
            private Bitmap bmp = null;

            // The brush that paints the background of 
            // the GridStrip control.
            private Brush backgroundBrush = null;

            // This is the static constructor. It initializes the
            // StringFormat for drawing the text in the empty cell.
            static GridStripRenderer()
                style.Alignment = StringAlignment.Center;
                style.LineAlignment = StringAlignment.Center;

            // This method initializes the GridStripRenderer by
            // creating the image that is used as the source for
            // the individual button images.
            protected override void Initialize(ToolStrip ts)


            // This method initializes an individual ToolStripButton
            // control. It copies a subimage from the GridStripRenderer's
            // main image, according to the position and size of 
            // the ToolStripButton.
            protected override void InitializeItem(ToolStripItem item)

                GridStrip gs = item.Owner as GridStrip;

                // The empty cell does not receive a subimage.
                if ((item is ToolStripButton) &&
                    (item != gs.EmptyCell))
                    // Copy the subimage from the appropriate 
                    // part of the main image.
                    Bitmap subImage = bmp.Clone(

                    // Assign the subimage to the ToolStripButton
                    // control's Image property.
                    item.Image = subImage;

            // This utility method creates the main image that
            // is the source for the subimages of the individual 
            // ToolStripButton controls.
            private void InitializeBitmap(ToolStrip toolStrip)
                // Create the main bitmap, into which the image is drawn.
                this.bmp = new Bitmap(

                // Draw a fancy pattern. This could be any image or drawing.
                using (Graphics g = Graphics.FromImage(bmp))
                    // Draw smoothed lines.
                    g.SmoothingMode = SmoothingMode.AntiAlias;
                    // Draw the image. In this case, it is 
                    // a number of concentric ellipses. 
                    for (int i = 0; i < toolStrip.Size.Width; i += 8)
                        g.DrawEllipse(Pens.Blue, 0, 0, i, i);

            // This method draws a border around the GridStrip control.
            protected override void OnRenderToolStripBorder(
                ToolStripRenderEventArgs e)


            // This method renders the GridStrip control's background.
            protected override void OnRenderToolStripBackground(
                ToolStripRenderEventArgs e)

                // This late initialization is a workaround. The gradient
                // depends on the bounds of the GridStrip control. The bounds 
                // are dependent on the layout engine, which hasn't fully
                // performed layout by the time the Initialize method runs.
                if (this.backgroundBrush == null)
                    this.backgroundBrush = new LinearGradientBrush(

                // Paint the GridStrip control's background.

            // This method draws a border around the button's image. If the background
            // to be rendered belongs to the empty cell, a string is drawn. Otherwise,
            // a border is drawn at the edges of the button.
            protected override void OnRenderButtonBackground(
                ToolStripItemRenderEventArgs e)

                // Define some local variables for convenience.
                Graphics g = e.Graphics;
                GridStrip gs = e.ToolStrip as GridStrip;
                ToolStripButton gsb = e.Item as ToolStripButton;

                // Calculate the rectangle around which the border is painted.
                Rectangle imageRectangle = new Rectangle(
                    e.Item.Width - 2 * borderThickness, 
                    e.Item.Height - 2 * borderThickness);

                // If rendering the empty cell background, draw an 
                // explanatory string, centered in the ToolStripButton.
                if (gsb == gs.EmptyCell)
                        "Drag to here",
                        imageRectangle, style);
                    // If the button can be a drag source, paint its border red.
                    // otherwise, paint its border a dark color.
                    Brush b = gs.IsValidDragSource(gsb) ? b = 
                        Brushes.Red : SystemBrushes.ControlDarkDark;

                    // Draw the top segment of the border.
                    Rectangle borderSegment = new Rectangle(
                    g.FillRectangle(b, borderSegment);

                    // Draw the right segment.
                    borderSegment = new Rectangle(
                        e.Item.Bounds.Right - imageRectangle.Right,
                    g.FillRectangle(b, borderSegment);

                    // Draw the left segment.
                    borderSegment = new Rectangle(
                    g.FillRectangle(b, borderSegment);

                    // Draw the bottom segment.
                    borderSegment = new Rectangle(
                        e.Item.Bounds.Bottom - imageRectangle.Bottom);
                    g.FillRectangle(b, borderSegment);

        #region Windows Forms Designer generated code

        private void InitializeComponent()
            this.components = new System.ComponentModel.Container();
            // GridStrip
            this.AllowDrop = true;
            this.BackgroundImageLayout = System.Windows.Forms.ImageLayout.None;
            this.CanOverflow = false;
            this.Dock = System.Windows.Forms.DockStyle.None;
            this.GripStyle = System.Windows.Forms.ToolStripGripStyle.Hidden;
            this.LayoutStyle = System.Windows.Forms.ToolStripLayoutStyle.Table;




Compiling the Code

This example requires:

  • References to the System.Drawing and System.Windows.Forms assemblies.

For information about building this example from the command line for Visual Basic or Visual C#, see Building from the Command Line (Visual Basic) or Command-Line Building. You can also build this example in Visual Studio by pasting the code into a new project. How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio

See Also

Community Additions