Results 1 to 11 of 11

Thread: Displaying images

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Displaying images

    I need to display thumbnails and sized images (JPG, JPEG, BMP, GIF). What would be the best approach, a control or class or just use the native VB controls (image/picture box)?

    Thanks in advance!

    Rick

  2. #2
    Frenzied Member
    Join Date
    Feb 2003
    Posts
    1,807

    Re: Displaying images

    Unless you want to do something very specific I see no reason why you shouldn't use the default picture boxes. What makes you think they might not suit your purpose?

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Re: Displaying images

    Nothing really... I just wanted to see what was out there before I commit. I moved straight from 6.0 (years ago) to Studio 2019 so I expect a lot has changed insofar as classes and controls. In the past I used a 3rd party control but those are not as prolific or affordable as they were back in the day.

    Rick

  4. #4
    Frenzied Member
    Join Date
    Feb 2003
    Posts
    1,807

    Re: Displaying images

    Okay. Why did you use third party controls? Your question appears to be about just displayin thumbails and vb6 has pretty decent picture box controls.

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Re: Displaying images

    At that time I mainly went with 3rd party controls due to the effects and editing, but that is not as big a deal this time. Thumbnail creation is though, in other words creating an icon and a hover thumbnail. So fact resizing will be critical.

  6. #6
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: Displaying images

    I've read your posts several times and it still isn't fully clear what you're trying to do. Do you want to display a smaller image, then when the user hovers over the image it expands to its original size?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Re: Displaying images

    I need to create a thumbnail for use in say a listview control and display a larger thumbnail if the use hovers over the image and even larger if they click on the image.

    Rick

  8. #8
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: Displaying images

    Take a look at this example:
    Code:
    Public Class Form1
    
        Private ReadOnly _imagePaths As IEnumerable(Of String)
    
        Sub New()
            Dim directoryInfo = New IO.DirectoryInfo(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures))
            _imagePaths = directoryInfo.GetFiles("*.png").Select(Function(file) file.FullName)
    
            InitializeComponent()
        End Sub
    
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Cursor = Cursors.WaitCursor
            FlowLayoutPanelContainer.Controls.AddRange(CreatePictureBoxes(_imagePaths).ToArray())
            Cursor = Cursors.Default
        End Sub
    
        Private Function CreatePictureBoxes(paths As IEnumerable(Of String)) As IEnumerable(Of PictureBox)
            Dim pictureBoxes = New List(Of PictureBox)
    
            For Each path In paths
                Dim pictureBox = New PictureBox() With {
                    .BorderStyle = BorderStyle.FixedSingle,
                    .Cursor = Cursors.Hand,
                    .Margin = New Padding(Convert.ToInt32(Math.Floor(Font.Size))),
                    .Size = New Size(64, 64),
                    .SizeMode = PictureBoxSizeMode.StretchImage,
                    .Tag = path
                }
                pictureBox.LoadAsync(path)
                
                AddHandler pictureBox.MouseClick, AddressOf PictureBox_MouseClick
                AddHandler pictureBox.MouseEnter, AddressOf PictureBox_MouseEnter
                AddHandler pictureBox.MouseLeave, AddressOf PictureBox_MouseLeave
    
                pictureBoxes.Add(pictureBox)
            Next
    
            Return pictureBoxes
        End Function
    
        Private Sub PictureBox_MouseClick(sender As Object, e As MouseEventArgs)
            Dim pictureBox = DirectCast(sender, PictureBox)
            If (e.Button = MouseButtons.Left) Then
                pictureBox.Size = pictureBox.Parent.Size
            ElseIf (e.Button = MouseButtons.Right) Then
                pictureBox.Size = New Size(255, 255)
            End If
        End Sub
    
        Private Sub PictureBox_MouseEnter(sender As Object, e As EventArgs)
            Dim pictureBox = DirectCast(sender, PictureBox)
            pictureBox.Size = New Size(255, 255)
        End Sub
        
        Private Sub PictureBox_MouseLeave(sender As Object, e As EventArgs)
            Dim pictureBox = DirectCast(sender, PictureBox)
            pictureBox.Size = New Size(64, 64)
        End Sub
        
    End Class
    What this does is:
    1. Create a String collection
    2. Populate the collection with every png file from MyPictures
    3. Change the Form's cursor to the wait cursor (to indicate that it is loading)
    4. Loop over the collection
      1. Create a new PictureBox
      2. Load the image using the currently iterated path
      3. Bind the MouseClick, MouseEnter, and MouseLeave events:
        1. In the MouseEnter event, make the size of the control 255, 255
        2. In the MouseLeave event, make the size of the control 64, 64
        3. In the MouseClick event:
          1. During a left mouse click, make the size of the control fill the size of its parent
          2. During a right mouse click, make the size of the control 255, 255
    5. Add the controls to a FlowLayoutPanel
    6. Change the Form's cursor to the default cursor (to indicate that the loading is complete)


    In this example I use a simple PictureBox and the total size of the code is 61 lines, including whitespace/styling. There are a few things that this example assumes, which can easily be changed:
    • There is a FlowLayoutPanel control added via the designer, named FlowLayoutPanelContainer
    • You want png files in MyPictures


    You could make this more efficient if the number of images you're loading starts to get too large. For example, you could only create n PictureBoxes at a time and dynamically load them when the FlowLayoutContrainer scrolls, similar to an "infinite scroll" effect, and then cache the loaded images so that once they're loaded you don't need to reload them. But that might be overkill, it all depends on how many images you are handling at any given time.
    Last edited by dday9; May 13th, 2021 at 10:07 PM. Reason: spelin an grammur
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  9. #9
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,302

    Re: Displaying images

    Create an Image object however is appropriate and display it in a PictureBox. Simple. If you want a thumbnail, call GetThumbnailImage on that Image object. Also simple.

    For future reference, you don't have to "commit" without testing for yourself whether you ask us or not. You should have tried the standard PictureBox for yourself first, in a simple test project. If it did everything you need then there's no need to ask us at all. If it seemed to be deficient in some way, then you should ask us about that deficiency specifically. Look first, ask questions later.

  10. #10

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Re: Displaying images

    I did experiment with the picture box and have used it in previous versions of this app, I asked to get other ideas that I may not have considered.

  11. #11

    Thread Starter
    Lively Member
    Join Date
    Dec 2020
    Posts
    97

    Re: Displaying images

    Thanks a bunch, this is VERY useful..... I ended up using several elements of this code.

    Rick

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width