drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box)
drag image in picbox (must be picture box) drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
Go Back  Xtreme Visual Basic Talk > > > drag image in picbox (must be picture box)


Reply
 
Thread Tools Display Modes
  #1  
Old 10-15-2016, 01:58 PM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default drag image in picbox (must be picture box)


Hi,
I have seen several ways to drag a large pic inside a fixed-size box, but this always has the pic in an image box, then contained in a picture box. But my pic has to be inside a picture box because I need things doing to it that you can't do in an image box (mask colours for instance)
Many thanks for any assistance!
Reply With Quote
  #2  
Old 10-16-2016, 05:27 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

You can do this with a UserControl as your draggable "picture" and that allows you to roll up a lot of the code there instead of in every Form that needs to use it.

In this sample a RubberStamp.ctl can load an image with a transparency mask color, then be dragged to position and "stamped' onto its container's backdrop.
Attached Images
File Type: gif sshot.gif (20.6 KB, 6 views)
Attached Files
File Type: zip DragPicture.zip (16.9 KB, 11 views)
Reply With Quote
  #3  
Old 10-17-2016, 11:58 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default

Many thanks, I'll take a look later. Obviously moving a picture isn't as straightforward as I thought!
Reply With Quote
  #4  
Old 10-17-2016, 03:42 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

You can do much the same thing with a PictureBox within a PictureBox, you just don't get transparency at all and you have to put all of the behavior logic into the Form holding your matryoshka doll PictureBoxes because they are dumb controls with fixed behaviors.
Reply With Quote
  #5  
Old 10-18-2016, 08:22 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default sample code

Hi, and thanks for your help. I couldn't apply the code in the example you provided, sorry (that's entirely my fault by the way!) but I have found some code online. Problem is, there the picture box itself is moved over the form, whereas I just need my picture box to be static but have the picture move inside it - i.e., the complete inverse of his example.
(quote...)
Quote:
Then, you'll handle the MouseMove event, where you'll do the actual dragging (moving the image inside the picture box). In the example, I chose to simply move the entire picture box control around on the container Form, rather than moving the image inside of the picture box. You might need to change the logic here, depending on the layout of your form and your specific needs
Code:
Code:
Private Sub picBox_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
    ' When left mouse button is being held down (drag)
    If Button = 1 Then
        ' Drag the picture box around the form
        picBox.Move x + (picBox.Left - xpos), y + (picBox.Top - ypos)
    End If
End Sub
And I believe the picture is loaded into an image box which site 'underneath' the picture box (or is it the other way round? It's all a bit confusing to me as a bear of very little brain!)
Reply With Quote
  #6  
Old 10-19-2016, 02:32 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

If you have a PictureBox named picInner that is sited on/within another PictureBox named picOuter the user can drag picInner around by use of:

Code:
Option Explicit

Private MouseDownX As Single
Private MouseDownY As Single

Private Sub picInner_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button And vbLeftButton Then
        MouseDownX = X
        MouseDownY = Y
    End If
End Sub

Private Sub picInner_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button And vbLeftButton Then
        With picInner
            .Move .Left + (X - MouseDownX), .Top + (Y - MouseDownY)
        End With
    End If
End Sub
You can't really do anything like this with a "Picture" but I'm not sure what you even mean by that. Most "Picture" objects tend to be instances of StdPicture, which isn't a control and thus has no visibility or user interaction.

Of course you can name things almost anything you want, but without more information it is hard to tell what you mean by "Picture."

If picInner is sited on the Form then you won't get any clipping relative to picOuter. In that case picInner "floats around" over the top of (or underneath) picOuter, which one depending on the Z-order of these two controls.


And as far as that goes you could use an "inner" Image control instead of a PictureBox and the dragging works the same way.

Last edited by dilettante; 10-19-2016 at 02:37 PM.
Reply With Quote
  #7  
Old 10-20-2016, 06:01 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default

Thanks for your help (and tolerance!)
What I need to be able to move is the picture itself, i.e., what is contained in picInner. I have attached a screenshot to show what I mean. The picture (a star chart) in this example is loaded from a file as a test, and only the top lefthand corner is visible. I need the user to be able to drag or scroll (it doesn't really matter which, as long as the operation is possible) the starchart around so that other parts of it can be seen.
Other examples I have tried have enlarged the picture to its actual size, which is bigger than the form, so I suppose I have to set autosize - but this refers I think to the picture box rather than the picture itself. I need the picture itself to be full size but I don't want its picture box to grow to accommodate it. Presumably also, 'innerpic' has to sit on top of 'outerpic' as otherwise it won't be visible, as outerpic is not transparent.
OK - quick update...
Just tried your code, and seems to be a step forward as the picture itself remains the same size - which is a first, so the best result so far! But when I try to drag, the picture doesn't move and shudders madly, even for a short time after I release the mouse button. What I think is happening here is that, if I drag the picture up and to the left, it is going beyond the confines of the form itself. Would that be the problem? I can see that it might be easier to keep the picture in place and move the picture box 'over it', but unfortunately the picture box would then obscure the rest of the form. Maybe there is simply no solution?
Attached Images
File Type: gif screenshot.gif (37.4 KB, 10 views)

Last edited by starmanMike; 10-20-2016 at 08:49 AM.
Reply With Quote
  #8  
Old 10-20-2016, 10:32 AM
Cerian Knight's Avatar
Cerian Knightdrag image in picbox (must be picture box) Cerian Knight is offline
Polymath (in disciplina)

Super Moderator
* Expert *
 
Join Date: May 2004
Location: Michigan
Posts: 4,193
Default

If the picture is held in a StdPicture object (sPic), you can 'picInner.PaintPicture StdPic, ...' it wherever you want based on picInner mouse events adjusting the additional parameters.

I just glossed over this request, so not sure if I'm on target for what you need. Otherwise, let me know if you have trouble implementing this, as I already have the code for smooth-scrolling a scaled-down raw image of our galaxy (only 48,000x1639 pixels), but without the mouse down/move events wired in.
__________________
I got all the answers wrong on the GLAT, apparently even #9 (where I put a period in the middle of the box and labeled it 'singularity ripe for rapid inflation').

Last edited by Cerian Knight; 10-20-2016 at 11:01 AM.
Reply With Quote
  #9  
Old 10-20-2016, 11:26 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default sPic

Hi and thanks! Starting to look hopeful now...
The picture is in an ordinary VB picture box, out of the default toolbox. I don't know what a stdPicture object is, sorry! Even less how to manipulate one. Basically you need to treat me as an idiot in this case. ;-)
Reply With Quote
  #10  
Old 10-20-2016, 04:10 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

A StdPicture is an object that wraps an hIcon, hBitmap, hMetafile, etc. Those are GDI "picture" handles of various forms. Part of the wrapper is a Render method that calls BitBlt, TransparentBlt, etc. based on the image type.

This is the data type of the .Picture, .Image, etc. properties of many controls.

You can't "see" a StdPicture, it has to be rendered onto some canvas. Things like an Image or PictureBox control do this automagically (they call Render internally), but you can also use the PaintPicture method or the Render method to do it explicitly with more control.

So a "picture" (i.e. in VB6 a StdPicture) is just data until rendered. A PictureBox is a control. Try not to get these concepts confused.
Reply With Quote
  #11  
Old 10-20-2016, 05:17 PM
Cerian Knight's Avatar
Cerian Knightdrag image in picbox (must be picture box) Cerian Knight is offline
Polymath (in disciplina)

Super Moderator
* Expert *
 
Join Date: May 2004
Location: Michigan
Posts: 4,193
Default

Here is the most basic example of using StdPicture with mouse events:
Code:
'Add a PictureBox to a Form in new project (all default properties unchanged)
'Change the file specification (located within Form_Load)
'Issue: possible drag window resize crash bug
'Issue: top raster smear issue (1 pixel black border around image may help)
Option Explicit
Dim sPic As StdPicture
Dim xPos As Long
Dim yPos As Long
Dim xTmp As Long
Dim yTmp As Long

Private Sub Form_Load()
    Set sPic = LoadPicture("C:\MyDir\MyFile.jpg")
End Sub

Private Sub Form_Resize()
    If WindowState <> vbMinimized Then
        Picture1.Move 0, 0, ScaleWidth, ScaleHeight
    End If
End Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 Then
        xTmp = X
        yTmp = Y
    End If
End Sub

Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 Then
        With Picture1
            .PaintPicture sPic, 0, 0, .ScaleWidth, .ScaleHeight, xPos + xTmp - X, yPos + yTmp - Y, .ScaleWidth, .ScaleHeight, vbSrcCopy
        End With
    End If
End Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 Then
        xPos = xPos + xTmp - X
        yPos = yPos + yTmp - Y
    End If
End Sub

Private Sub Picture1_Paint()
    With Picture1
        .PaintPicture sPic, 0, 0, .ScaleWidth, .ScaleHeight, xPos, yPos, .ScaleWidth, .ScaleHeight, vbSrcCopy
    End With
End Sub
__________________
I got all the answers wrong on the GLAT, apparently even #9 (where I put a period in the middle of the box and labeled it 'singularity ripe for rapid inflation').

Last edited by Cerian Knight; 10-20-2016 at 07:03 PM. Reason: Noticed possible issue with drag resizing window, but don't feel like fixing it right now
Reply With Quote
  #12  
Old 10-21-2016, 05:02 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default

HI and thanks again.
Success! Insofar as the picture can be moved, really works well, but... (you knew there was a but, right?) the picture fills the entire form, not the picture box. The picture box is nowhere to be seen. If it helps, I don't need a form_resize as the form is always maximised.
Reply With Quote
  #13  
Old 10-21-2016, 07:51 AM
Cerian Knight's Avatar
Cerian Knightdrag image in picbox (must be picture box) Cerian Knight is offline
Polymath (in disciplina)

Super Moderator
* Expert *
 
Join Date: May 2004
Location: Michigan
Posts: 4,193
Default

Confirm the proper behavior in a new project? Then translate/transfer to your own project... comparing between the two such things as Form/PictureBox ScaleMode, AutoRedraw, ClipControls, etc.

Perhaps you misplaced a '.' on the front of PaintPicture or .Scale...? That would obviously allow it to draw outside the bounds of the PictureBox.

You can discard my Form_Resize code entirely if the the PictureBox is placed manually or through your own code.
__________________
I got all the answers wrong on the GLAT, apparently even #9 (where I put a period in the middle of the box and labeled it 'singularity ripe for rapid inflation').

Last edited by Cerian Knight; 10-21-2016 at 08:36 AM. Reason: Misread issue
Reply With Quote
  #14  
Old 10-21-2016, 07:06 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

Unless you carefully code for it a program like this is probably going to run into High DPI issues sooner or later as well.
Reply With Quote
  #15  
Old 10-22-2016, 12:04 PM
Cerian Knight's Avatar
Cerian Knightdrag image in picbox (must be picture box) Cerian Knight is offline
Polymath (in disciplina)

Super Moderator
* Expert *
 
Join Date: May 2004
Location: Michigan
Posts: 4,193
Default

Windows 10 High-DPI Scaling is fine, in my example anyway, but not tested using default XP-Style Scaling under Windows 7.
__________________
I got all the answers wrong on the GLAT, apparently even #9 (where I put a period in the middle of the box and labeled it 'singularity ripe for rapid inflation').
Reply With Quote
  #16  
Old 10-22-2016, 04:52 PM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

In Windows 10 DPI Virtualization seems to have improved a lot. At least after the Anniversary Update anyway.

Many programs worked fine even on earlier versions of Windows, except they ended up with blurry text and wrong-size or pixelated bitmaps at high DPI settings. Then marking them as DPI Aware to eliminate blurring and pixilation began bringing everything down like a house of cards. VB6 handles a lot of it for you but there are many small details that require a little extra code.

In Win10 1607 the DPI Virtualization seems to be much improved. Without text blurring and such many programs will work well enough "as is" now with no need to be DPI Aware. Bitmap stretching/pixilation might still be an issue though.

Earlier versions of Windows don't have those improvements, so it remains an issue unless you can stop supporting old versions of Windows.

Or you can cry and stamp your feet and insist users set 96dpi/100% if they are going to run your programs.
Reply With Quote
  #17  
Old 10-23-2016, 07:34 AM
starmanMike starmanMike is offline
Junior Contributor
 
Join Date: Oct 2005
Location: near Norwich, UK
Posts: 287
Default

Hi Cerian,
No chance of missing anything out - I cut and pasted the entire code! Something else that happened was that if I (say) dragged the pic leftwards, 'ghosts' of parts of the picture would appear on the right of the box. But it looks like I may have to go down the 'cry and stamp feet' road - shame, because on the face of it this should surely be such a straightforward thing to do!
Reply With Quote
  #18  
Old 10-23-2016, 11:14 AM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

Ok, here's another example.

This one is based on a UserControl "Draggio" that might work for you. It is DPI-aware but you can always remove or alter the application manifest resource and skip the DpiFix adjustment logic in the Form_Resize event. Leaving that all there won't hurt anything, but your own programs may not need any of it.

Once you have added Draggio.ctl to a Project it should be almost as easy as using a plain PictureBox.

Draggio displays an image set via its Picture property. The user can drag the image around or press the Home key to move to the upper-left or the End key to move to the lower-right. Just an idea.

The attachment is big because it has a big "star chart" image file in it. If you try running the demo, be sure to try resizing the Form, maximizing it, etc.
Attached Files
File Type: zip Draggio Demo.zip (95.3 KB, 17 views)
Reply With Quote
  #19  
Old 10-23-2016, 11:21 AM
dilettante's Avatar
dilettantedrag image in picbox (must be picture box) dilettante is offline
Underclocked lifestyle

Forum Leader
* Guru *
 
Join Date: Feb 2005
Location: Michigan, USA
Posts: 4,524
Default

Oops! The Form1 Caption refers to a PictureBox, but that was replaced by a Draggio control so I hope it doesn't confuse you. There is no PictureBox there.
Reply With Quote
  #20  
Old 10-23-2016, 06:10 PM
Cerian Knight's Avatar
Cerian Knightdrag image in picbox (must be picture box) Cerian Knight is offline
Polymath (in disciplina)

Super Moderator
* Expert *
 
Join Date: May 2004
Location: Michigan
Posts: 4,193
Default

Try dilletante's code and see if you fare any better.
Quote:
Originally Posted by starmanMike View Post
No chance of missing anything out - I cut and pasted the entire code!
Since I did the same thing (on several PCs) with an image that exceeds the size of the picture box, I'm not sure what the issue is.

The image bleed when dragging, is normal near the extents. If the source image has a black border (mentioned in code comment) all the way around, there is no visible issue.
__________________
I got all the answers wrong on the GLAT, apparently even #9 (where I put a period in the middle of the box and labeled it 'singularity ripe for rapid inflation').
Reply With Quote
Reply

Tags
box, drag, image, pic, picture, picbox


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box) drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box) drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
 
drag image in picbox (must be picture box)
drag image in picbox (must be picture box)
 
-->