Skip to content

Use 2 ImageBoxes side by side #53

@FrancoisBck

Description

@FrancoisBck

I'd like to use 2 ImageBoxes next to each other in a TableLayoutPanel

If the ZoomChanged event of one of the two images is triggered, the zoom value must be added to the other ImageBox.
The same applies to the Scroll event.

Problem: The left image is always fluid, regardless of whether I scroll on this image or on the other, but the right image is always laggy.

I'm guessing this isn't a problem with the ImageBox component but with Windows Form in general, which can't update 2 components at the same time?

Is there nevertheless a workaround?

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //Create both bitmaps

            //Left
            Bitmap left = new Bitmap(3000,3000); 
            Bitmap right = new Bitmap(3000, 3000);
            
            Graphics g = Graphics.FromImage(left);
            //Make light blue / blue pattern
            for (int x = 0; x < 3000; x += 500)
            {
                for (int y = 0; y < 3000; y += 500)
                {
                    g.FillRectangle(Brushes.LightBlue, x, y, 500, 500);
                    g.FillRectangle(Brushes.Blue, x + 250, y, 250, 250);
                    g.FillRectangle(Brushes.Blue, x, y + 250, 250, 250);
                }
            }

            //Make light green / green pattern
            g = Graphics.FromImage(right);
            for (int x = 0; x < 3000; x += 500)
            {
                for (int y = 0; y < 3000; y += 500)
                {
                    g.FillRectangle(Brushes.LightGreen, x, y, 500, 500);
                    g.FillRectangle(Brushes.Green, x + 250, y, 250, 250);
                    g.FillRectangle(Brushes.Green, x, y + 250, 250, 250);
                }
            }

            g.Dispose();

            imgBoxLeft.Image = left;
            imgBoxRight.Image = right;
        }
        //Event
        private void imgBoxLeft_Scroll(object sender, ScrollEventArgs e)
        {
            imgBoxRight.ScrollTo(imgBoxLeft.HorizontalScroll.Value, imgBoxLeft.VerticalScroll.Value);
        }

        private void imgBoxLeft_ZoomChanged(object sender, EventArgs e)
        {
            imgBoxRight.Zoom = imgBoxLeft.Zoom;
        }

        private void imgBoxRight_Scroll(object sender, ScrollEventArgs e)
        {
            imgBoxLeft.ScrollTo(imgBoxRight.HorizontalScroll.Value, imgBoxRight.VerticalScroll.Value);
        }

        private void imgBoxRight_ZoomChanged(object sender, EventArgs e)
        {
            imgBoxLeft.Zoom = imgBoxRight.Zoom;
        }
    }
Example.mp4

If you directly want to test, you can clone the test project: https://github.com/FrancoisBck/DualImageBox/tree/master

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions