Make images on form stand out

[tonydev314]

I have a user form with 4 image controls which are populated at run time.
I need the user to be able to see which if any of the images is currently "active", and if none, allow the user to select one.
The trouble is that I appear to be limited to a thin border (Single). I've also tried the SpecialEffect property - both of these DO identify the correct image, but they don't exactly jump out at you! Ideally I'd want a 3+px border around the object of interest.

I'm toying with the idea of using containers that host each image control so I could use the background property on them, but wondering if there's a simpler solution.

 

[Micron]

All I can think of is resizing the image from something smaller to larger on a mouse click event.

Option Explicit
Dim bolExpanded As Boolean

Private Sub Image1_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal x As Single, ByVal Y As Single)
If bolExpanded = False Then
     With Image1
          .Width = 352
          .Height = 198
     End With
     bolExpanded = True
Else
     With Image1
          .Width = 235
          .Height = 132
     End With
     bolExpanded = False
End If

End Sub

or perhaps swapping the picture mode from clip to zoom to clip or something like that. Methinks the issue you'd have with containers is that if they get the focus the z order will change and the container will lay on top of the image.

 

[tonydev314]

Thanks - I've been working with the frame approach. 4 frame each containing an image with the frames 2px larger than the image all around.
Seems to work perfectly - I can set the background colour on the frame of interest making it look like a 3px border around the image. Only events on the form are click events on the images and no issues with z-order.

I was concerned that this approach would look awful but setting the frame to "flat" means that the non-highlighted frames are effectively invisible.

 

[tonydev314]

That should read 2px border obviously.

 

[Micron]

Assuming you can, click on the frame edge and see if it then covers your image?

 

[tonydev314]

Assuming you can, click on the frame edge and see if it then covers your image?

I did test that and it doesn't.
I suspect you're thinking of it like a separate frame element is on the form but with a lower z order, which would then be altered by clicking on it.
Putting each image inside a separate frame control prevents this from occurring.

 

[Dan_W]

Hi. Just thought I'd add my 2cents to this conversation. I have a 'border' class that does exactly what you're doing, with the only exception being that I use a label control rather than a frame control to act as the border. Then it's just a matter of situating the border: (a) behind the 'target' (here, image) control, and (b) with an offset of X pixels to the top/left and bottom/right of the 'target' control.

From the sounds of it, it seems like that's what you've done. I'd be interested to learn how it went, though, and if you made any other improvements I could learn from.

 

[tonydev314]

Hi. Just thought I'd add my 2cents to this conversation. I have a 'border' class that does exactly what you're doing, with the only exception being that I use a label control rather than a frame control to act as the border. Then it's just a matter of situating the border: (a) behind the 'target' (here, image) control, and (b) with an offset of X pixels to the top/left and bottom/right of the 'target' control.

From the sounds of it, it seems like that's what you've done. I'd be interested to learn how it went, though, and if you made any other improvements I could learn from.

That's a nice idea.
My design time frame method did all I wanted to - it's a quick and dirty project, but your idea of a label could easily be added/removed at runtime. You could implement a custom control, based on image, with a Border property that added/removed the label control as required. The only issue with this is you'd need to ensure the image had sufficient margins to allow this.
Which then makes me think you could base the custom control on Frame - that way you can fix the max image size depending on the required border width and at design time you'd only be adding one control rather than two.