How to center image to the picturebox?

Question

Hi all,

I have this code witch bring image from source to be displayed into picturebox. but when it comes it's displayed at the corner of the picturebox and I wnt it to be desplayed at the center of the picturebox

Here's the code

 Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click
        Dim ofd As New OpenFileDialog
        ofd.AddExtension = True
        ofd.CheckFileExists = True
        ofd.CheckPathExists = True
        ofd.Filter = "JPEG files (*.jpg)|*.jpg|GIF files (*.gif)|*.gif|PNG files (*.png)|*.png|BMP files (*.bmp)|*.bmp"""
        ofd.FilterIndex = 1
        ofd.InitialDirectory = My.Computer.FileSystem.SpecialDirectories.Desktop
        ofd.Multiselect = False
        ofd.RestoreDirectory = True
        ofd.Title = "Select the files that you want to add to the the list"
        If ofd.ShowDialog() = DialogResult.OK Then
            source = Image.FromFile(ofd.FileName)
            PictureBox1.Image = source
        End If

Thanks advance.

Answer 1

Hi

Have a look at:

PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage

---

Regards Les, Livingston, Scotland

Answer 2

Hi,

https://msdn.microsoft.com/en-us/library/system.windows.forms.pictureboxsizemode(v=vs.110).aspx

Try PictureBoxSizeMode.CenterImage

Regards,

  Thorsten

Answer 3

Hi

Have a look at:

PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage

---

Regards Les, Livingston, Scotland

I've used PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage but this option clip the image and ruin it after all it doesn't work as I expected

Answer 4

Hi,

https://msdn.microsoft.com/en-us/library/system.windows.forms.pictureboxsizemode(v=vs.110).aspx

Try PictureBoxSizeMode.CenterImage

Regards,

  Thorsten

I've used PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage but this option clip the image and ruin it after all it doesn't work as I expected

Answer 5

I've used PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage but this option clip the image and ruin it after all it doesn't work as I expected

That sizemode will center the image, which is what you asked.  When the image is larger than the picturebox size then it will be clipped on either two or four edges, depending on shape. There is no other option for 'centered'

If you mean that you want the image displayed at its default size, but clipped on the right and bottom edges only (if required), then use normal.   If that is not what you are describing then try each of the other modes in turn until you get the effect you want.

Answer 6

 So, check the size of the Image compared to the client size of the PictureBox and if the Image is wider or taller than the PictureBox,  set the SizeMode to Zoom.  If the Image is smaller than the PictureBox,  then set the SizeMode to CenterImage.  For example...

Public Class Form1
    Private source As Image

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Using ofd As New OpenFileDialog
            ofd.Filter = "Image Files|*.jpg;*.bmp;*.png;*.gif"
            If ofd.ShowDialog = DialogResult.OK Then
                If source IsNot Nothing Then source.Dispose()
                source = Image.FromFile(ofd.FileName)
                If source.Width > PictureBox1.ClientSize.Width OrElse source.Height > PictureBox1.ClientSize.Height Then
                    PictureBox1.SizeMode = PictureBoxSizeMode.Zoom 'if image is larger than picturebox
                Else
                    PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage 'if image is smaller than picturebox
                End If
                PictureBox1.Image = source
            End If
        End Using
    End Sub
End Class

---

If you say it can`t be done then i`ll try it

Answer 7

 So, check the size of the Image compared to the client size of the PictureBox and if the Image is wider or taller than the PictureBox,  set the SizeMode to Zoom.  If the Image is smaller than the PictureBox,  then set the SizeMode to CenterImage.  For example...

Public Class Form1
    Private source As Image

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Using ofd As New OpenFileDialog
            ofd.Filter = "Image Files|*.jpg;*.bmp;*.png;*.gif"
            If ofd.ShowDialog = DialogResult.OK Then
                If source IsNot Nothing Then source.Dispose()
                source = Image.FromFile(ofd.FileName)
                If source.Width > PictureBox1.ClientSize.Width OrElse source.Height > PictureBox1.ClientSize.Height Then
                    PictureBox1.SizeMode = PictureBoxSizeMode.Zoom 'if image is larger than picturebox
                Else
                    PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage 'if image is smaller than picturebox
                End If
                PictureBox1.Image = source
            End If
        End Using
    End Sub
End Class

---

If you say it can`t be done then i`ll try it

Great it works perfectly.

But now how to apply your code to the following code to have the same result?

Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If Selected Then
            Dim Cropped As Image = New Bitmap(Math.Abs(SelectSiz.Width), Math.Abs(SelectSiz.Height))
            Dim g As Graphics = Graphics.FromImage(Cropped)

            Dim SrcRect As Rectangle = GetSelection(SelectPos, SelectSiz)

            g.DrawImage(source, New Rectangle(0, 0, Cropped.Width, Cropped.Height), SrcRect, GraphicsUnit.Pixel)
            PictureBox2.Visible = True
            PictureBox1.Visible = False


            PictureBox2.Image = Cropped


        End If
        Selected = False
    End Sub

Regards,,,,,

Answer 8

But now how to apply your code to the following code to have the same result?

If you want to use zoom then use the code already provided:
https://social.msdn.microsoft.com/Forums/en-US/57327fd6-4114-4787-8d73-f5f92b0afc98/

If you want to use centre then you will need to adjust the calculation.

Answer 9

 So, check the size of the Image compared to the client size of the PictureBox and if the Image is wider or taller than the PictureBox,  set the SizeMode to Zoom.  If the Image is smaller than the PictureBox,  then set the SizeMode to CenterImage.  For example...

Public Class Form1
    Private source As Image

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Using ofd As New OpenFileDialog
            ofd.Filter = "Image Files|*.jpg;*.bmp;*.png;*.gif"
            If ofd.ShowDialog = DialogResult.OK Then
                If source IsNot Nothing Then source.Dispose()
                source = Image.FromFile(ofd.FileName)
                If source.Width > PictureBox1.ClientSize.Width OrElse source.Height > PictureBox1.ClientSize.Height Then
                    PictureBox1.SizeMode = PictureBoxSizeMode.Zoom 'if image is larger than picturebox
                Else
                    PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage 'if image is smaller than picturebox
                End If
                PictureBox1.Image = source
            End If
        End Using
    End Sub
End Class

---

If you say it can`t be done then i`ll try it

Great it works perfectly.

But now how to apply your code to the following code to have the same result?

Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If Selected Then
            Dim Cropped As Image = New Bitmap(Math.Abs(SelectSiz.Width), Math.Abs(SelectSiz.Height))
            Dim g As Graphics = Graphics.FromImage(Cropped)

            Dim SrcRect As Rectangle = GetSelection(SelectPos, SelectSiz)

            g.DrawImage(source, New Rectangle(0, 0, Cropped.Width, Cropped.Height), SrcRect, GraphicsUnit.Pixel)
            PictureBox2.Visible = True
            PictureBox1.Visible = False


            PictureBox2.Image = Cropped


        End If
        Selected = False
    End Sub

Regards,,,,,

You should be able to figure that out on your own if you try. Otherwise you are just expecting someone else to write your code.

:)

Answer 10

 Use the same If Then Else statement i showed to change the SizeMode of PictureBox1 but,  do it for PictureBox2 in the code you just showed.  Also,  don't forget to dispose the Graphics object when you are done using it.  You should be doing that with any New Bitmap images you have assigned to the PictureBoxes too,  just before assigning another New one to it.

    Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If Selected Then
            Dim Cropped As Image = New Bitmap(Math.Abs(SelectSiz.Width), Math.Abs(SelectSiz.Height))
            Dim g As Graphics = Graphics.FromImage(Cropped)

            Dim SrcRect As Rectangle = GetSelection(SelectPos, SelectSiz)

            g.DrawImage(source, New Rectangle(0, 0, Cropped.Width, Cropped.Height), SrcRect, GraphicsUnit.Pixel)

            g.Dispose() 'do not forget to dispose the new Graphics object when you are done using it

            PictureBox2.Visible = True
            PictureBox1.Visible = False


            If Cropped.Width > PictureBox2.ClientSize.Width OrElse Cropped.Height > PictureBox2.ClientSize.Height Then
                PictureBox2.SizeMode = PictureBoxSizeMode.Zoom 'if cropped image is larger than picturebox2
            Else
                PictureBox2.SizeMode = PictureBoxSizeMode.CenterImage 'if cropped image is smaller than picturebox2
            End If

            If PictureBox2.Image IsNot Nothing Then PictureBox2.Image.Dispose 'dispose the last New Bitmap you assigned to the PictureBox before assigning another New Bitmap to it.
            PictureBox2.Image = Cropped
        End If
        Selected = False
    End Sub

---

If you say it can`t be done then i`ll try it

Answer 11

 Use the same If Then Else statement i showed to change the SizeMode of PictureBox1 but,  do it for PictureBox2 in the code you just showed.  Also,  don't forget to dispose the Graphics object when you are done using it.  You should be doing that with any New Bitmap images you have assigned to the PictureBoxes too,  just before assigning another New one to it.

    Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If Selected Then
            Dim Cropped As Image = New Bitmap(Math.Abs(SelectSiz.Width), Math.Abs(SelectSiz.Height))
            Dim g As Graphics = Graphics.FromImage(Cropped)

            Dim SrcRect As Rectangle = GetSelection(SelectPos, SelectSiz)

            g.DrawImage(source, New Rectangle(0, 0, Cropped.Width, Cropped.Height), SrcRect, GraphicsUnit.Pixel)

            g.Dispose() 'do not forget to dispose the new Graphics object when you are done using it

            PictureBox2.Visible = True
            PictureBox1.Visible = False


            If Cropped.Width > PictureBox2.ClientSize.Width OrElse Cropped.Height > PictureBox2.ClientSize.Height Then
                PictureBox2.SizeMode = PictureBoxSizeMode.Zoom 'if cropped image is larger than picturebox2
            Else
                PictureBox2.SizeMode = PictureBoxSizeMode.CenterImage 'if cropped image is smaller than picturebox2
            End If

            If PictureBox2.Image IsNot Nothing Then PictureBox2.Image.Dispose 'dispose the last New Bitmap you assigned to the PictureBox before assigning another New Bitmap to it.
            PictureBox2.Image = Cropped
        End If
        Selected = False
    End Sub

---

If you say it can`t be done then i`ll try it

Answer 12

 Use the same If Then Else statement i showed to change the SizeMode of PictureBox1 but,  do it for PictureBox2 in the code you just showed.  Also,  don't forget to dispose the Graphics object when you are done using it.  You should be doing that with any New Bitmap images you have assigned to the PictureBoxes too,  just before assigning another New one to it.

    Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If Selected Then
            Dim Cropped As Image = New Bitmap(Math.Abs(SelectSiz.Width), Math.Abs(SelectSiz.Height))
            Dim g As Graphics = Graphics.FromImage(Cropped)

            Dim SrcRect As Rectangle = GetSelection(SelectPos, SelectSiz)

            g.DrawImage(source, New Rectangle(0, 0, Cropped.Width, Cropped.Height), SrcRect, GraphicsUnit.Pixel)

            g.Dispose() 'do not forget to dispose the new Graphics object when you are done using it

            PictureBox2.Visible = True
            PictureBox1.Visible = False


            If Cropped.Width > PictureBox2.ClientSize.Width OrElse Cropped.Height > PictureBox2.ClientSize.Height Then
                PictureBox2.SizeMode = PictureBoxSizeMode.Zoom 'if cropped image is larger than picturebox2
            Else
                PictureBox2.SizeMode = PictureBoxSizeMode.CenterImage 'if cropped image is smaller than picturebox2
            End If

            If PictureBox2.Image IsNot Nothing Then PictureBox2.Image.Dispose 'dispose the last New Bitmap you assigned to the PictureBox before assigning another New Bitmap to it.
            PictureBox2.Image = Cropped
        End If
        Selected = False
    End Sub

---

If you say it can`t be done then i`ll try it

Sorry, but this code unfortunately didn't work as the first one.

It clips the full fit images and hide the small image

Like I said you are just copying code blocks and failing to learn how it works so you can modify it for your exact desires.

Answer 13

Sorry, but this code unfortunately didn't work as the first one.

It clips the full fit images and hide the small image

 Not sure what you are doing wrong but,  that code seems to work on my end with a quick test.  You should learn to set a Break Point in your code and step through it one line at a time.  You can then inspect the values of all the variables and objects to see if one is not what you expect it to be.  You can also follow the flow of the code,  like to see which part of the (If Then Else) statement it enters.

 If you want to program,  learning to Debug your code is a must.

VB.Net - Debugging Express Tutorial

---

If you say it can`t be done then i`ll try it

Answer 14

This code will display a form (Frm_Image) that is sized to 80% of the screen, then display an image centered on that form's client area, maintaining the image's aspect ratio. The Pic_Image.SizeMode = StretchImage and the Frm_Image.StartPosition = CenterScreen

    Private Sub ShowImage()

        Dim ScaleFactor As Single

        ' Set form Height & Width to 80% of screen size
        Frm_Image.Height = Screen.PrimaryScreen.Bounds.Height * 0.8
        Frm_Image.Width = Screen.PrimaryScreen.Bounds.Width * 0.8

        ' Calculate a scale factor so the image will display in the forms client rectangle.
        If (Frm_Image.ClientRectangle.Width / IMGWidth) > (Frm_Image.ClientRectangle.Height / IMGHeight) Then
    ' Portrait  Client.Height is limiting dimension
            ScaleFactor = Frm_Image.ClientRectangle.Height / IMGHeight
        Else
            ScaleFactor = Frm_Image.ClientRectangle.Width / IMGWidth
        End If

        ' Resize the PictureBox and load the image
        Frm_Image.Pic_Image.Height = IMGHeight * ScaleFactor
        Frm_Image.Pic_Image.Width = IMGWidth * ScaleFactor
        Frm_Image.Pic_Image.Image = IMG

        ' Center image on form client area
        Frm_Image.Pic_Image.Left = (Frm_Image.ClientRectangle.Width / 2) - (Frm_Image.Pic_Image.Width / 2)
        Frm_Image.Pic_Image.Top = (Frm_Image.ClientRectangle.Height / 2) - (Frm_Image.Pic_Image.Height / 2)

        Frm_Image.Show()

    End Sub

Answer 15

I forgot an edit.

IMG is the bitmap that holds the image. IMGHeight & IMGWidth are the actual height & width of the image.