[RESOLVED] Show a transparent PictureBox over a ListBox Help!

[Spybot]

Hello!

I'm trying to display an image on top of a ListBox using a PictureBox.
I've already set my PictureBox backgroundr to Transparent and my image is a .png with transparent background.

My Image:


My ListBox:


I want something like this:


But this is what I get:


Don't worry about the size of the image I'll make it the correct size later.
Is this the right way to do my task?

[.paul.]

No. Pictureboxes don’t support transparent backgrounds like that. You could probably extend a ListBox and draw the image in OnPaint, or if it exists, ideally in OnPaintBackGround…

[.paul.]

https://www.vbforums.com/showthread....ckground-Image

[Spybot]

Hi .paul.!
Thank you for responding!
I wouldn't like to create my own ListBox, because I already have one. I just want to turn on and off an image on top of my listBox.

[.paul.]

Hi .paul.!
Thank you for responding!
I wouldn't like to create my own ListBox, because I already have one. I just want to turn on and off an image on top of my listBox.

Try handling your ListBox Paint event. I can’t guarantee that though…

[jmcilhinney]

I wouldn't like to create my own ListBox, because I already have one.

That's not really a valid reason. You simply derive your new class from that class you already have and add whatever functionality you need.

That said, you don't necessarily have to create your own class if it's a one-off. You can just handle the appropriate events of the control in your form. In theory, you can just handle the Paint event and do your custom drawing there. I'm not sure exactly how that would work with a ListBox but you can give it a go and find out. If it draws over all the items then you're good to go. It probably won't draw over the scrollbar(s) though.

[.paul.]

You can design a custom listbox in code, as I and jmcilhinney told you, then it’s easy to replace your existing ListBox (or ListBoxes) by carefully editing your Form’s .Designer.vb file. An extended ListBox which inherits ListBox has all of the standard functionality of a standard ListBox, plus any extra functionality you add in your extension Class…

[Niya]

I wouldn't like to create my own ListBox, because I already have one. I just want to turn on and off an image on top of my listBox.

I hope you don't think he meant that you have to create your own ListBox from scratch. What he suggested was extending the normal ListBox control which means it will have all the same functionality in addition to the new functionality you want to add.

[boops boops]

In System.Drawing, it's the parent control - the Form, Panel or other Container - that renders transparency for its child controls. So all you have to do is change the PictureBox's parent to the ListBox, and adjust its XY coordinates accordingly. Here's an example:

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        PictureBox1.Parent = ListBox1
        Dim x As Integer = PictureBox1.Left - ListBox1.Left
        Dim y As Integer = PictureBox1.Top - ListBox1.Top
        PictureBox1.Location = New Point(x, y)
    End Sub

Note that the transparent PictureBox is confined to the bounds of the parent ListBox, which is OK in the examples in Post #1.

BB

[Spybot]

Try handling your ListBox Paint event. I can’t guarantee that though…

I can't find the Paint Event for my ListBox, I guess ListBoxes don't have paint events.

[Spybot]

Hi jmc!
I've tried drawing directy to the Form, handling my Form's .Paint event, the result was as expected it drew my image all the way to the back, (behind all my controls).


This is my code:

Dim r As New Rectangle(643, 84, 342, 530)
e.Graphics.DrawImage(My.Resources.Cancelado, r)
ListBox1.SendToBack()

I'm trying to keep it simple, since it'll always be the same image, with the same size on the same location.
So, Is it possible to draw the image over the listBox?

[Spybot]

Hi boops!
I've tried changing my PictureBox's parent to the ListBox, and it didn't work.

[.paul.]

Hi jmc!
I've tried drawing directy to the Form, handling my Form's .Paint event, the result was as expected it drew my image all the way to the back, (behind all my controls).

That’s because you used the FORM Paint event. You were told to try the LISTBOX Paint event..

[Spybot]

Hi .paul.

When I click my ListBox and go to Event's List, I don't see any .Paint Event available on the list.

[boops boops]

Hi boops!
I've tried changing my PictureBox's parent to the ListBox, and it didn't work.

Sorry, my mistake.

The WinForms ListBox has been drawing itself in its own obstinate way for the last 20 years, constantly ignoring Paint events and OnPaint subs. And you don't want the alternative of building your own "list box" from stacks of transparent Labels, or turning to the far more versatile WPF.

Still, it shouldn't be hard to produce a composite image from the ListBox (using DrawToBitmap) and the transparent PictureBox image. Putting one in front of the other is easy enough, but turning the letters red where the Cancelado overlaps the letters -- a nice effect! -- would take a bit more work. I'll take a look at it in the weekend.

BB

[Niya]

Hi .paul.

When I click my ListBox and go to Event's List, I don't see any .Paint Event available on the list.

Here:-

[jmcilhinney]

I can't find the Paint Event for my ListBox, I guess ListBoxes don't have paint events.

Given that Paint is a member of Control and ListBox inherits Control, that's obviously false. There's even documentation for it, which you should know because you should have looked.

[boops boops]

Given that Paint is a member of Control and ListBox inherits Control, that's obviously false. There's even documentation for it, which you should know because you should have looked.

If you read the documentation, you may notice that it says under the heading Remarks:

This event is not relevant for this class.

In other words, the ListBox paint event is about as useless as ...
I was going to cite male nipples (vide Darwin) but that would be doing them an injustice; can anyone think of a better analogy?

Anyway it makes sense that the event list shown in the Properties window (click lightning icon) omits Paint. I think it would improve the MSDN documentation if it left out the redundant stuff, or at least marked it as irrelevant e.g. by using small light-grey letters

BB.

[jmcilhinney]

Anyway it makes sense that the event list shown in the Properties window (click lightning icon) omits Paint.

In light of that information, it certainly does. The event still exists but I had my suspicions that it may not do what was required for a ListBox specifically. The event is still there; it just doesn't do anything useful.

I think it would improve the MSDN documentation if it left out the redundant stuff

I'd have to disagree with that. If something is missing then you don't really know why it's not there. In this case, the documentation that is there tells you what you need to know, which is just further evidence that you should ALWAYS read the documentation.

[Niya]

or turning to the far more versatile WPF.

Actually this is dog easy to do in WPF. Literally two lines of XAML:-

    <Grid>
        <ListBox x:Name="lb" Grid.Column="0"/>
        <Image x:Name="img" Grid.Column="0" IsHitTestVisible="False"/>
    </Grid>

Nothing special had to be done. You just put an Image control on top of a ListBox and you're done:-

[Spybot]

Hi Niya!
Well, I guess I was looking for the .Paint event in the wrong Event List.

Using WPF is not an option for me, since I've never used it, and have no clue on how it works, also my project is almost done, I would have to re-write thousands of lines of code.

It seems that I'm doomed in windows Forms.

[paulg4ije]

Could you grab a bitmap copy of the listbox, combine it with your "cancelado" image and cover the listbox with a picturebox displaying the combined image?

[Niya]

Hi Niya!
Well, I guess I was looking for the .Paint event in the wrong Event List.

Using WPF is not an option for me, since I've never used it, and have no clue on how it works, also my project is almost done, I would have to re-write thousands of lines of code.

It seems that I'm doomed in windows Forms.

It is possible to host WPF Controls in a WinForms application. So you could create the ListBox in WPF and import it into a WinForms project.

[Niya]

Using WPF is not an option for me, since I've never used it, and have no clue on how it works, also my project is almost done, I would have to re-write thousands of lines of code.

It seems that I'm doomed in windows Forms.

Ok I did most of the heavy lifting and came up with the simplest possible solution based on these factors. I created a WinForms version of a ListBox that has the capability you want that's easy to use. This ListBox itself is a WPF ListBox but it's wrapped inside a WinForms UserControl. This is most likely the best possible solution you will get for this problem.

It's very simple to apply to your project. You start by adding these references to your project:-

PresentationCore
PresentationFramework
WindowsBase
WindowsFormsIntegration

Then you add the following class to your project, preferably in it's own file:-

Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.IO
Imports System.Windows.Controls
Imports System.Windows.Forms.Integration
Imports System.Windows.Media.Imaging

'Prevents the designer from opening this UserControl
'We use pure code to create it. We don't want the designer
'potentially screwing up stuff 
Public Class Blank_2233
End Class

<DefaultEvent("SelectionChanged")>
Public Class OLListBox
    Inherits Windows.Forms.UserControl

    Private _host As ElementHost
    Private _image As Image
    Private _listBox As ListBox
    Private _originalBitmap As Bitmap

    Private _textColor As Color
    Private _listBoxBackColor As Color

    Public Event SelectionChanged As SelectionChangedEventHandler
    Public Sub New()
        Dim grid As New Grid

        _host = New ElementHost
        _listBox = New ListBox
        _image = New Image

        _image.IsHitTestVisible = False

        grid.Children.Add(_listBox)
        grid.Children.Add(_image)

        _host.Child = grid
        _host.Dock = DockStyle.Fill

        AddHandler _listBox.SelectionChanged, Sub(sender As Object, e As SelectionChangedEventArgs)
                                                  RaiseEvent SelectionChanged(sender, e)
                                              End Sub

        'Set the default text color
        Me.TextColor = Color.Black

        'Set the default background color of ListBox
        Me.ListBoxBackColor = SystemColors.Control

        Me.Controls.Add(_host)
    End Sub

    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    <Browsable(False)>
    Public Property SelectedIndex As Integer
        Get
            Return _listBox.SelectedIndex
        End Get
        Set(value As Integer)
            _listBox.SelectedIndex = value
        End Set
    End Property

    Public Property ListBoxBackColor As Color
        Get
            Return _listBoxBackColor
        End Get
        Set(value As Color)
            Dim c As New Windows.Media.Color With {
                .A = value.A,
                .R = value.R,
                .G = value.G,
                .B = value.B
            }

            _listBox.Background = New Windows.Media.SolidColorBrush(c)
            _listBoxBackColor = value
        End Set
    End Property
    Public Property TextColor As Color
        Get
            Return _textColor
        End Get
        Set(value As Color)
            Dim c As New Windows.Media.Color With {
                .A = value.A,
                .R = value.R,
                .G = value.G,
                .B = value.B
            }

            _listBox.Foreground = New Windows.Media.SolidColorBrush(c)
            _textColor = value
        End Set
    End Property

    Public Property SelectionMode As Windows.Controls.SelectionMode
        Get
            Return _listBox.SelectionMode
        End Get
        Set(value As Windows.Controls.SelectionMode)
            _listBox.SelectionMode = value
        End Set
    End Property
    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    <Browsable(False)>
    Public Property SelectedItem As Object
        Get
            Return _listBox.SelectedItem
        End Get
        Set(value As Object)
            _listBox.SelectedItem = value
        End Set
    End Property

    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    <Browsable(False)>
    Public ReadOnly Property SelectedItems As IList
        Get
            Return _listBox.SelectedItems
        End Get
    End Property

    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    <Browsable(False)>
    Public ReadOnly Property Items As ItemCollection
        Get
            Return _listBox.Items
        End Get
    End Property

    Public Property OverlayVisible As Boolean
        Get
            Return If(_image.Visibility = Windows.Visibility.Visible, True, False)
        End Get
        Set(value As Boolean)
            _image.Visibility = If(value, Windows.Visibility.Visible, Windows.Visibility.Hidden)
        End Set
    End Property

    Public Property OverlayImage As Bitmap
        Get
            Return _originalBitmap
        End Get

        Set(value As Bitmap)
            If value Is Nothing Then
                _image.Source = Nothing
            Else
                _image.Source = ToBitmapImage(value)
            End If

            _originalBitmap = value
        End Set
    End Property
    Private Function ToBitmapImage(ByVal b As Bitmap) As BitmapImage

        Using ms As New MemoryStream
            Dim bi As New BitmapImage

            b.Save(ms, Imaging.ImageFormat.Png)

            ms.Position = 0

            bi.BeginInit()
            bi.CacheOption = BitmapCacheOption.OnLoad
            bi.StreamSource = ms
            bi.EndInit()
            bi.Freeze()
            Return bi
        End Using
    End Function

    'This is for the designer
    Private Function ShouldSerializeTextColor() As Boolean
        Return Not (Me.TextColor = Color.Black)
    End Function
    'This is for the designer
    Private Sub ResetTextColor()
        Me.TextColor = Color.Black
    End Sub

    Private Function ShouldSerializeListBoxBackColor() As Boolean
        Return Not (Me.ListBoxBackColor = SystemColors.Control)
    End Function
    'This is for the designer
    Private Sub ResetListBoxBackColor()
        Me.ListBoxBackColor = SystemColors.Control
    End Sub

End Class

Now you have a specialized ListBox control that has the ability to overlay an image just the way you want.

Here is a video demonstrating it:-


I've also attached the actual project used in the demo video to this post.

I tried to include most of the standard functionality of a ListBox one would expect. Let me know if I forgot to add something or if there is some functionality you'd like to see. I really doubt you'd get a better solution than this given your requirements.

[boops boops]

It is possible to host WPF Controls in a WinForms application. So you could create the ListBox in WPF and import it into a WinForms project.

The WPF listbox can't easily be activated from the Form. It can be done, and it wouldn't take thousands of lines of new code, but you do need a basic knowledge of XAML and WPF as well as the possibilities and limitations of the WindowsFormsHost and the ElementHost. It would be simple enough to just pass snapshots of the ListBox and the overlay image between Forms and WPF, but it's unecessary. A good old Forms PictureBox would be just as good for this purpose.

I agree with paul4ije that the PictureBox is the place to combine the images. Just line up the bounds of the PictureBox bounds with the ListBox, take a snapshot of the ListBox using DrawToBitMap and put the set it as the PictureBox.BackgroundImage, and set the transparent 'cancelado' as the PictureBox.Image. In other words, cancelado in front. It automatically creates the dark red areas where tranparent red overlaps the black letters. You can add or remove the cancelado just by showing or hiding the picturebox as required.

But there's an important question: is your cancelado image really transparent? If you just grab the cancelado image from the screen, it will be opaque - despite the letters being light pink on a white background. That's the same mistake as I made in post #9 above.

Spybot, I hope your 'cancellado' png image is actually transparent. If its not, I can help you make a transparent version from scratch.

There's one drawback about putting a transparent PictureBox in front of the ListBox. What you see is really a snapshot, not the ListBox itself. So if you need to scroll or change the items you have to hide the PictureBox first. You could trigger that from a MouseDown event, for example.

BB

[Niya]

The WPF listbox can't easily be activated from the Form. It can be done, and it wouldn't take thousands of lines of new code, but you do need a basic knowledge of XAML and WPF as well as the possibilities and limitations of the WindowsFormsHost and the ElementHost.

I already did it in a follow up post. Did you see the post above yours here? It works perfectly with no odd quirks as far as I could tell. Activation/Focus and all that works as you'd expect.

[Spybot]

Yes it could be a solution, but what if I need to scroll my ListBox...

[Spybot]

Hi, boops!
Yes my image has a transparent background, in fact the third image I show in Post#1 is a combination I made using the "Cancelado" image and my ListBox snapshot, so the image has a transparent background, also because I created it in Inkscape, saving it as .png.

I agree that passing snapshots of the ListBox and overlay the image between Forms and WPF it's unnecessary.
If only VS would allow PictureBoxes to Show transparency over any control in the Form, we wouldn't be having this conversation.
I've already reported this "Issue" to MS, hopping they will fix it soon or probably in 10 more years.

[Spybot]

Hi Niya!
I really apprecciate your effort in showing me this new way to solve this problem, I tried it, and I messed everything up, thanks God I had a backup. so since this is not a natural solution to windows forms I will not use it
Thank you very much Niya.

[.paul.]

Panels over Controls allow transparency. You could try that...

[Niya]

Hi Niya!
I really apprecciate your effort in showing me this new way to solve this problem, I tried it, and I messed everything up, thanks God I had a backup. so since this is not a natural solution to windows forms I will not use it
Thank you very much Niya.

Well that's too bad .

Hopefully one of the other suggestions can work out for you. The other ideas like using PictureBoxes and Panels don't really appeal to me that much. My experience with such approaches is that they can be fraught with a bunch of tiny problems and quirks that you have to spend a lot of time fixing. This is the exactly the reason I dipped my toes into WPF in the first place. Nonetheless, these solutions can work. I think it was Boobs that said he'd look at it over the weekend for you. I'm just not personally willing to go down those routes while knowing there is a far easier way to do it.

Anyways, I hope it works out. Good luck to you

Spybot, I hope your 'cancellado' png image is actually transparent. If its not, I can help you make a transparent version from scratch.

Yes, his PNG image is transparent. I didn't have to do anything to it.

[Spybot]

Yes I've tried with panels, and also with labels, buttons, textBoxes ... and basically any control that has the image property none of them worked for me.

[boops boops]

Here's a code example using a PictureBox. It produces result that looks to me something like what you wanted in post #1.

In the designer, create a Form (Form1) with a ListBox (ListBox1 with your preferred items and font) and a CheckBox (CheckBox1, unchecked). The PictureBox (PictureBox1) is declared in the code itself.

Public Class Form1

    Private WithEvents PictureBox1 As New PictureBox
    Private cancelado As Bitmap = New Bitmap("D:\pictures\cancelado.png")

    Private Sub Form2_Load(sender As Object, e As EventArgs) Handles Me.Load
        Me.Controls.Add(PictureBox1)
        PictureBox1.Visible = False
    End Sub

    Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
        If CheckBox1.Checked Then
            UpDatePictureBox()
        Else
            PictureBox1.Hide()
        End If
    End Sub

    Private Sub UpDatePictureBox()
        With PictureBox1
            .Bounds = ListBox1.Bounds
            .BringToFront()
            .BackgroundImageLayout = ImageLayout.None
            .BackgroundImage = Snapshot(ListBox1)
            .SizeMode = PictureBoxSizeMode.Zoom
            .Image = cancelado
            .Show()
        End With
    End Sub

    Private Function Snapshot(ctrl As Control) As Bitmap
        Dim bmp As New Bitmap(ctrl.Width, ctrl.Height)
        Dim rect As New Rectangle(0, 0, ctrl.Width, ctrl.Height)
        ctrl.DrawToBitmap(bmp, rect)
        Return bmp
    End Function

End Class

As it stands, you have to un-cancelado the list in order to scroll or modify the ListBox items. You could "automate" that by clicking on the visible result: for example, use the PictureBox1.MouseDown event to hide the picture box. If you are not getting the result you want, please post an image of your result. You may also need to explain what you want in more detail.

My result:

[boops boops]

I already did it in a follow up post. Did you see the post above yours here? It works perfectly with no odd quirks as far as I could tell. Activation/Focus and all that works as you'd expect.

Unfortunately, I didn't. My internet connection started playing up. I managed to get one message posted before it packed up altogether and missed your prior posting. I couldn't get it repaired until today (Wed. 2 Feb). I'm looking forward to trying out your use of the ElementHost etc. because we see too few sound examples of it.

BB

[Spybot]

Hi boops!
Yes I tried your code and made some adaptations to it, and it worked perfectly!.
I managed the scrolling by using the MouseEnter & MouseLeave Events, so when the mouse enters the PictureBox area, the PictureBox disappears and when it leaves PictureBox appears, everything seems to work just fine, except for one detail (and this maybe subject for another threat) but as long as the mouse pointer moves inside the ListBox (When the PictureBox is hidden) the text in the ListBox shows a funny text flickering.

my code:

Private Sub PictureBox1_MouseEnter(sender As Object, e As EventArgs) Handles PictureBox1.MouseEnter
        If MyTrigger = 1 Then
            PictureBox1.Visible = False
        Else
            PictureBox1.Visible = False
        End If
    End Sub
 
    Private Sub PictureBox1_MouseLeave(sender As Object, e As EventArgs) Handles PictureBox1.MouseLeave
        If MyTrigger = 1 Then
            PictureBox1.Visible = True
        Else
            PictureBox1.Visible = False
        End If
    End Sub

I don't know a better way to achieve this effect though.

Other than that, I believe this threat is pretty much SOLVED.

[Niya]

because we see too few sound examples of it.

My guess is that anybody who knows how to use ElementHost also knows how to use WPF and with that they would just do their projects in straight WPF. I might do a Codebank post on it at some point.