Create vertical scrollbar with multiple pictures

Question

I am creating a project that needs to have a vertical scroll bar with multiple pictures like the server explorer in discord: For example: how can I mimic in WinForms in C# (not only having pictures scrolling but also the pictures can have events attached to them?

ummmm...set `this.panel1.AutoScroll = true;` or whaveter name you have, maybe ? Also, for the images, using `PictureBox`, maybe this helps ([round edges in picturebox](https://stackoverflow.com/questions/7731855/rounded-edges-in-picturebox-c-sharp)) ? — Ergis, Jan 06 '21 at 18:23

score 3 · Accepted Answer · answered Jan 06 '21 at 20:30

First you need add a Parent Panel, i'm used the pnServers.

Set property value: AutoScroll = True;

On Code Behind you can create a List of Rounded Pictures.

private void DiscordServerBarExample_Load(object sender, System.EventArgs e)
{
    // Example, in your case this looping is based on return (Database, Api, ...).
    for (int i = 1; i <= 10; i++)
    {
        Panel pnServer = new Panel()
        {
            Dock = DockStyle.Top,
            Height = pnServers.Width,
            Padding = new Padding(10)
        };

        RoundedPictureBox serverImage = new RoundedPictureBox()
        {
            SizeMode = PictureBoxSizeMode.CenterImage,
            Dock = DockStyle.Fill
        };

        serverImage.Image = Properties.Resources._255352;
        pnServer.Controls.Add(serverImage);

        pnServers.Controls.Add(pnServer);
    }
}

Rounded Picture Box Code:

public class RoundedPictureBox : PictureBox
{
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        using (GraphicsPath gp = new GraphicsPath())
        {
            gp.AddEllipse(0, 0, Width - 1, Height - 1);
            Region rg = new Region(gp);
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
            e.Graphics.DrawEllipse(new Pen(new SolidBrush(this.BackColor), 1), 0, 0, this.Width - 1, this.Height - 1);

            Region = rg;
        }
    }
}

And this is final result.

Create vertical scrollbar with multiple pictures

1 Answers1