locked
How do I get automatic scrollbars for a PictureBox RRS feed

  • Question

  • Using C# and VS2013, I've placed a PictureBox inside a Panel container which is, itself, placed into a TableLayoutPanel. I want to be able to display an image in one of two modes:

    1. Shrink-to-fit if larger than the PictureBox current size (or centered if smaller than the size)
    2. Full-size image with scroll bars that control the viewable portion of the image

    I can figure out how to set the properties on the Panel and PictureBox to get the first behavior. I've been unable to figure out how to set the properties to get the second behavior. How do I make this work automagically? It seems to me, from reading stuff, that setting the Panel's autoscroll property to True should do this, but how do I anchor the PictureBox within the Panel so I can resize the full form and have the Panel (and thus the PictureBox within it) resize along with that?

    Thanks for any help.


    Jason Zions


    Tuesday, December 23, 2014 8:27 AM

Answers

  • Using C# and VS2013, I've placed a PictureBox inside a Panel container which is, itself, placed into a TableLayoutPanel. I want to be able to display an image in one of two modes:

    1. Shrink-to-fit if larger than the PictureBox current size (or centered if smaller than the size)
    2. Full-size image with scroll bars that control the viewable portion of the image

    I can figure out how to set the properties on the Panel and PictureBox to get the first behavior. I've been unable to figure out how to set the properties to get the second behavior. How do I make this work automagically? It seems to me, from reading stuff, that setting the Panel's autoscroll property to True should do this, but how do I anchor the PictureBox within the Panel so I can resize the full form and have the Panel (and thus the PictureBox within it) resize along with that?

    Thanks for any help.


    Jason Zions


    Hello Jason,

    We could doc the panel to one cell of that tablelayoutpanel, and then undock that picturebox, next set the pictureBox's autosize mode to auto, and the way to deal with the picturebox location could be the following one.

    private void Form1_Load(object sender, EventArgs e) { this.pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize; this.panel1.AutoScroll = true;

    //the border is just for checking that size and picturebox location

    this.panel1.BorderStyle = BorderStyle.FixedSingle; } private void panel1_Resize(object sender, EventArgs e) { if (this.pictureBox1.Image != null) { Size picSize = this.pictureBox1.Image.Size; Size panSize = this.panel1.Size; if (picSize.Height<panSize.Height) { this.pictureBox1.Location = new Point(this.pictureBox1.Location.X, (panSize.Height - picSize.Height) / 2); } else { this.pictureBox1.Location = new Point(this.pictureBox1.Location.X, 0); } if (picSize.Width < panSize.Width) { this.pictureBox1.Location = new Point((panSize.Width - picSize.Width) / 2, this.pictureBox1.Location.Y); } else { this.pictureBox1.Location = new Point(0, this.pictureBox1.Location.Y); } } }

    Result:

    You could download that sample by this link.

    Regards.

    Carl


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.




    Wednesday, December 24, 2014 3:07 AM
  • Comprehensive and clear.

    • I can't achieve my goal with pure setting of attributes; a bit of runtime code is required.
    • I could get the resizing and scrollbars to be handled automatically if I always put the image at (0,0); the runtime code just handles centering of the image if its dimension is smaller than that of the panel.
    • The picturebox has to be undocked when placed inside the panel

    Thanks for the help; much appreciated.


    Jason Zions

    • Marked as answer by Carl Cai Thursday, December 25, 2014 5:22 AM
    Wednesday, December 24, 2014 10:42 AM

All replies

  • Using C# and VS2013, I've placed a PictureBox inside a Panel container which is, itself, placed into a TableLayoutPanel. I want to be able to display an image in one of two modes:

    1. Shrink-to-fit if larger than the PictureBox current size (or centered if smaller than the size)
    2. Full-size image with scroll bars that control the viewable portion of the image

    I can figure out how to set the properties on the Panel and PictureBox to get the first behavior. I've been unable to figure out how to set the properties to get the second behavior. How do I make this work automagically? It seems to me, from reading stuff, that setting the Panel's autoscroll property to True should do this, but how do I anchor the PictureBox within the Panel so I can resize the full form and have the Panel (and thus the PictureBox within it) resize along with that?

    Thanks for any help.


    Jason Zions


    Hello Jason,

    We could doc the panel to one cell of that tablelayoutpanel, and then undock that picturebox, next set the pictureBox's autosize mode to auto, and the way to deal with the picturebox location could be the following one.

    private void Form1_Load(object sender, EventArgs e) { this.pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize; this.panel1.AutoScroll = true;

    //the border is just for checking that size and picturebox location

    this.panel1.BorderStyle = BorderStyle.FixedSingle; } private void panel1_Resize(object sender, EventArgs e) { if (this.pictureBox1.Image != null) { Size picSize = this.pictureBox1.Image.Size; Size panSize = this.panel1.Size; if (picSize.Height<panSize.Height) { this.pictureBox1.Location = new Point(this.pictureBox1.Location.X, (panSize.Height - picSize.Height) / 2); } else { this.pictureBox1.Location = new Point(this.pictureBox1.Location.X, 0); } if (picSize.Width < panSize.Width) { this.pictureBox1.Location = new Point((panSize.Width - picSize.Width) / 2, this.pictureBox1.Location.Y); } else { this.pictureBox1.Location = new Point(0, this.pictureBox1.Location.Y); } } }

    Result:

    You could download that sample by this link.

    Regards.

    Carl


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.




    Wednesday, December 24, 2014 3:07 AM
  • Comprehensive and clear.

    • I can't achieve my goal with pure setting of attributes; a bit of runtime code is required.
    • I could get the resizing and scrollbars to be handled automatically if I always put the image at (0,0); the runtime code just handles centering of the image if its dimension is smaller than that of the panel.
    • The picturebox has to be undocked when placed inside the panel

    Thanks for the help; much appreciated.


    Jason Zions

    • Marked as answer by Carl Cai Thursday, December 25, 2014 5:22 AM
    Wednesday, December 24, 2014 10:42 AM
  • Comprehensive and clear.

    • I can't achieve my goal with pure setting of attributes; a bit of runtime code is required.
    • I could get the resizing and scrollbars to be handled automatically if I always put the image at (0,0); the runtime code just handles centering of the image if its dimension is smaller than that of the panel.
    • The picturebox has to be undocked when placed inside the panel

    Thanks for the help; much appreciated.


    Jason Zions

    Hi Jason,

    Glad that helps and thanks for your pointing these tips.

    Regards.

    Carl


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, December 25, 2014 5:23 AM