none
How to center image to the picturebox? RRS feed

  • 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.

    Saturday, June 3, 2017 12:43 PM

Answers

  •  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

    • Marked as answer by Max45-1 Sunday, June 4, 2017 12:34 PM
    Sunday, June 4, 2017 11:02 AM
  •  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

    • Marked as answer by Max45-1 Thursday, July 13, 2017 4:00 PM
    Sunday, June 4, 2017 1:02 PM

All replies

  • Hi

    Have a look at:

    PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage
    


    Regards Les, Livingston, Scotland

    • Proposed as answer by IronRazerz Saturday, June 3, 2017 12:54 PM
    Saturday, June 3, 2017 12:50 PM
  • Hi,

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

    Try PictureBoxSizeMode.CenterImage

    Regards,

      Thorsten

    • Proposed as answer by IronRazerz Saturday, June 3, 2017 12:54 PM
    Saturday, June 3, 2017 12:50 PM
  • 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

    Sunday, June 4, 2017 3:48 AM
  • 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

    Sunday, June 4, 2017 3:49 AM
  • 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.


    Sunday, June 4, 2017 4:47 AM
  •  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

    • Marked as answer by Max45-1 Sunday, June 4, 2017 12:34 PM
    Sunday, June 4, 2017 11:02 AM
  •  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,,,,,

    Sunday, June 4, 2017 12:36 PM
  • 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.

    Sunday, June 4, 2017 12:52 PM
  •  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.

    :)

    Sunday, June 4, 2017 12:58 PM
  •  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

    • Marked as answer by Max45-1 Thursday, July 13, 2017 4:00 PM
    Sunday, June 4, 2017 1:02 PM
  •  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



    • Edited by Max45-1 Thursday, July 13, 2017 4:01 PM
    Monday, June 5, 2017 11:50 AM
  •  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.

    Monday, June 5, 2017 2:09 PM
  • 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

    Monday, June 5, 2017 5:46 PM
  • 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


    Wednesday, August 23, 2017 4:03 PM
  • I forgot an edit.

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

    • Edited by dw80916 Wednesday, August 23, 2017 4:37 PM
    Wednesday, August 23, 2017 4:06 PM