Search code examples
c#widthpicturebox

Extending the width of a picturebox from the left side


So I want to increase the width of a picturebox from the left side of the picturebox and have been unable to find a way to do this...

imgBeam1.Left += xChange;
imgBeam1.Width -= xChange; //I want this to move the width from the left side.

My plan is to move the picturebox to the right, while extending the width to the left.

Can anyone help?

Maybe there is a more creative way of doing this?

EDIT: This was for a DBZ beam race / beam struggle game I was working on in my spare time, and in the beam struggle part of the game, the character of the right side of the form has a much nicer way of displaying the beam as I can move the width of the picturebox to the right, while moving the picturebox left. While with the character on the left side of the form, I can only extend the width to the right which just shows sections of the image at a time.

Because of how images are loaded in to a picturebox (from left to right with the leftside showing first) I'm not sure if I could get the same effect. And I cannot find a way to extend the left side of the pictureboxes width anyways.

But thankyou for your replys. I made this account today, and didn't think this would be too hard to explain, but it was. Maybe next time I will show images instead, as it's much easier to explain that way. Thanks!

EDIT 2: -visual explanation

enter image description here


Solution

  • From what I understand your post is not really about changing the outer size of the PictureBox but about moving the Image inside it.

    But this is not possible. All you can do is choose between the two SizeModes:

    • Normal will put the image to the top left.
    • Center will, yes, center it in the control.

    So to make it look like it is moving or placed differently, e.g. aligned to the right you can use this workaround:

    • Add the PictureBox to a Panel.

    • Make the Panel as small as you had your PictureBox to make it act as a 'viewport'.

    • Make the Image larger, maybe even full sized, i.e. SizeMode Autosize.

    • Remove the Border from the PictureBox and add it to the Panel instead.

    • Keep the PictureBox Backcolor Transparent.

    enter image description here

    Now you can move the PictureBox inside the Panel and it will look as if only the Image is moving under the viewport..:

    enter image description here

    Here is the code to move it left and back right with the mouse :

    Point mDown = Point.Empty;
    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        mDown = e.Location;
    }
    
    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.Button.HasFlag(MouseButtons.Left))
            pictureBox1.Left += e.X - mDown.X;
    }
    

    Note that the large PictureBox is nested inside the small Panel, not the other way around!

    Of course animations or other layout changes are also possible..