How to add scrolling to Panel

Question

Basically, I've created an extension of the panel class that adds draws multiple bitmaps onto itself In order to create multiple musical staves. I've tried adding a vertical scroll bar onto the panel but that hasn't worked. My Paint procedure is similar to this

private void StavePanel_Paint(object sender, PaintEventArgs e)
{
    for(int i = 0; i < linenumber; i++)
    {
        Bitmap bmp = new Bitmap(Width, 200);
        //edit bmp to resemble stave
        e.Graphics.DrawImage(bmp,new Point(0,200*i);
    }
}

Answer 1

Just set the AutoScrollMinSize property:

panel1.AutoScrollMinSize = new Size(0, 1000);

During the paint event, you need to translate the positions of your drawing by using the TranslateTransform method. Also, you need to dispose your bitmaps after you draw them:

e.Graphics.TranslateTransform(panel1.AutoScrollPosition.X, panel1.AutoScrollPosition.Y);

using (Bitmap bmp = new Bitmap(Width, 200)) {
  //edit bmp to resemble stave
  e.Graphics.DrawImage(bmp,new Point(0,200*i);
}

or create and store them ahead of time to avoid that cost during the paint event.

Answer 2

Set the AutoScroll property to true.

You might also consider alternatives:

• FlowLayoutPanel and add PictureBoxes dynamically instead of painting.
• TableLayoutPanel and add PictureBoxes dynamically instead of painting.
• extend ListBox and set the DrawMode property to OwnerDrawFixed or OwnerDrawVariable and then override the methods OnPaint and OnMeasureItem (only for OwnerDrawVariable).

Answer 3

If you want to continue using your existing pattern of calling GDI code to paint your control you should add a scrollbar control and add an event handler to its change event. The change handler doesn't need to do anything other than call .Invalidate on the panel. .Invalidate is a signal to the control that it is "dirty" and needs to be redrawn. You will need to modify your painting code to offset the drawing in the inverse direction of the scrollbar value.

So if your scrollbar is at position 50, you should draw everything at Y - 50.

If you are using pure GDI drawing code there is no need to mess with the AutoScroll property at all. That is only used if your panel hosts an actual control that is larger than the panel.

Answer 4

As others mentioned, you need to set AutoScroll to true. But then, anytime you add or remove a bitmap (or at the beginning if they are fixed), you need to set the AutoScrollMinSize height using the formula bitmapCount * bitmapHeight. Also in your paint handler you need to consider the AutoScrollPosition.Y property.

Here is a small example of the concept in action:

using System;
using System.Drawing;
using System.Windows.Forms;

namespace Tests
{
    static class Program
    {
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            var form = new Form();
            var panel = new Panel { Dock = DockStyle.Fill, Parent = form };
            // Setting the AutoScrollMinSize
            int bitmapCount = 10;
            int bitmapHeight = 200;
            panel.AutoScrollMinSize = new Size(0, bitmapCount * bitmapHeight);
            panel.Paint += (sender, e) =>
            {
                // Considering the AutoScrollPosition.Y
                int offsetY = panel.AutoScrollPosition.Y;
                var state = offsetY != 0 ? e.Graphics.Save() : null;
                if (offsetY != 0) e.Graphics.TranslateTransform(0, offsetY);
                var rect = new Rectangle(0, 0, panel.ClientSize.Width, bitmapHeight);
                var sf = new StringFormat(StringFormat.GenericTypographic) { Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center };
                for (int i = 0; i < bitmapCount; i++)
                {
                    // Your bitmap drawing goes here
                    e.Graphics.FillRectangle(Brushes.Yellow, rect);
                    e.Graphics.DrawRectangle(Pens.Red, rect);
                    e.Graphics.DrawString("Bitmap #" + (i + 1), panel.Font, Brushes.Blue, rect, sf);
                    rect.Y += bitmapHeight;
                }
                if (state != null) e.Graphics.Restore(state);
            };
            Application.Run(form);
        }
    }
}

EDIT: As LarsTech correctly mentioned in the comments, you don't really need to set AutoScroll property in this case. All other remains the same.